为什么ajax GET请求只对foreach循环中的第一项有效?

本文关键字:有效 一项 请求 GET ajax 循环 foreach 为什么 | 更新日期: 2023-09-27 17:50:48

如果用户想要'编辑'事务,我试图用先前输入的数据填充'事务模型'表单。事务作为IEnumerable<Transaction>被传递到视图中。我在一个表中显示每个事务,每行包含一个事务和可以对其执行的操作。一旦用户单击编辑,我已经设置了一个模态弹出与表单内部。为了填充表单,我在每次用户单击edit时创建了一个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);
}

为什么ajax GET请求只对foreach循环中的第一项有效?

您在循环中输出<a id=#editform>,这意味着您正在生成多个重复的id。DOM id 必须在整个文档中唯一。

由于您有重复项,$('#editform')将只返回它找到的第一个匹配元素-它不会返回任何其他元素,因为它不应该返回。

更改为使用类而不是id来标记<a>元素,或者使用您在on-click中捕获的event并从中提取点击目标。

为DOM创建多个ID。在你的jQuery选择器foreach$(".className")中使用class属性代替id