[英]Asp.Net Core 5.0 Using jQuery in Partial View
我正在使用带有 Ajax 的部分视图在主视图上显示用户数据。 该脚本从主视图运行。
现在我想在部分结果中添加一个“删除”按钮,但是在部分视图中编写带有 ajax 调用的脚本时遇到问题。
如何通过使用 jQuery 和 Ajax 处理部分表单数据来解决此问题?
这是我的部分观点:
@foreach (var i in Model.Users)
{
<div>
<form id="deletForm">
<input name="Id" id="Id" value="@i.Id" hidden />
<input name="UserId" id="userId" value="@i.ApplicationUserId" hidden />
<button type="submit" class="close-icon" id="deleteBtn"></button>
</form>
<div class="class" data-toggle="tooltip" title="@i.ApplicationUser.FullName">@i.ApplicationUser.Name.ToUpper()</div>
</div>
}
<script>
$("#deleteBtn").click(function (e) {
e.preventDefault();
var formdata = $("#deletForm").serialize();
alert(formdata);
alert('I got here');
});
</script>
现在我想在部分结果中添加一个“删除”按钮,但是在部分视图中编写带有 ajax 调用的脚本时遇到问题。
请注意,您将<form id="deletForm">
放在局部视图中的@foreach
循环中,这将导致许多具有相同id
属性的 html 元素。
为了达到您的要求,您可以尝试修改如下代码。
局部视图
@foreach (var i in Model.Users)
{
<div>
<form class="deletForm">
<input name="Id" value="@i.Id" hidden />
<input name="UserId" value="@i.ApplicationUserId" hidden />
<button type="submit" class="close-icon deleteBtn"></button>
</form>
<div class="class" data-toggle="tooltip" title="@i.ApplicationUser.FullName">@i.ApplicationUser.Name.ToUpper()</div>
}
在主视图中
<script>
$(function () {
$(".deleteBtn").click(function (e) {
e.preventDefault();
var formdata = $(this).parent(".deletForm").serialize();
alert(formdata);
alert('I got here');
//code logic here of making ajax request(s)
})
})
</script>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.