Question

我正在尝试使用属性作为对象集合传回一个对象，但在我的Ajax帖子中使用序列化表单作为数据属性时，集合为空（null）。这是将包含列表作为属性的对象传回的错误方法，还是有些简单的我过度查看？当我进入控制器操作时，我可以看到我已经填充了Holder.Id属性，但MyList为空。

我尝试过在没有帮助的情况下制作contentType：'application / json'。我希望将完整对象作为Ajax post的有效负载而不是集合中的每个单独项。当使用每个单独的项目调用Ajax时它确实有效，我可能不得不使用该方法。

简单的POCO对象：

public class Holder
{
    public int Id { get; set; }
    public List<Contained> MyList { get; set; }
}

public class Contained
{
    public int Id { get; set; }
    public string Name { get; set; }
}

控制器方法：

    [HttpGet]
    public ActionResult Edit()
    {
        List<Contained> contained = new List<Contained>();
        contained.Add(new Contained{Id=123, Name="123Name"});
        contained.Add(new Contained{Id=456, Name="456Name"});
        return View(new Holder { Id = 1001, MyList = contained });

    }

    [HttpPost]
    public JsonResult Edit(Holder holder)
    {
        return Json("Succeeded");
    }

Html标记：

@model Compeat.MyMvcApp.Controllers.Holder
@{
     ViewBag.Title = "Edit";
}
<script type="text/javascript">
$(document).ready(function () {
    $("#btnAdd").click(function () {
        var coll = [];
        var newName = $("#txtAddNameToList").val();
        coll.push(newContainedJson(999, newName));
        $("#MyList").val(coll);
        var frmElems = $("form").serialize();
        console.log(coll);
        $.ajax({
            type: "POST",
            data: coll,
            url: "Edit",
            dataType: "json",
            success: function (data) { alert('worked!'); },
            error: function (data) {
                alert('error: ' + data.responseText);
            }
        });
    });

    function newContainedJson(id, name) {
        return { "Id": id , "Name": name };
    }
});
</script>
<ul>
@foreach (var o in Model.MyList)
{
    <li>@o.Name</li>
}
</ul>
@{ using (Html.BeginForm())
   {
@Html.HiddenFor(e => e.Id)
<input type="hidden" name="MyList" id="MyList" value="" />
<input type="text" id="txtAddNameToList" name="txtAddNameToList" />
<input type="button" id="btnAdd" value="Add Name" />
}}

Answer 1

使用下面的JQuery并在控制器中设置断点。

 $("#btnAdd").click(function () {



        var data = {}
        data.Id = 9;
        data.MyList = [];
        data.MyList.push({ 'Id': 99, 'Name': 'Dude' });
        data.MyList.push({ 'Id': 990, 'Name': 'Dude2' });

        $.ajax({
            type: "POST",
            data: JSON.stringify(data),
            url: "Home/Index",
            dataType: "json",
            contentType: 'application/json',
            success: function (data) { alert('worked!'); },
            error: function (data) {

            }
        });
    });

使用Ajax Post，使用JSon集合序列化的MVC3表单是空的

1 个答案: