使用HTML标记帮助器将行动态添加到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标签或“ hidden tr”，但进展不大。

我对asp.net核心，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 ）