使用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> 

像下面

<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，不同之處在於我使用普通的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); 

我不喜歡，我必須手動創建一個像數據-VAL-需要的class =「TEXT-危險場所驗證，有效」等標籤的幫手所有相關的屬性標籤將真正幫助我提高代碼的質量。

我的問題是如何「建立」我的錶行，而不必硬編碼我的模型DataAnnotations信息（如RequiredAttribute.ErrorMessage，DataTypeAttribute等）和其他標籤助手推斷從Linq.Expression，這些信息到javascript

我正在玩template標籤或「隱藏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）