CODEWITHSUNDEEP
javascriptc#ajaxasp.net-mvc
Ranjith Varatharajan
Ranjith Varatharajan

Reputation: 1694

Passing data in ajax post issue

Scenario :

Need to pass an object which contains a list of sub objects to the controller.

Issue :

I'm able to get the object's value but not the value of list of sub objects inside the object.

Code :

index.cshtml

function sendData() {
    var student = {
        Id: 1,
        Name: "xxx",
        Marks: [{
            Subject: "Maths",
            Mark:80
        },
        {
            Subject: "Science",
            Mark: 75
        }]
    }
    $.ajax({
        url: '@Url.Action("Receive", "Home")',
        data: student,
        success: function (data) {
            alert("done");
        },
        error: function (error) {
            alert('error For details refer console log');
            console.log(error);
        }
    });
}

HomeController.cs

public ActionResult Receive(Student student)
    {
        ViewBag.Message = "Your contact page.";
        return View();
    }

Student.cs

public class Student
{
    public int Id { get; set; }
    public string Name { get; set; }
    public List<Marks> Marks { get; set; }
}
public class Marks
{
    public string Subject { get; set; }
    public decimal Mark { get; set; }
}

Screenshot:

Chrome debugger shows all the data were set.

enter image description here

but in controller i'm not getting the value of Marks

enter image description here

Any help would be appreciated. Thank you.

Upvotes: 7

Views: 2339

Answers (1)

user3559349
user3559349

Reputation:

You need to stringify the data, and set the contentType and type ajax options (note that it needs to be a POST, otherwise you need to generate your data in a different way using fully qualified property names with dot notation - for example { Id: 1, .... , 'Marks[0].Subject': 'Maths', 'Marks[0].Mark': 80, ... }, in which case its your existing ajax code will work without modification)

var student = {
    ....
};

$.ajax({
    url: '@Url.Action("Receive", "Home")',
    data: JSON.stringify({ student: student }, // stringify
    type: 'POST', // add
    contentType: "application/json; charset=utf-8", //add
    success: function (data) {
        alert("done");
    },
    ....
});

Note that you method is returning a view, but you not doing anything with that view. If your intention is to update the DOM with that view, then the method should be return PartialView( ... ); and in the ajax success callback,

success: function (data) {
    $(someElement).html(data);
},

Upvotes: 6

Related Questions