通过Ajax将复杂对象发布到MVC

Question

我已经很长时间在研究MVC，现在我想创建一个小应用程序，记录一张CD下的所有内容。目前我的主要难点是如何将Contents列表传递给Cd.class，并携带其他属性值。

public class Cd
{
    public int CdId { get; set; }
    public string Description { get; set; }
    public virtual ICollection<Content> Contents { get; set; } 
}

public class Content
{
    public int Id { get; set; }
    public string Name { get; set; }
    public string ContentType { get; set; }
}

查看：

 $.ajax({
 url: '/cd/addCd',
 type: 'POST',
 data:$('form').serialize()
    });

@using(Html.BeginForm()){
@Html.LabelFor(x=>x.CdId)
@Html.TextBoxFor(x=>x.CdId) <br/>
@Html.LabelFor(x=>x.Description)
@Html.TextBoxFor(x=>x.Description)<br />
<input type="submit" value="Submit" id="submit"/>

请注意，CdId和Description的值已经通过ajax的Serialize函数传递 - 只有Contents属性是我无法理解的问题。

更新

我通过创建一个ajax片段将序列化数据发送到控制器来解决了我的问题：

 $.ajax({
            type: 'POST',
            url: 'http://localhost:54004/Cd/AddCd',
            data: JSON.stringify(formData),
            contentType:'application/json;charset=utf-8'
        })
        .success(function () { })

使用以下formData对象：

   var formData = {
        'Description': "Learning Visual Studio 2012",
        'CdId': 1,
        'Contents': [{ "Id": 1, "Name": "Video #1", "ContentType": "Mp4" }, { "Id": 2, "Name": "Video #2", "ContentType": "Mp4" }]
    };

现在，控制器已经接收到了完整的Cd实体值以及它的内容。 希望这对未来的某个人有所帮助。

- KevinIsNowOnline

---

干得好。我知道你去哪了。 - Dave Alperovich

Answer 1

实现你想要的最好方法是删除 JQuery 并将你的 HTML.BeginForm 替换为 Ajax.BeginForm。

@using(Ajax.BeginForm()){
@Html.LabelFor(x=>x.CdId)
@Html.TextBoxFor(x=>x.CdId) <br/>
@Html.LabelFor(x=>x.Description)
@Html.TextBoxFor(x=>x.Description)<br />

@Html.TextBoxFor(x=>x.Contents[0].Id)<br />
@Html.TextBoxFor(x=>x.Contents[0].Name)<br />
@Html.TextBoxFor(x=>x.Contents[0].ContentType)<br />
@Html.TextBoxFor(x=>x.Contents[1].Id)<br />
@Html.TextBoxFor(x=>x.Contents[1].Name)<br />
@Html.TextBoxFor(x=>x.Contents[1].ContentType)<br />
<input type="submit" value="Submit" id="submit"/>
}

现在您的提交按钮将发布到一个名为您的视图的方法，并发送整个模型。

- Dave Alperovich

---

是的，谢谢您提供的信息，但我想做的是除了Id和描述之外，还要提交一份包含内容列表的清单。使用数组可以实现这个吗？ - KevinIsNowOnline

是的，会的。数组绑定是通过索引完成的。我会提供一个例子。 - Dave Alperovich

嗨，戴夫，很高兴知道它能工作。在等待你的示例时，我会调整这个。希望我们能解决这个问题并帮助其他遇到麻烦的人。 - KevinIsNowOnline

@KevinIsNowOnline，这是我的下一个示例。如果您正在传递已填充的模型或需要特定数量的控件，我们可以将其制成循环。如果我漏掉了什么，请澄清一下。 - Dave Alperovich

我已根据上面的更新解决了我的问题。谢谢你帮我想出了解决这种问题的方法。再次感谢你建设性的帮助。干杯！ - KevinIsNowOnline

Answer 2

不必手动迭代构建JSON对象，有一种有趣的替代方案，即使用集成了MVC的Knockoutmvc（Knockout）

查看示例 - http://knockoutmvc.com/BetterList

它可以发送完整的JSON对象，而无需编写任何额外的代码。

- ykay