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库以使用我的示例。

MVC如何动态添加新行

1 个答案: