Asp.net mvc ASP.Net MVC4绑定a“；“创建视图”；添加到包含列表的模型

大家好，在互联网世界，我有一个有趣的难题要告诉你们：

如果对象包含纯粹使用MVC视图/局部视图的其他对象列表，是否可以绑定视图以创建对象

老兄，这一切都很复杂，就像…让我给你一个快速的代码示例来说明我的意思：

Models:
public class ComplexObject
{
    public string title { get; set; }
    public List<ContainedObject> contents { get; set; }
}

public class ContainedObject
{
    public string name { get; set; }
    public string data { get; set; }
}

但是我想不出一个使用MVC绑定“containedObject”列表的好方法。我得到的最接近的方法是使用“列表”脚手架模板创建一个强类型IEnumerable局部视图，并将其包含在页面上

在不添加样式等的情况下，该局部视图的默认外观为：

@model IEnumerable<MVCComplexObjects.Models.ContainedObject>

<p>
@Html.ActionLink("Create New", "Create")
</p>
<table>
    <tr>
        <th>
            @Html.DisplayNameFor(model => model.name)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.data)
        </th>
        <th></th>
    </tr>

@foreach (var item in Model) {
    <tr>
        <td>
            @Html.DisplayFor(modelItem => item.name)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.data)
        </td>
        <td>
            @Html.ActionLink("Edit", "Edit", new { /* id=item.PrimaryKey */ }) |
            @Html.ActionLink("Details", "Details", new { /* id=item.PrimaryKey */ }) |
            @Html.ActionLink("Delete", "Delete", new { /* id=item.PrimaryKey */ })
        </td>
    </tr> 
}

</table>

我应该注意的是，我在使用Javascript编写代码时没有遇到太多问题（我将在下面介绍代码），但我真的很想知道是否有一种方法可以完全使用MVC来实现这一点。我最近从WebForms（我几乎刚刚用AJAX调用替换了我的所有回发）转换过来，这种事情在我工作的项目中经常出现

无论如何，我现在是这样做的：

Html-

Name: <input type="text" id="enterName" />
Data: <input type="text" id="enterData" />
<a id="addItem">Add Item</a>

<ul id="addedItems">
</ul>

<a id="saveAll">Save Complex Object</a>

名称：
数据：
添加项


保存复杂对象

Javascript-

<script>
var contents = [];
$(document).ready(function () {

    $('#addItem').click(function () {
        var newItem = { name: $('#enterName').val(), data: $('#enterData').val() };
        contents.push(newItem);
        $('#addedItems').html('');
        for (var i = 0; i < contents.length; i++) {
            $('#addedItems').append(
                "<li>" + contents[i].name + ", " + contents[i].data + "</li>"
            );
        }
    });

    $('#saveAll').click(function () {

        var toPost = { title: "someTitle", contents: contents };

        $.ajax({
                url: '/Home/SaveNew',
                type: 'POST',
                data: JSON.stringify(toPost),
                dataType: 'json',
                contentType: 'application/json; charset=utf-8',
                success: function (data, textStatus, jqXHR) {
                    alert("win");
                },
                error: function (objAJAXRequest, strError) {
                    alert("fail");
                }
            });
    });

});
</script>

var内容=[]；
$（文档）.ready（函数（）{
$（'#addItem'）。单击（函数（）{
var newItem={name:$（'#enterName'）.val（），data:$（'#enterData'）.val（）；
contents.push（newItem）；
$（'#addedItems'）.html（''）；
对于（变量i=0；i”+内容[i]。名称+”，“+内容[i]。数据+””
);
}
});
$（'#saveAll'）。单击（函数（）{
var toPost={title:“someTitle”，contents:contents}；
$.ajax({
url:“/Home/SaveNew”，
键入：“POST”，
数据：JSON.stringify（toPost），
数据类型：“json”，
contentType:'application/json；charset=utf-8'，
成功：函数（数据、文本状态、jqXHR）{
警惕（“胜利”）；
},
错误：函数（objaxrequest，strError）{
警报（“失败”）；
}
});
});
});

这不是一个糟糕的解决方案，我只是不想每次保存新对象时都要实现Javascript调用，而是在其他地方使用标准Razr代码。我希望在所有方面保持合理的一致性

还有其他人遇到过这个问题并找到了解决方案吗？

阅读本文：

然后读这篇：

---

这些文章是针对MVC2的，但将在3和4中使用

