ASP.NET MVC：动态添加部分视图并将它们反映在视图模型中

Question

情况：我有一个由部分组成的 ASP.NET Razor 页面。

其中一些在循环中迭代作为主页视图模型成员的集合。这些迭代的部分使用集合的成员类型作为它们自己的视图模型。

所以 Razor 的主页看起来像这样：

@model MyProject.MainViewModel

@*Other stuff...*@

@foreach (Subtype v in Model.SubViewModel)
{
         Html.RenderPartial("MyPartial", v);
}

部分看起来像这样：

@model Subtype 

@Html.HiddenFor(t=>t.ParentViewModelID)

@Html.EditorFor(t=>t.Field1)
@Html.EditorFor(t=>t.Field2)

这一切都适用于初始页面加载，但我想知道我应该如何处理通过 AJAX 动态添加这些部分。

假设用户按下一个按钮，该按钮最终旨在添加到这些视图模型集合之一。我可以 AJAX 回到服务器，在那里渲染适当的部分，然后返回给客户端：

[System.Web.Mvc.HttpGet]
public ActionResult AddSubtype(int mainViewModelId)
{
  var model = new Sub { ParentViewModelID=mainViewModelId};
  return PartialView("MyPartial", model);
}

然后我使用一些脚本将其粘贴到它所属的 DOM 中：

 success: (data) => {  $('#subtypeHanger').append(data);},

这似乎可行，除了一个很大的部分：当我最终提交表单时，我没有在我的视图模型中看到与这个动态添加的部分相关的数据。

我一直在尝试对此进行调试，但我想从广义上讲这是否可能 - 或者说，有多少 MVC 应该对这些东西进行抽象。显然我可以用 JavaScript 来强制它工作。不过，有没有我应该模仿的 ASP.NET MVC 模式？

---

编辑：我会提到一些我在发布后尝试过的事情：

1. 手动管理局部视图的编辑控件的“名称”和“ID”属性，这样它们最终看起来就像我将这些控件嵌套在主视图中而不是局部（即更长，包含更多文本和索引）。

2. 对局部视图使用主视图模型类。这使我将循环移动到部分中。 “name”和“id”属性看起来就像我在上面的 #1 中想要的那样，但是这种设计极大地复杂化了从我的 AJAX 调用返回部分的过程。

3. 使用“for”循环而不是“foreach”。就其本身而言，这并不能达到我想要的效果。

综上所述，如果 #1 或 #2 是我正在做的最好的模式，也许我可以做到这一点。

Answer 1

“情况：我有一个由部分组成的 ASP.NET Razor 页面。”

• 这称为“主详细信息”

  • 检查 Master Details CRUD with MVC 5 | The ASP.NET Forums

• 诀窍是为您的字段命名

  @Html.HiddenFor(t=>t.ParentViewModelID ,new { htmlAttributes = new { @Name = "[" + i + "].ParentViewModelID" } })
  @Html.EditorFor(t=>t.Field1 ,new { htmlAttributes = new { @Name = "[" + i + "].Field1" } })
  @Html.EditorFor(t=>t.Field2 , new { htmlAttributes = new { @Name = "[" + i + "].Field2" } })
  

• 原来如此

  <input type="text" name="[0].Field1" />
  <input type="text" name="[0].Field2" />
  <input type="text" name="[1].Field1" />
  <input type="text" name="[1].Field2" />
  

• 如果你使用更好（对于 ASP.NET mvc 5 模型绑定）

  public ActionResult Edit(MainViewModel master, List<Subtype> details)
  

如果您提供完整模型，我将提供完整的工作示例