使用 HTML Tag Helpers 将行动态添加到 MVC 中的 HTML 表

Question

让我为我的问题设置一些背景。我正在使用类似于下面的模型构建一个 asp.net 核心 mvc 应用程序

public class Employee {
    public string Name { get; set; }
    public List<Skill> Skills { get; set; }
}

public class Skill {
    public string Name { get; set; }
    public int ExpertLevel { get; set; }
}

现在我不需要单独的页面来添加Skills。所以在我看来（创建、编辑等）Employee，我想将List<Skill> 表示为一个 HTML 表。现在，在表格下方，我有几个按钮，我将用于Add Skill 和Remove Skill。我的 cshtml 的相关部分如下所示

<table>
    <thead>
        <tr>
            <th>
                @Html.DisplayNameFor(model => model.Skills.Name)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.Skills.ExpertLevel)
            </th>
        </tr>
    </thead>

    <tbody>
        @if (Model.Skills != null) {
            @foreach (var item in Model.Skills) {
                <tr>
                    <td>
                        @Html.DisplayFor(modelItem => item.Name)
                        <input type="hidden" asp-for=@item.Name />
                        <span asp-validation-for=@item.Name class="text-danger" />
                    </td>
                    <td>
                        @Html.DisplayFor(modelItem => item.ExpertLevel)
                        <input type="hidden" asp-for=@item.ExpertLevel />
                        <span asp-validation-for=@item.ExpertLevel class="text-danger" />
                    </td>
                </tr>}
        }
    </tbody>

</table>

这个剃须刀代码被转换成如下的html

<table>
    <thead>
        <tr>
            <th>Skill</th>
            <th>ExpertLevel</th>
        </tr>
    </thead>

    <tbody>
        <tr>
            <td>
                C#
                <input type="hidden" data-val="true" data-val-required="Skill Name is required" id="item_Name" name="item.Name" value="C#" />
                <span class="text-danger field-validation-valid" data-valmsg-for="item.Name" data-valmsg-replace="true" />
            </td>
            <td>
                Yes
                <input type="hidden" data-val="true" data-val-number="The field ExpertLevel must be a number." id="item_ExpertLevel" name="item.ExpertLevel" value="4.0" />
                <span class="text-danger field-validation-valid" data-valmsg-for="item.ExpertLevel" data-valmsg-replace="true" />
            </td>
        </tr>
    </tbody>

</table>

现在，我已经弄清楚了如何使用 javascript 添加行和删除行，除了我使用纯 html 动态构建行（如下所示）。

var tdStr = '';
$(rowId).children('td').each(function () {
    tdStr += '<td>' + $.trim($(this).children().first().val()) + '</td>';
});

var tr = $('<tr>' + tdStr + '</tr>');
$(tableId + ' > tbody:last-child').append(tr);

我不喜欢我必须手动创建具有所有相关属性的标签，例如 data-val-required、class="text-danger field-validation-valid" 等。标签助手真的会帮助我提高我的代码质量。

我的问题是如何“构建”我的表格行，而不必对我的模型 DataAnnotations 信息（如RequiredAttribute.ErrorMessage、DataTypeAttribute 等）和标签助手从Linq.Expression 推断的其他此类信息进行硬编码，进入javascript

我在玩template 标签或“隐藏的 tr”，但没有取得太大进展。

我对 asp.net core、mvc、html 和 javascript 非常陌生。我正在使用这个项目来学习这些技术和正确的做法。

Answer 1

我想你可以像这样克隆一个模板记录：

<table id="TheTable">
    <thead>
        <tr>
            <th>Skill</th>
            <th>ExpertLevel</th>
        </tr>
    </thead>

    <tbody>
        <tr id="example">
            <td>
                <span data-template-field="fieldA">C#</span>
                <input  type="hidden" data-val="true" data-val-required="Skill Name is required" id="item_Name" name="item.Name" value="C#" />
                <span class="text-danger field-validation-valid" data-valmsg-for="item.Name" data-valmsg-replace="true" />
            </td>
            <td>
                <span data-template-field="fieldB">Yes</span>
                <input type="hidden" data-val="true" data-val-number="The field ExpertLevel must be a number." id="item_ExpertLevel" name="item.ExpertLevel" value="4.0" />
                <span class="text-danger field-validation-valid" data-valmsg-for="item.ExpertLevel" data-valmsg-replace="true" />
            </td>
        </tr>
    </tbody>

</table>

<button onclick="addLine('#TheTable')">add line</button>

和javascript代码：

addLine = function(tableId)
{
    var templaterow = $('#example');
    var clone = templaterow.clone(true)[0];    

    var fieldA = clone.querySelector('[data-template-field="fieldA"]');
    var fieldB = clone.querySelector('[data-template-field="fieldB"]');

    fieldA.innerText = "<new value>";
    fieldB.innerText = "123";

    $(tableId + ' > tbody:last-child').append(clone);   
}

如何制作示例记录取决于您。 您可以使用第一行，但是如果您有一个空表，那么您将遇到问题，所以我想最好添加一个不可见的表，其中只有一行包含一个虚拟记录，这样您就有了布局。然后隐藏该表。

祝你好运

（PS：示例使用jQuery https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js）