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

时间:2019-05-23 15:23:27

标签: asp.net-mvc

情况:我有一个由部分构成的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是我所做工作的最佳模式,也许我可以做到这一点。

1 个答案:

答案 0 :(得分:0)

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

  • 诀窍是命名您的字段

    @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)
    

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