序列化表單數據收集到模型中使用的JavaScript

Question

比方說，我有一個對象是這樣的：

public class Widget 
{ 
    public string Name { get; set; } 
    public IEnumerable<Foo> Foos { get; set; } 
} 

public class Foo 
{ 
    public string Name { get; set; } 
} 

而且我控制器的方法將其發送到這樣一個觀點：

var widget = _dataAccess.GetWidget(someKey); 
return View(widget); 

而且我有一個查看，看起來像這樣：

@model MyNamespace.Widget 

@using(Html.BeginForm("Edit", "Widgets", FormMethod.Post, new { id = "the-form" })) 
{ 
    <p>@Html.TextBoxFor</p> 

    @foreach(var foo in Model.Foos) 
    { 
     <p>@Html.TextBoxFor(x => x.Foos.ToList()[Model.Foos.ToList().IndexOf(foo)])</p> 
    } 

    <input type="button" value="Save Changes" id="the-button" /> 
} 

<script type="text/javascript"> 
$(function() { 
     $("#the-button").click(function() { 
      $.ajax({ 
       url: '@Url.Action("Edit", "Widgets")', 
       type: 'POST', 
       data: JSON.stringify({ widget: serializeForm("the-form") }), 

       // etc, etc, not important 
      }); 
     }); 
    }); 
    function serializeForm(formId) { 
     var formData = {}; 
     $.each($("#" + formId).serializeArray(), function(){ 
      formData[this.name] = $(this).val(); 
     }); 
     return formData; 
    } 
</script> 

其中連載到：

{ "widget": { "Name" : "value from textbox", "[0].Name" : "some value", "[1].Name" : "some other value" } } 

當然這裏的序列化並沒有幫助，因爲[0].Name不可用。有沒有辦法改變它，以便序列化到Post方法控制器操作期望的內容？即是這樣的：

{ "widget":{"Name":"blah", "Foos":[ { "Name":"foo name 1"}, { "Name":"foo name 2"} ] }} 

Answer 1

可以輸出FOOS爲：

for (int i = 0; i < Model.Foos.Count(); i++) { 
    <input type="text" name="Foos[@i].Name" value="@Model.Foos.ElementAt(i).Name" /> 
} 

然後，您可以輕鬆地發佈形式：

$("#the-button").click(function() { 
    $.ajax({ 
     url: '@Url.Action("Edit", "Widgets")', 
     type: 'POST', 
     data: $('this').closest('form').serialize(), 

     // etc, etc, not important 
    }); 
}); 

菲爾哈克型號的post綁定列表說明這是深入的。