[英]Asp.Net Core 5.0 Using jQuery in Partial View
I am using a partial view with Ajax to display User Data on the Main View.我正在使用带有 Ajax 的部分视图在主视图上显示用户数据。 The script runs from the main view.
该脚本从主视图运行。
Now I want to add a 'delete' button to the results in the partial, but I am having problem in writing a script with an ajax call in the partial view.现在我想在部分结果中添加一个“删除”按钮,但是在部分视图中编写带有 ajax 调用的脚本时遇到问题。
How can I solve this problem by treating the partial form data with jQuery and Ajax?如何通过使用 jQuery 和 Ajax 处理部分表单数据来解决此问题?
This is my partial view:这是我的部分观点:
@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>
Now I want to add a 'delete' button to the results in the partial, but I am having problem in writing a script with an ajax call in the partial view.
现在我想在部分结果中添加一个“删除”按钮,但是在部分视图中编写带有 ajax 调用的脚本时遇到问题。
Please note that you put the <form id="deletForm">
within @foreach
looping in your partial view, which would cause many html elements with same id
attribute.请注意,您将
<form id="deletForm">
放在局部视图中的@foreach
循环中,这将导致许多具有相同id
属性的 html 元素。
To achieve your requirement, you can try to modify the code like below.为了达到您的要求,您可以尝试修改如下代码。
In partial view局部视图
@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>
}
In main view在主视图中
<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.