Question

我正在尝试编辑的表格中有一个项目列表。

我有一个文件BankAccount.cshtml，如下所示：

@model BankAccount

@Html.HiddenFor(x => x.AccountId, new { @id="accountId" } )

<table id="transactionTable">
    <tbody>
        @Html.EditorFor(x => x.InboundTransactions)
    </tbody>
</table>
<a id="addTransactionLink">Add</a>

<script type="text/javascript">
    $(document).ready(function () {

        $('#transferTable').on('click', 'a.removeLink', function (e) {
            $(this).closest('tr').remove();
        });

        $('#addTransactionLink').click(function () {

            var transaction = {
                TransactionNumber: "234"
            };

                $.post('/BankAccount/AddRow/', transaction, function (data) {

                $('#transactionTable').append(data);
            });
        });
    });
</script>

一个看起来如下的Transaction.cshtml：

@model Transaction

    <tr>
        <td>
            @Html.EditorFor(x => x.TransactionNumber)
        </td>
        <td>
            <a class="removeLink">Remove</a>
        </td>
    </tr>

因此，这是为EditorFor InboundTransactions提供的。

在BankAccountController上的方法：

[HttpPost]
        public PartialViewResult AddRow(Transaction transaction)
        {
            return PartialView("EditorTemplates/Transaction", transaction);
        }

所以应该发生的是当点击添加行按钮时添加了一个新行。

无论如何，如果我进入页面并且我可能已经有两个事务，那么我在标记中添加一行它可能看起来像这样：

<tr>
  <td>
      <input id="BankAccount_Transactions_0__TransactionNumber" class="text-box single-line" type="text" value="456" name="BankAccount.Transactions[0].TransactionNumber" data-val-required="The TransactionNumber field is required." data-val-number="The field TransactionNumber must be a number." data-val="true">
  </td>
  <td>
      <a class="removeLink">Remove</a>
  </td>
</tr>

<tr>
  <td>
      <input id="BankAccount_Transactions_1__TransactionNumber" class="text-box single-line" type="text" value="456" name="BankAccount.Transactions[1].TransactionNumber" data-val-required="The TransactionNumber field is required." data-val-number="The field TransactionNumber must be a number." data-val="true">
  </td>
  <td>
      <a class="removeLink">Remove</a>
  </td>
</tr>

<tr>
  <td>
    <input id="Transactions" class="text-box single-line" type="text" value="0" name="Transactions">
  </td>
  <td>
     <a class="removeLink">Remove</a>
  </td>
</tr>

所以你可以在这里看到一个明显的问题。新添加的行不包含信息，表明它是属于BankAccount的事务集合的一部分。

发生回发时，不会包含新添加的行。

任何人都知道如何使这项工作？

Answer 1

我建议您查看following article以编辑可变长度列表。它说明了自定义BeginCollectionItem帮助程序的用法，该帮助程序用Guids替换集合中的编号索引。这也将在以后开始删除和添加项目时帮助您，因为您需要重新同步索引。 Guids没有这样的问题。

如何在标记中向项目集添加项目？

1 个答案: