Sending object to a controller in asp.net mvc using ajax

Question

I have issue with sending object contains array to a controller

this is my js code

  var messageId = 0;
    function DraftMessage()
    {
        var to = [];
        var i = 0;
        $('#to option:selected').each(function (index, element) {
            to[i++] = $(element).val();
        });
        console.log(to);
        $.ajax({
            type: "POST",
            url: "@Url.Action("DraftMessage", "Activities")",
            datatype: "json",
            traditional: true,
            async: false,
            data: { "id": messageId, "To": to, "Title": $("#title").val(), "Project": $("#project").val(), "AreaId": $("#areaId").val(), "Body": $("#messageBody").val() },
                beforeSend: function () { }
        }).done(function (Id) {
            console.log(Id);
            messageId = Id;
        });
    }
    $("input, select, textarea").change(function () { DraftMessage(); });
    var contents = $('.note-editable').html();
    $(".compose-message").on("blur", ".note-editable", function () {
        if (contents != $(this).html()) {
            DraftMessage();
            contents = $(this).html();
        }
    });

and this is my controller side

    public int DraftMessage(message draftMessage, HttpPostedFileBase[] files = null)
    {
        return new MessageActions().DraftMessage(draftMessage);
    }

my issue is that the ajax request always send the to array as null, I do not know what is wrong so could anyone help me to resolve this issue.

where are you adding the file input data array to the data ? Take a look at this http://stackoverflow.com/questions/34603739/jquery-ajax-form-submit-that-contains-files/34604232#34604232 — Shyju, May 07 '16 at 19:25

score 0 · Answer 1 · answered May 07 '16 at 19:36

0

Can you change your request and use

dataType: "json",
contentType: "application/json;charset=utf-8",

This should work. Please let me know.

answered May 07 '16 at 19:36

Lalit Kale

557
6
13

score 0 · Answer 2 · answered May 07 '16 at 21:50

Try this. Push your object to array and send it as Json.

array.push({yourobject datas here})
    $.ajax({
        type: "POST",
        url: '/DraftMessage/Activities',
        contentType: 'application/json',
        data: JSON.stringify(array),
        success: function (d) {
            ..
        },
        error: function (xhr, textStatus, errorThrown) {

            console.log(errorThrown);
        }
    });

Convert your controller function's return type to JSonResult. Hope helps.

Ali Panahian · Answer 3 · 2016-05-08T07:35:15.583

do you want upload file using ajax ?!!

use the normal usage of form not the Ajax.BeginForm then in form submit event write your code like this:

 $('#Form').submit(function () {
        var xhr = new XMLHttpRequest();
        var fd = new FormData();

        var file = $('#Image').val();
        if (file) {
            var fname = $('#Image')[0].files[0].name;

            if (CheckFile(file)) {
                var uploadFile = document.getElementById('Image').files[0];
                var myArray = [];
                myArray.push(uploadFile);
                if (myArray.length > 0) {
                    for (var i = 0; i < myArray.length; i = i + 1) {
                        fd.append("File1", myArray[i]);
                    }
                }
            }
            else {
                return false;
            }
        } 


        fd.append("ID", messageId);
        fd.append("Title", $('#Title').val());
        fd.append("Project", $('#Project').val());
        fd.append("AreaId", $('#AreaId').val());
        fd.append("Body", $('#messageBody').val());

        var form = $('#Form');
        var token = $('input[name="__RequestVerificationToken"]', form).val();
        fd.append("__RequestVerificationToken", token);
        xhr.open("POST", "/ControllerName/Action/", true);
        xhr.send(fd);

        xhr.addEventListener("load", function (event) {
        if (event.target.response != "OK") {
            OnFail(event.target.response);
        }
        else {
            OnSuccess(event);
        }
         }, false);
        return false;
         })

server side in controller:

    [HttpPost]
    [ValidateAntiForgeryToken]
    public ActionResult actionName(Model pModel){

    HttpPostedFileBase File = Request.Files["File1"];
    if (File != null && File.ContentLength != 0){
                 //do what you want
      return Content("OK");
    }
    else{
     Response.StatusCode = (int)System.Net.HttpStatusCode.BadRequest;
                return Content("Error Messages",        System.Net.Mime.MediaTypeNames.Text.Plain);
    }

    }

score 0 · Answer 4 · answered May 24 '16 at 23:26

You can try a different approach. You can serialize your entire form by doing something like this:

var formdata = $("#frmEmailInfo").serialize();

and then post it to the Controller:

   $.ajax(
            {
                type: "POST",
                data: formdata,
                dataType: 'json',...

Sending object to a controller in asp.net mvc using ajax

4 Answers4