0

オブジェクトのコレクションであるプロパティを持つオブジェクトを返そうとしていますが、シリアル化されたフォームをAjax投稿のデータ属性として使用すると、コレクションは空（null）になります。これは、リストをプロパティとして含むオブジェクトを返すための間違った方法ですか、それとも私が見落としている単純なものがありますか？コントローラのアクションにステップインすると、Holder.Id属性が設定されているのに、MyListが空であることがわかります。

私は何の助けもなくcontentType：'application/json'を作成しようとしました。コレクション内の個々のアイテムではなく、Ajax投稿のペイロードとして完全なオブジェクトを使用したいと思います。個々のアイテムで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" />
}}
4

1 に答える 1

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) {

            }
        });
    });
于 2012-05-22T17:36:00.420 に答える