我正在尝试填充一个交易模型＆＃39;如果用户想要编辑＆＃39;交易。该事务将作为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">×</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);
}
答案 0 :(得分：3)
您在循环中输出<a id=#editform>，这意味着您正在生成多个重复的ID。 DOM ID 必须在整个文档中都是唯一的。
由于你有重复项，$('#editform')将只返回它找到的第一个匹配元素 - 它不会返回任何其他元素，因为它不应该。
更改为使用类而不是ID来标记<a>元素，或使用您在点击内捕获的event并从中提取点击目标。
答案 1 :(得分：1)
您为DOM创建多个ID。相反，id在jQuery选择器中使用class和foreach内的$(".className")属性。