Send multiple objects with jQuery to MVC 3 Controller

Question

I have a checkbox list and dropdown list. I want to pass selected value from dropdownlist and checked checkboxes to my MVC3 Controller and use model binding.

ViewModel for checkbox:

public class StateViewModel
{
    public int Id { get; set; }
    public string Name { get; set; }
    public bool Checked { get; set; }
    public IEnumerable<TransitionViewModel> Transitions { get; set; }
}

Editor template for StateViewModel /Views/Home/EditorTemplates/StateViewModel.cshtml:

@model Mcs.Sibs.UI.Web.Models.StateViewModel

@Html.HiddenFor(x => x.Id)
@Html.HiddenFor(x => x.Name)
<div>
    @Html.CheckBoxFor(x => x.Checked)
    @Html.LabelFor(x => x.Checked, Model.Name)
</div>

My view:

@using (Html.BeginForm("GetSchedules", "Home", FormMethod.Post, new { id = "checkboxFrm" }))
{
    @Html.EditorForModel()
    <input id="ShowReportScheduleBtn" type="button" value="Show schedule" onclick="ShowReportSchedules()" />
}

Button click handler which is sending data to controller:

function ShowReportSchedules() {
    var selectedGenerationId = $('#SelectedGenerationId').val();
    var statesData = JSON.stringify($('#checkboxFrm'));
    var statesData2 = $('#checkboxFrm').serialize(); //I also tried this

        $.ajax({
            type: 'POST',
            url: '/Home/GetSchedules',
            data: { "generationId": selectedGenerationId, "states": statesData },
            dataType: "json",
            contentType: 'application/json; charset=utf-8'
        });
};

Finally, my controller:

    [HttpPost]
    public ActionResult GetSchedules(int generationId, IEnumerable<StateViewModel> states)
    {
        return View("Index");

I can't pass values to my controller. I've managed to pass only statesData object without jQuery and using type="submit" in my form. When I tried to pass only statesData with jQuery and type="button" I got "Invalid JSON primitive" error in FireBug.

When I tried to pass integer + statesData object, IE 9 is crashing and Firefox hangs.

I've tried various solutions but without success.

Darin Dimitrov · Accepted Answer · 2011-07-14 16:32:07Z

2

Try like this:

function ShowReportSchedules() {
    var selectedGenerationId = $('#SelectedGenerationId').val();
    $.ajax({
        type: 'POST',
        url: '@Url.Action("getschedules", "home")?generationId=' + selectedGenerationId,
        data: { states: $('#checkboxFrm').serialize() },
        success: function(result) {
            // Do something with the results
        }
    });
};

answered Jul 14, 2011 at 16:32

Darin Dimitrov

1.0m275 gold badges3.3k silver badges3k bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Marko Tošić Over a year ago

OK, now I don't get any exceptions, generationId is passed to controller, but states aren't. This is what I get in post message: states=%255B0%255D.Id%3D1%26%255B0%255D.Name%3DObrada%26%255B0%255D.Checked%3Dfalse%26%255B1%255D.Id%3D2%26%255B1%255D.Name%3DVerifikacija%26%255B1%255D.Checked%3Dtrue%26 etc..

Marko Tošić Over a year ago

OK, I figured it out, it works if you remove curly brackets and parameter name from 'data'. if it looks like this: data: $('#checkboxFrm').serialize() then it works (it's properly serialized). I'll mark this answer as correct, but is there some way to send multiple objects via jquery?

Stephen Rauch · Accepted Answer · 2017-02-09 21:13:48Z

0

var a = $("#a").serialize();
var b = $("#b").serialize();
var c = $("#c").serialize();


$.ajax({
          url: '@Url.Content("~/Controller/Method1")',
          type: 'POST',
          data: a+b+c,
          success: function (success) {
            // do something
          }
        });

// in Controller
[HttpPost]
public ActionResult Method1(abc a, bcd b, xyz c)
{
}

// where abc, bcd xyz are class

edited Feb 9, 2017 at 21:13

Stephen Rauch♦

50.1k32 gold badges118 silver badges143 bronze badges

answered Feb 9, 2017 at 20:36

SanH

192 bronze badges

Collectives™ on Stack Overflow

Send multiple objects with jQuery to MVC 3 Controller

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related