Asp.. Net Core 5.0在局部视图中使用jQuery

Question

我使用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>

Answer 1

现在我想添加一个'删除'按钮的结果在部分，但我在编写一个脚本与ajax调用在部分视图的问题。

请注意，你把<form id="deletForm">在@foreach循环在你的部分视图，这会导致许多html元素具有相同的id属性。

要实现您的需求，您可以尝试像下面这样修改代码:

局部视图

@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>