MVCを使用したページに動的に追加

Question

私は、ユーザーが特定の日付に臨時の開閉時間の新しい行を追加できるセクションを備えた剃刀ビューを持っています。これは、DatePicker、2つのSelectリスト、および「Delete Row」ボタンの3つのコントロールで構成されています。既存の保存された行はRazorを介してページロードされ、新しい行はOnClickイベントとJavaScriptを介して追加され、DOM要素にはほとんど固定されたhtmlが追加されます。すべての行は、HTTPPostに保存されます（または必要に応じて削除されます）。

私は、これらの特別な「ユーザー生成」行に対してはるかに複雑なデータセットの実装を必要とする新しい要件があります。これらの行のHTMLは広範囲です。 JavaScriptでハードコードされたHTMLを追加するよりも、ボタンクリックでView内にRazorを挿入するよりエレガントな方法がありますか？

Answer 1

これは完全にあなたのユースケースに依存し、あなたの質問にはコードを提供していませんが、Partial Viewと呼ばれるものがあります。あなたは基本的な紹介hereを読むことができます。

コントローラ

public IActionResult GetNewRow() 
{ 
    return PartialView("_NewRow"); 
} 

ビュー

<button id="btnAddRow" class="btn btn-primary">Add new row</button> 

<script type="application/javascript"> 
    $(function() { 
     $("#btnAddRow").on("click", function() { 
      $.get("/GetNewRow", function success(data) { 
       $("#WHEREVERYOUAREADDINGROWS").append(data); 
      }); 
     }); 
    }); 
</script> 

PartialView（_NewRow）

：あなたのケースのために

、私はこのような何かをしたいです1

<tr> 
    <td>Add whatever you need here</td> 
<tr> 

注：：私はこれを試していないので、AJAX構文が少しずれている可能性があります。