為什么ajax GET請求僅適用於foreach循環中的第一項？

Question

如果用戶要“編輯”交易，我試圖用先前輸入的數據填充“交易模型”表單。 事務作為IEnumerable<Transaction>傳遞到視圖中。 我在表中顯示每個事務，每行包含一個事務和可以對其執行的操作。 用戶單擊“編輯”后，我就設置了一個模式以彈出帶有內部表單的窗口。 為了填充表單，我每次用戶單擊編輯時都會創建一個jQuery GET請求，此請求從數據庫中檢索事務，並以JSON數據的形式返回我想要的屬性。 問題在於此請求適用於IEnumerable中的第一個事務。

這是我的觀點：

<div class="row">
    <div class="col-sm-12">
        <table class="table table-bordered table-hover" cellspacing="0" width="100%" id="TransactionTable">
            <thead>
                <tr>
                    <th>Date</th>
                    <th>Description</th>
                    <th>Category</th>
                    <th>Amount</th>
                    <th>Reconciled</th>
                    <th>Updated By</th>
                    <th>Actions</th>
                </tr>
            </thead>
            <tbody>
                @foreach (var t in Model.Transactions)
                {
                    <tr>
                        <td>@t.Created</td>
                        <td>
                            @t.Description
                        </td>
                        <td>
                            @t.Category.Name
                        </td>
                        <td>
                            @t.Amount
                        </td>
                        <td>
                            @if(t.Reconciled == 0)
                            {
                                <span class="fa fa-check-square-o"></span>
                            }
                            else
                            {
                                @t.Reconciled
                            }
                        </td>
                        <td>
                            @t.UpdatedBy.DisplayName
                        </td>
                        <td>
                            <a href="#" class="fa fa-pencil fa-2x editform" data-toggle="modal" data-target="#edit-@t.Id" id="editform" data-transaction-id="@t.Id"></a>

                            <!--Edit Modal Begin-->
                            <div class="modal fade" id="edit-@t.Id" tabindex="-1" role="dialog" aria-hidden="true">
                                <div class="modal-dialog">
                                    <div class="modal-content">
                                        <div class="modal-header">
                                            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                                            <h4 class="modal-title">Edit Transaction &nbsp; <span class="fa fa-pencil fa-2x"></span></h4>
                                        </div>

                                                @using (Html.BeginForm())
                                                {
                                                    @Html.AntiForgeryToken()
                                                    @Html.HiddenFor(m => m.AccountId)
                                                    @Html.ValidationSummary(true, "", new { @class = "text-danger" })
                                                    <div class="modal-body">
                                                        <!--Description-->
                                                        <div class="form-group">
                                                            @Html.LabelFor(m => m.Transaction.Description, htmlAttributes: new { @class = "control-label" })
                                                            @Html.TextBoxFor(m => m.Transaction.Description, new { @class = "form-control" })
                                                            @Html.ValidationMessageFor(m => m.Transaction.Description, "", new { @class = "text-danger" })
                                                        </div>
                                                        <!--Amount. +/- -->
                                                        <div class="form-group">
                                                            @Html.LabelFor(m => m.Transaction.Amount, htmlAttributes: new { @class = "control-label" })
                                                            @Html.TextBoxFor(m => m.Transaction.Amount, new { @class = "form-control" })
                                                            @Html.ValidationMessageFor(m => m.Transaction.Amount, "", new { @class = "text-danger" })
                                                            @Html.RadioButtonFor(m => m.Transaction.IsIncome, true, new { @checked = true, }) Deposit
                                                            @Html.RadioButtonFor(m => m.Transaction.IsIncome, false) Purchase
                                                        </div>
                                                        <div class="form-group">
                                                            @Html.LabelFor(m => m.Transaction.Reconciled, htmlAttributes: new { @class = "control-label" })
                                                            @Html.TextBoxFor(m => m.Transaction.Reconciled, new { @class = "form-control" })
                                                            @Html.ValidationMessageFor(m => m.Transaction.Reconciled, "", new { @class = "text-danger" })
                                                        </div>

                                                        <div class="form-group">
                                                            <div class="ui-widget">
                                                                @Html.LabelFor(m => m.Transaction.Category, "Category", htmlAttributes: new { @class = "control-label" })

                                                                @Html.DropDownList("CategoryId", null, "-- select a category --", htmlAttributes: new { @class = "form-control", id = "categories" })
                                                                @Html.ValidationMessageFor(m => m.Transaction.Category, "", new { @class = "text-danger" })
                                                            </div>
                                                        </div>

                                                        <div class="form-group">
                                                            @Html.LabelFor(m => m.Transaction.Created, "Date", htmlAttributes: new { @class = "control-label" })
                                                            @Html.TextBoxFor(m => m.Transaction.Created, new { @class = "form-control", id = "datepicker1" })
                                                        </div>

                                                    </div>
                                                    <div class="modal-footer">
                                                        <button type="submit" class="btn btn-primary">Update</button>
                                                        <button type="reset" class="btn btn-success">Reset</button>
                                                        <button type="button" class="btn btn-facebook" data-dismiss="modal" aria-hidden="true">Cancel</button>
                                                    </div>

                                                }


                                    </div>
                                </div>
                            </div>

                            <a href="#" class="fa fa-trash fa-2x"></a>

                        </td>
                    </tr>
                }

            </tbody>
        </table>
    </div>
</div>

<div class="row">
    <div class="col-sm-12">
        <a href="@Url.Action("Index", "HouseAccount", new {householdid = Model.Account.HouseHoldId })" >Back to List &nbsp;<<</a>
    </div>
</div>

視圖下方的Javascript：

@section page{
    <script src="//cdn.datatables.net/plug-ins/1.10.7/integration/bootstrap/3/dataTables.bootstrap.js"></script>
    <script src="/Scripts/jquery-ui.min.js"></script>
    <script src="/Scripts/bootstrap-datepicker.js"></script>
    <script type="text/javascript">
        $('#editform').click(function (e) {
            $.ajax({
                type: 'GET',
                url: '/Transaction/EditTransactionInfo/',
                dataType: 'json',
                contentType: 'application/json',                
                data: { transId: $("#editform").data('transaction-id') },
                success: function (data) {
                    alert(data.Description);
                }
            })
        })
        $('#TransactionTable').DataTable();
        $('#datepicker1').datepicker();
    </script>
}

而我的請求控制器動作：

[HttpGet]
public JsonResult EditTransactionInfo(int transId)
{
    var trans = db.Transactions.Find(transId);
    return Json(new { Description = trans.Description,
                      Amount = trans.Amount,

    }, JsonRequestBehavior.AllowGet);
}

Answer 1

您正在循環輸出<a id=#editform> ，這意味着您將產生多個重復的ID。 DOM ID在整個文檔中必須是唯一的。

由於您有重復項，因此$('#editform')將僅返回找到的第一個匹配元素-由於不應這樣做，因此不會返回任何其他匹配元素。

可以更改為使用類而不是ID來標記<a>元素，或者使用在點擊時捕獲的event並從中提取點擊目標。

Answer 2

您為DOM創建多個ID。 相反， id在foreach使用class屬性，並在jQuery選擇器中使用$(".className") 。