如何保存在 ASP.NET MVC 中以表单编辑的多个模型？

Question

我需要创建一个支持批量插入对象的视图。我将存储库模式与实体框架 4 一起使用。

由于视图中将有多个单独的模型，因此如何处理将视图的模型绑定到发送到存储库的内容？

如何将表单中的输入值检索到控制器中？

---

我已成功完成视图，但无法从控制器检索数据。我使用了以下语句，但在发布后它碰巧变成了空

    public ActionResult AddPaymentForRoot_post(PaymentViewModelObject payments) {


        return null;

    }

Answer 1

我还没有使用过 EF，但我在我们的网站上有类似的需求。我通过将 View 指定为继承 System.Web.Mvc.ViewPage> 来完成此操作，然后使用 for 循环构建多个输入部分，利用允许模型所需的命名约定绑定器来构建可枚举。

我更喜欢创建一个具有可枚举属性的视图模型（请参阅下面的更新 2）。在此示例中，我们可以说它是带有名为 MyModelObjects 的 IEnumerable 属性的 MyViewModel 对象。在这种情况下，视图将如下所示...

具体来说，请确保为每个输入部分包含一个名为 MyModelObjects.Index 的隐藏字段，然后将您的属性输入命名为 MyModelObjects[ 0].MyProperty，其中 Index 隐藏字段的值对应于属性名称中的数组索引。

你最终会得到这样的结果，例如：

<div>
    <input type="hidden" name="MyModelObjects.Index" value="0" />
    Name: <input type="text" name="MyModelObjects[0].Name" /><br />
    Value: <input type="text" name="MyModelObjects[0].Value" />
</div>
<div>
    <input type="hidden" name="MyModelObjects.Index" value="1" />
    Name: <input type="text" name="MyModelObjects[1].Name" /><br />
    Value: <input type="text" name="MyModelObjects[1].Value" />
</div>
<div><a href="#" id="addItem">Add another item</a></div>

在某些情况下，我还有 javascript（由上面标记中的锚链接触发），它将克隆模板输入部分，修改名称以填充索引值，以及将其添加到 DOM。通过这种方式，用户可以动态地将记录添加到视图中。

根据您处理模型的方式，您还可以传入具有 IEnumerable 属性的 ViewModel。视图的类型会改变，但从根本上来说视图的设计不会改变。

更新
使用上面的示例，下面是我用来添加项目的 jQuery 代码的快速片段。我假设这是一个插入，但如果您也想支持这种类型的编辑界面，请注意注释。

首先，我设置了一个模板。虽然这可以完全用 jQuery 构建，但我发现更容易进行标记和操作名称。

<div id="templateDiv" style="display: none;">
    <input type="hidden" name="MyModelObjects.Index" value="0T" />
    Name: <input type="text" name="MyModelObjects[0T].Name" /><br />
    Value: <input type="text" name="MyModelObjects[0T].Value" />
</div>

您还可以在其中指定 ID...这可能是一个很好的做法，但为了简洁起见，我将在示例中省略它。

这样，您就可以按如下方式设置 jQuery 函数：

var currentIndex = 1 // if you were using this for editing, this would be dynamically set to the number of items you have
var doAddItem =
    function() {
        currentIndex++;
        var newItem = $("#templateDiv").clone();
        newItem.attr("id", "item" + currentIndex); // reset the ID here
        newItem.find("input[name=MyModelObjects.Index]").val(currentIndex);
        newItem.find("input[name$=.Name]").attr("name", "MyModelObjects[" + currentIndex + "].Name");
        newItem.find("input[name$=.Value]").attr("name", "MyModelObjects[" + currentIndex + "].Value");
        newItem.insertBefore($(this).closest("div")); // insert it before the div containing the add link...adjust appropriate to your layout
        return false;
    }

$(document).ready(function() {
    $("#addItem").click(doAddItem);
    // In a real-world app you'd probably want to have a delete option, too
});

UPDATE 2
那里有一点错误 - 如果您的视图输入到 IEnumerable