C# 为什么ajaxget请求只对foreach循环中的第一项有效？
如果用户想要“编辑”交易，我尝试用以前输入的数据填充“交易模型”表单。事务正在作为C# 为什么ajaxget请求只对foreach循环中的第一项有效？,c#,jquery,asp.net,ajax,asp.net-mvc,C#,Jquery,Asp.net,Ajax,Asp.net Mvc,如果用户想要“编辑”交易，我尝试用以前输入的数据填充“交易模型”表单。事务正在作为IEnumerable传递到视图中。我在一个表中显示每个事务，每一行都包含一个事务和可以对其执行的操作。一旦用户点击编辑，我就设置了一个弹出模式，里面有表单。为了填充表单，每次用户单击edit时，我都创建了一个jquery GET请求，该请求从数据库检索事务并返回我想要的json数据属性。问题是此请求适用于IEnumerable中的第一个事务 以下是我的看法： <div class="row">
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>
您在循环中输出
$（'#editform'）更改为使用类而不是id来标记
事件，并从中提取单击目标。您在循环中输出
，这意味着您正在生成多个重复的id。DOM ID在整个文档中必须是唯一的
由于存在重复项，$（'#editform'）
将只返回找到的第一个匹配元素，而不会返回任何其他元素，因为它不应该返回
可以更改为使用类而不是id来标记
元素，或者使用在单击中捕获的事件，并从中提取单击目标。可以为DOM创建多个id。相反，id
在jQuery选择器中使用foreach
和$（“.className”）
中的class
属性。而不是<代码> ID >使用<代码>类<代码>属性>代码>前缀 >和<代码> $>（“.CordNeX”）< /C> > jQuery选择器。此+考虑使用编辑弹出的部分视图。并将你的主弹出div放在布局中，这样你就可以在任何页面上使用它。谢谢你的解释！我以前有过这个问题，但我不太明白我是如何解决的，现在我知道为什么了！谢谢，阵亡将士纪念日快乐这是个不错的主意，我会这样做，让风景不那么凌乱。我们的指导老师之前提到过，过多的局部视图意味着每次加载页面时，视图引擎必须工作得更多—您要多次加载页面。这真的是个问题吗？我个人喜欢它，因为它使事情模块化+考虑使用一个部分视图为您的编辑弹出。并将你的主弹出div放在布局中，这样你就可以在任何页面上使用它。谢谢你的解释！我以前有过这个问题，但我不太明白我是如何解决的，现在我知道为什么了！谢谢，阵亡将士纪念日快乐这是个不错的主意，我会这样做，让风景不那么凌乱。我们的指导老师之前提到过，过多的局部视图意味着每次加载页面时，视图引擎必须工作得更多—您要多次加载页面。这真的是个问题吗？我个人喜欢它，因为它使事情模块化
@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);
}