MVC如何动态添加新行答案

【问题标题】：MVC How to dynamically add a new rowMVC如何动态添加新行
【发布时间】：2013-10-28 08:24:07
【问题描述】：

我有一个可以编辑数据行的网页。我可以编辑一些，删除一些，单击“全部保存”按钮，一切正常。

我现在愿意允许添加新的“空白并准备好编辑”行。

当我学会如何删除行时，我明白正确索引输入名称的重要性（例如：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>

【问题讨论】：

至少显示您生成的 HTML，使用 jquery 或 mvc 添加？
Jquery 或 mvc：如果可能，我宁愿避免使用 ajax，但实际上更多的是最好的。

标签： c# jquery asp.net-mvc dynamic asp.net-mvc-5

【解决方案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 库才能使用我的示例。

【讨论】：