在一次提交中创建多条记录

Question

我对 MVC 3 还很陌生，所以我不知道这是否可行。如果不是，最好的方法是什么：

我有一个 Model1 有很多属性和一个创建视图。在这个页面中，人们填写所需的数据并提交。但我的问题是 Model1 还包含 SubModel1，它是另一个模型（以及数据库中的另一个表）。我想在创建页面上提供按钮以通过弹出的 CSS 表单“即时”创建一些 SubModel1，并且在提交 SubModel1 时，使用 SubModel1 列表更新 Model1 创建页面，但是：

1. 由于当前未保存 Model1，当在 CSS 弹出表单上完成提交时，我应该将子模型保存在哪里？我可以将它添加到 Model1 模型中吗？如果有，怎么做？
2. 当我返回“创建”页面时，我需要做什么来更新并在列表中显示 SubModel1 名称。
3. 当我在 Model1 上提交时，我是否只需要保存 Model1，其余的会自动保存，还是我需要自己在控制器中按照正确的顺序完成所有保存？

对不起，如果这是新问题，但它会对我有很大帮助！ 谢谢！

Answer 1

正如很多人所说，没有愚蠢的问题。

您在这里暴露的问题经常发生，解决方案有时比我们想象的要简单。

有不止一种方法可以真正实现你想要做的事情，但在我看来，为了获得更流畅的体验，使用 JavaScript 显示 PopUp 并将子项添加到 Model1 是最好的选择。

您的 SubModel1 项目不应立即保存在您的数据库中，原因很简单，您的 Model1 可能无法提交。

在这种情况下，您的 CSS 弹出窗口应该只是页面中存在的表单（div 或其他），并使用 javascript 向 Model1 项目添加新行。

因此，当您提交 Model1 时，它将包含所有修改，包括新的 SubModel1 项。

There is a naming convention to using to allow proper serialization of the form when submitting.

通过坚持这个绑定，这将允许你在你的控制器中等待你的 Model1。

[HttpPost]
public ActionResult MyPostAction(Model1 item)
{
  //do some verification here
  if ( ModelState.IsValid )
  {
    //save your Model1 data
    foreach( SubModel1 subitem in item.SubItems )
    {
      //Save your SubItems here
    }
  }
  return RedirectToAction("Index");
}

您如何保存您的项目和子项目取决于您如何访问您的数据（实体框架、linq-to-sql、经典 ADO.NET 或任何适合您需要的）

更多细节：一些关于如何添加新元素的例子

这是您需要添加元素的那种 javascript（这里我使用了一个表格来显示子项）

对于本例，SubItems 数组的名称如下：

SubItems[0-based index].{SubItem property name}

因此我知道当我添加一个新项目时，新名称将是：

SubItems[SubItems.length].name
SubItems[SubItems.lenght].description

提交后，服务器会将名称绑定到模型中的属性。

您可以在JsFiddle 上看到这一点

$(document).ready(function () {
    $("#TestButton").click(function () {
        var $parent = $("#SubItems");
        var $newItem = $parent.find("tr:last").clone();

        $parent = $parent.find("tr:last").parent();
        var numElem = $parent.find("tr").length;

        $newItem.find('[name$="description"]').attr("name", "SubItems[" + numElem + "].description");
        $newItem.find('[name$="name"]').attr("name", "SubItems[" + numElem + "].name");

        $parent.append($newItem);
    });
});