MVC如何動態添加新行

Question

我有一個可以編輯數據行的網頁。我可以編輯一些，刪除一些，點擊「全部保存」按鈕，一切都很順利。

我現在願意允許添加新的「空白並準備好版本」行。

當我學會了如何刪除行時，我明白了正確索引輸入名稱的重要性（例如：name="[0].Price"）。

我想知道什麼是處理行添加的首選/最佳方式。

我相信這個問題肯定已經被問過了，但是我找不到答案（我是不是很好地選擇了用Google搜索的關鍵字？）。

---

<form action="/en-GB/MemberField" id="ca4b358f-0510-42a1-9d5f-4480451769ac" method="post"><input name="__RequestVerificationToken" type="hidden" value="Jbczos1wMnFXNCvqZeiExYDIK1EZa8gqA_zI9e8Ajd0ykpMxgl9S4telkqGLJVfpucIgJNd7yqoBGLnHccBizDbraQ5ucdWu-_akJhM857Y1" /> <table class="table"> 
     <tr> 
      <th> 
       System? 
      </th> 
      <th> 
       Virtual? 
      </th> 
      <th> 
       Name 
      </th> 
      <th></th> 
     </tr> 

     <tr> 
    <td> 
     <input checked="checked" class="check-box" disabled="disabled" type="checkbox" /> 
    </td> 
    <td> 
     <input checked="checked" class="check-box" data-val="true" data-val-required="The Virtual? field is required." name="[0].IsVirtual" type="checkbox" value="true" /><input name="[0].IsVirtual" type="hidden" value="false" /> 
    </td> 
    <td> 
     <input data-indexed="true" name="[0].Name" type="text" value="test 1" /> 
    </td> 
    <td> 
     <input type="button" value="delete" data-code="delete" /> 
    </td> 
</tr> 
<tr> 
    <td> 
     <input checked="checked" class="check-box" disabled="disabled" type="checkbox" /> 
    </td> 
    <td> 
     <input checked="checked" class="check-box" data-val="true" data-val-required="The Virtual? field is required." name="[1].IsVirtual" type="checkbox" value="true" /><input name="[1].IsVirtual" type="hidden" value="false" /> 
    </td> 
    <td> 
     <input data-indexed="true" name="[1].Name" type="text" value="test 2" /> 
    </td> 
    <td> 
     <input type="button" value="delete" data-code="delete" /> 
    </td> 
</tr> 
<tr> 
    <td> 
     <input checked="checked" class="check-box" disabled="disabled" type="checkbox" /> 
    </td> 
    <td> 
     <input checked="checked" class="check-box" data-val="true" data-val-required="The Virtual? field is required." name="[2].IsVirtual" type="checkbox" value="true" /><input name="[2].IsVirtual" type="hidden" value="false" /> 
    </td> 
    <td> 
     <input data-indexed="true" name="[2].Name" type="text" value="test 5" /> 
    </td> 
    <td> 
     <input type="button" value="delete" data-code="delete" /> 
    </td> 
</tr> 
<tr> 
    <td> 
     <input checked="checked" class="check-box" disabled="disabled" type="checkbox" /> 
    </td> 
    <td> 
     <input class="check-box" data-val="true" data-val-required="The Virtual? field is required." name="[3].IsVirtual" type="checkbox" value="true" /><input name="[3].IsVirtual" type="hidden" value="false" /> 
    </td> 
    <td> 
     <input data-indexed="true" name="[3].Name" type="text" value="test 3" /> 
    </td> 
    <td> 
     <input type="button" value="delete" data-code="delete" /> 
    </td> 
</tr> 
<tr> 
    <td> 
     <input class="check-box" disabled="disabled" type="checkbox" /> 
    </td> 
    <td> 
     <input class="check-box" data-val="true" data-val-required="The Virtual? field is required." name="[4].IsVirtual" type="checkbox" value="true" /><input name="[4].IsVirtual" type="hidden" value="false" /> 
    </td> 
    <td> 
     <input data-indexed="true" name="[4].Name" type="text" value="test 4" /> 
    </td> 
    <td> 
     <input type="button" value="delete" data-code="delete" /> 
    </td> 
</tr> 


    </table> 
    <input type="submit" value="save"/> 
</form> 
<script type="text/javascript"> 
    $(document).ready(function() { 
     var form = $('#ca4b358f-0510-42a1-9d5f-4480451769ac'); 

     form.find('[data-code="delete"]').click(function (evt) { 
      var row = $(evt.target).closest('TR'); 

      row.remove(); 
     }); 

     form.bind('submit', function (evt) { 
      // Code that handle indexing... 
     }); 
    }); 
</script> 

Answer 1

我什麼工作是使用JavaScript函數來添加新行。你必須保持你的模型的索引順序，0,1,2,3 ....類似這樣;

var iRowCnt = '@Model.Count()'; 

function AddRow() 
{ 
    //Add your html fields using iRowCnt as the index 
    var myRow = '<tr>' 
    + '<td>'<input name="[' + iRowCnt + '].Name" type="text" value="" /></td>' 
    + '</tr>'; 
    $('#divSection').append(myRow); 
    iRowCnt++; 
} 

此外，你需要鏈接到一個jQuery庫來使用我的例子。