HTMLタグヘルパーを使用して、MVCのHTMLテーブルに動的に行を追加します

Question

私の質問の背景を設定しましょう。私は今、私はSkillsを追加するための別のページを望んでいない

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; } 
} 

以下と同様のモデルでasp.netコアMVCアプリケーションを構築しています。したがって、Employeeのビュー（作成、編集など）では、List<Skill>をHTMLテーブルとして表現したいと考えています。今すぐテーブルの下に私はAdd SkillとRemove Skillに使用するボタンのカップルがあります。私CSHTMLの関連部分は、

<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に変換します

<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を使用します（以下のようなもの）。

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); 

私は手動でデータ・ヴァル必要な、クラス=「テキスト-危険フィールド検証-有効」等のタグヘルパーなどの関連するすべての属性を持つタグを作成する必要が好きではない

私のコードの品質を向上させるのに本当に役立ちます。

私の質問は、モデルのDataAnnotations情報（RequiredAttribute.ErrorMessage、DataTypeAttributeなど）をハードコードしたり、タグヘルパーがLinq.Expressionから推測するその他の情報をハードコードすることなく、テーブル行を「ビルド」する方法ですJavaScript

私はtemplateタグまたは "hidden 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); 
} 

はどのように例のレコードはあなた次第であることを確認します。 最初の行を使用することもできますが、空のテーブルがある場合は問題が発生するため、ダミーレコードを含む1つの行だけを持つ不可視テーブルを追加する方がよいと思います。その後、その表を非表示にします。

幸運

（PS：例では、jQueryのhttps://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.jsを使用しています）