MVC 如何动态添加新行

本文关键字:添加 新行 动态 何动态 MVC | 更新日期: 2023-09-27 18:37:08

我有一个网页,我可以在其中编辑数据行。我可以编辑一些,删除一些,单击"全部保存"按钮,一切都很好。

我现在愿意允许添加新的"空并准备编辑"行。

当我学会如何删除行时,我明白了正确索引输入名称的重要性(例如:name="[0].Price")。

我想知道处理行添加的首选/最佳方法是什么。

我相信这个问题一定已经被问过了,但我找不到答案(我是否选择我用谷歌搜索的关键字很糟糕?


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

MVC 如何动态添加新行

对我有用的是使用 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 库才能使用我的示例。