我最近发现自己需要完成同样的任务，而且和你一样，不想添加一堆javascript。我使用的是MVC4，据我所知，似乎没有现成的方法将模型的可枚举属性绑定到视图：(

但是，正如您在问题中所演示的，可以从视图中的模型中检索可枚举属性。诀窍就是将更新返回控制器。离开示例模型，您的视图可能如下所示（您不需要进行部分更改）：

@model MVCComplexObjects.Models.ComplexObject

@ActionLink（“新建”、“创建”）

@使用（Html.BeginForm（“SaveNew”、“Home”、FormMethod.Post））
{
@Html.DisplayNameFor（model=>model.contents[0].name）
@Html.DisplayNameFor（model=>model.contents[0].data）
@对于（int i=0；i

您的控制器操作如下所示：

[HttpPost]
public ActionResult SaveNew(ICollection<ContainedObject> updatedContents)
{
    foreach (var co in updatedContents)
    {
        //Update the contained object...
    }

    return RedirectToAction("Index");
}

[HttpPost]
公共操作结果SaveNew（ICollection updatedContents）
{
foreach（更新内容中的var co）
{
//更新包含的对象。。。
}
返回操作（“索引”）；
}

基本上，我们正在视图中定义一个新的集合对象，以便MVC在表单提交时传递给您的操作方法。新对象（“本例中的updatedContents”）基本上与在ComplexObject模型中定义和填充的列表属性（“本例中的contents”）相同

---

这是一项更大的工作，但确实实现了不需要任何javascript来返回帖子的目标。一切都可以通过标准MVC来完成。

第二篇文章比第一篇文章更有用，但这两篇文章都不是我想要的。第一篇文章重点介绍了如何提交静态大小的列表，而不是任意大小的列表。第二篇文章描述了如何编辑项目列表，但没有描述如何创建一个包含可变大小项目列表的全新对象。然而，我可以看到，我如何能够劫持该模式来生成提交的动态输入列表。我现在给你投票，但我认为这不是一个真正的“解决方案”我不需要一个javascript方法，因为它从不“提交”。为什么不在你的ajax帖子中序列化表单呢？我不确定我是否在这里跟随你@Maess，ajax部分在这里工作得很好，因为我没有表单，我不需要序列化它，我只需要构建一个JSON对象并将其发送给我的控制器/操作。我正在寻找一种纯粹通过Razor语法来实现这一点的方法

<script>
var contents = [];
$(document).ready(function () {

    $('#addItem').click(function () {
        var newItem = { name: $('#enterName').val(), data: $('#enterData').val() };
        contents.push(newItem);
        $('#addedItems').html('');
        for (var i = 0; i < contents.length; i++) {
            $('#addedItems').append(
                "<li>" + contents[i].name + ", " + contents[i].data + "</li>"
            );
        }
    });

    $('#saveAll').click(function () {

        var toPost = { title: "someTitle", contents: contents };

        $.ajax({
                url: '/Home/SaveNew',
                type: 'POST',
                data: JSON.stringify(toPost),
                dataType: 'json',
                contentType: 'application/json; charset=utf-8',
                success: function (data, textStatus, jqXHR) {
                    alert("win");
                },
                error: function (objAJAXRequest, strError) {
                    alert("fail");
                }
            });
    });

});
</script>

@model MVCComplexObjects.Models.ComplexObject

<p>
@Html.ActionLink("Create New", "Create")
</p>

@using (Html.BeginForm("SaveNew", "Home", FormMethod.Post))
{
    <table>

        <tr>
            <th>
                @Html.DisplayNameFor(model => model.contents[0].name)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.contents[0].data)
            </th>
            <th></th>
        </tr>

        @for (int i = 0; i < Model.contents.Count; i++)
        {
            <tr>
                <td>
                    @Html.TextBox("updatedContents["+i+"].name", Model.contents[i].name)
                </td>
                <td>
                    @Html.TextBox("updatedContents["+i+"].data", Model.contents[i].data)
                </td>
                <td>
                    @* Got rid of the edit and detail links here because this form can now act as both *@
                    @Html.ActionLink("Delete", "Delete", new { /* id=item.PrimaryKey */ })
                </td>
            </tr> 
        }

    </table>

    <input type="submit" value="Save" />
}

[HttpPost]
public ActionResult SaveNew(ICollection<ContainedObject> updatedContents)
{
    foreach (var co in updatedContents)
    {
        //Update the contained object...
    }

    return RedirectToAction("Index");
}