使用 jQuery 将多个对象发送到 MVC 3 控制器答案

【问题标题】：Send multiple objects with jQuery to MVC 3 Controller使用 jQuery 将多个对象发送到 MVC 3 控制器
【发布时间】：2011-07-14 16:28:52
【问题描述】：

我有一个复选框列表和下拉列表。我想将下拉列表中的选定值和选中的复选框传递给我的 MVC3 控制器并使用模型绑定。

复选框的视图模型：

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

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>

我的看法：

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

向控制器发送数据的按钮点击处理程序：

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'
        });
};

最后，我的控制器：

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

我无法将值传递给我的控制器。我已经设法在没有 jQuery 的情况下仅传递 statesData 对象，并在我的表单中使用 type="submit"。当我尝试仅使用 jQuery 和 type="button" 传递 statesData 时，FireBug 中出现“无效 JSON 原语”错误。

当我尝试传递整数 + statesData 对象时，IE 9 崩溃并且 Firefox 挂起。

我尝试了各种解决方案，但都没有成功。

【问题讨论】：

标签： c# jquery .net asp.net-mvc-3

【解决方案1】：

试试这样：

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
        }
    });
};

【讨论】：

好的，现在我没有得到任何异常，generationId 被传递给控制器，但状态不是。这是我在帖子中得到的消息： 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 等。
好的，我想通了，如果您从“数据”中删除大括号和参数名称，它就会起作用。如果它看起来像这样： data: $('#checkboxFrm').serialize() 那么它可以工作（它已正确序列化）。我会将此答案标记为正确，但是有没有办法通过 jquery 发送多个对象？

【解决方案2】：

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

【讨论】：