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

Question

所以这是我的情况。

假设我有一个名为TheView.cshtml.的视图TheView.cshtml. TheView.cshtml有一个名为TheViewModel.cs的 ViewModel。 在TheViewModel.cs ，驻留的对象（的List TheObject调用） TheObjectList 。

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

但是，现在我想动态地将对象添加到这个列表中。 我有一个 AJAX 函数，它调用一个简单的局部视图来为用户提供一个空白行来添加一个新的“ TheObject ”，但是，我动态添加的任何新TheObject都不会被视为原始TheObjectList一部分。

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

有没有办法解决这个问题？

视图.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>

视图模型.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

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

假设您的编辑器模板如下所示，并且您的 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 方法中接受索引值。 由于我们需要将此索引值从 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>
}