为什么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">×</button>
<h4 class="modal-title">Edit Transaction <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 <<</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);
}
您在循环中输出<a id=#editform>
,这意味着您正在生成多个重复的id。DOM id 必须在整个文档中唯一。
由于您有重复项,$('#editform')
将只返回它找到的第一个匹配元素-它不会返回任何其他元素,因为它不应该返回。
更改为使用类而不是id来标记<a>
元素,或者使用您在on-click中捕获的event
并从中提取点击目标。
为DOM创建多个ID。在你的jQuery选择器foreach
和$(".className")
中使用class
属性代替id
。