如何使用Razor和.NET Core将项目添加到ViewModel中的列表中

Question

这是我的情况。

假设我有一个名为TheView.cshtml.的视图，TheView.cshtml有一个称为TheViewModel.cs的ViewModel。在TheViewModel.cs中，存在一个名为TheObjectList的对象（TheObject）的列表。

我有一个TheObject的编辑器模板，名为TheObject.cshtml。使用这个编辑器模板，我可以简单地用@Html.EditorFor(model => model.TheObjectList)显示TheObjectList中的所有项目。

但是，现在我想动态地将对象添加到此列表中。我有一个AJAX函数，它调用一个简单的局部视图，给用户一个空白行来添加一个新的"；CCD_ 11"；，然而，我动态添加的任何新的TheObject都不被认为是原始TheObjectList的一部分。

这是因为原始TheObjectList中的每个项目都是根据其在原始列表中的索引创建的，带有特定的前缀，而每个新的动态TheObject都是在没有前缀的情况下创建的，因此Razor不将其视为列表的一部分。

有办法绕过这个吗？

TheView.cshtml

@model Models.ViewModels.TheViewModel
<table id="Table">
    <tbody>
        @Html.EditorFor(m => m.TheObjectList);
    </tbody>
</table>
<button id="AddObject" type="button" class="btn btn-primary">Add Object</button>

TheViewModel.cs

public class TheViewModel
{
    public List<TheObject> TheObjectList { get; set; }
}

添加对象控制器方法

public IActionResult AddObject()
{
   return PartialView("_EmptyRow", new TheObject());
}

添加对象的AJAX方法

$('#AddObject').click(function () {
    $.ajax({
        url: 'AddObject',
        cache: false,
        success: function (data) {
            $('#Table > tbody').append(data);
        },
        error: function (a, b, c) {
            alert(a + " " + b + " " + c);
        }
     });
});

Answer 1

您基本上需要生成/返回标记，该标记看起来与编辑器模板为表单字段生成的标记相同，但元素索引除外。您需要从客户端传递索引，该索引将成为表单字段名称的一部分。

假设您的编辑器模板如下所示，并且TheObject具有GroupName属性

@model TheObject
<div>
    @Html.HiddenFor(x => x.GroupName)
    @Html.TextBoxFor(s=>s.GroupName,new {@class="thingRow"})
</div>

现在，当您用当前代码渲染页面时，编辑器模板将生成类似的输入字段

<input class="thingRow" id="TheObjectList_0__GroupName" 
                           name="TheObjectList[0].GroupName" type="text" value="Something">

其中0将替换为TheObjectList集合中项目的索引。

现在假设集合中已经有5个项目，所以当用户单击添加按钮时，除了0将被5替换（第六个项目为）之外，您希望生成如上所述的标记。因此，让我们更新ajax调用，以包含当前的项目数。

$('#AddObject').click(function () {
    var i = $(".thingRow").length;
    $.ajax({
        url: 'AddObject?index=' + i,
        success: function (data) {
            $('#Table > tbody').append(data);
        },
        error: function (a, b, c) {
            console.log(a, b, c);
        }
    });
});

这意味着，我们需要在我们的操作方法中接受索引值。由于我们需要将这个索引值从action方法传递到我们的视图以构建输入字段名称值，所以我向您的类添加了一个名为Index 的属性

public ActionResult AddObject(int index)
{
    return PartialView("_EmptyRow", new TheObject { Index = index});
}

现在，在您的_EmptyRow部分视图中，

@model TheObject
<input id="TheObjectList_@(Model.Index)__GroupName"class="thingRow" 
             name="TheObjectList[@(Model.Index)].GroupName"  type="text" value=""/>

现在，当您提交表单时，模型绑定将适用于这些动态添加的项，假设您在表单中有表

@model TheViewModel
@using (Html.BeginForm())
{   
    <table id="Table">
        <tbody>
            @Html.EditorFor(m => m.TheObjectList);
        </tbody>
    </table>
    <button id="AddObject" type="button" class="btn btn-primary">Add Object</button>
    <button type="submit" class="btn btn-primary">Save</button>
}