Jquery 从数据库中删除后从视图中删除条目
我使用下面的代码在索引页中显示表数据，目前我已经 创建了delete inline，用户点击delete按钮，弹出确认，点击delete是delete的调用操作，从DB中删除条目。问题是，在我从DB中删除条目后，在关闭模式后，我仍然在UI中看到它，在我刷新页面后，条目被删除，在ajax调用成功后，我应该如何从UI中删除条目Jquery 从数据库中删除后从视图中删除条目,jquery,asp.net,asp.net-mvc,asp.net-mvc-4,razor,Jquery,Asp.net,Asp.net Mvc,Asp.net Mvc 4,Razor,我使用下面的代码在索引页中显示表数据，目前我已经 创建了delete inline，用户点击delete按钮，弹出确认，点击delete是delete的调用操作，从DB中删除条目。问题是，在我从DB中删除条目后，在关闭模式后，我仍然在UI中看到它，在我刷新页面后，条目被删除，在ajax调用成功后，我应该如何从UI中删除条目 @model IEnumerable<TestropDownCreate.Models.TestModel> @{ ViewBag.
@model IEnumerable<TestropDownCreate.Models.TestModel>
@{
ViewBag.Title = "Index";
}
<h2>Index</h2>
<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<!-- Modal -->
<div class="modal fade" id="deleteModal" tabindex="-1" role="dialog" aria-labelledby="deleteModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title" id="deleteModalLabel">Delete Item</h4>
</div>
<div id="deleteModalBody" class="modal-body"></div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<p>
@Html.ActionLink("Create New", "Create")
</p>
<table class="table">
<tr>
<th>
@Html.DisplayNameFor(model => model.Name)
</th>
<th>
@Html.DisplayNameFor(model => model.SelectedGender)
</th>
<th></th>
</tr>
@foreach (var item in Model)
{
<tr>
<td>
@Html.DisplayFor(modelItem => item.Name)
</td>
<td>
@Html.DisplayFor(modelItem => item.SelectedGender)
</td>
<td>
@Html.ActionLink("Edit", "Edit", new { id = item.ID }) |
@Html.ActionLink("Details", "Details", new { id = item.ID }) |
<a href="#" class="deleteLink" id="@item.ID">delete</a>
</td>
</tr>
}
</table>
<script>
$(function () {
$("#deleteModal").modal("hide"); // initially hides the modal pop-up until needed
$(".deleteLink").on("click", function () {
$.get('@Url.Action("GetDeletePartial")', { id: $(this).prop("id") }, function (data) {
$("#deleteModalBody").html(data);
$("#deleteModal").modal("show"); // shows the modal pop-up now that we have our partial view
});
});
});
$("#deleteBtn").on("click", function () {
$.ajax({
type:'POST',
url: "/User/DeleteConfirmed",
dataType: "json",
data: {id: Id} ,
success: function (result) {
var id = result;
},
});
});
});
</script>
@model IEnumerable
@{
ViewBag.Title=“Index”；
}
指数
&时代；接近
删除项目
接近
<p>
@Html.ActionLink("Create New", "Create")
</p>
<table class="table">
<tr>
<th>
@Html.DisplayNameFor(model => model.Name)
</th>
<th>
@Html.DisplayNameFor(model => model.SelectedGender)
</th>
<th></th>
</tr>
@foreach (var item in Model)
{
<tr>
<td>
@Html.DisplayFor(modelItem => item.Name)
</td>
<td>
@Html.DisplayFor(modelItem => item.SelectedGender)
</td>
<td>
@Html.ActionLink("Edit", "Edit", new { id = item.ID }) |
@Html.ActionLink("Details", "Details", new { id = item.ID }) |
<a href="#" class="deleteLink" id="@item.ID">delete</a>
</td>
</tr>
}
</table>
<script>
$(function () {
$("#deleteModal").modal("hide"); // initially hides the modal pop-up until needed
$(".deleteLink").on("click", function () {
$.get('@Url.Action("GetDeletePartial")', { id: $(this).prop("id") }, function (data) {
$("#deleteModalBody").html(data);
$("#deleteModal").modal("show"); // shows the modal pop-up now that we have our partial view
});
});
});
$("#deleteBtn").on("click", function () {
$.ajax({
type:'POST',
url: "/User/DeleteConfirmed",
dataType: "json",
data: {id: Id} ,
success: function (result) {
var id = result;
},
});
});
});
</script>
@ActionLink（“新建”、“创建”）
<p>
@Html.ActionLink("Create New", "Create")
</p>
<table class="table">
<tr>
<th>
@Html.DisplayNameFor(model => model.Name)
</th>
<th>
@Html.DisplayNameFor(model => model.SelectedGender)
</th>
<th></th>
</tr>
@foreach (var item in Model)
{
<tr>
<td>
@Html.DisplayFor(modelItem => item.Name)
</td>
<td>
@Html.DisplayFor(modelItem => item.SelectedGender)
</td>
<td>
@Html.ActionLink("Edit", "Edit", new { id = item.ID }) |
@Html.ActionLink("Details", "Details", new { id = item.ID }) |
<a href="#" class="deleteLink" id="@item.ID">delete</a>
</td>
</tr>
}
</table>
<script>
$(function () {
$("#deleteModal").modal("hide"); // initially hides the modal pop-up until needed
$(".deleteLink").on("click", function () {
$.get('@Url.Action("GetDeletePartial")', { id: $(this).prop("id") }, function (data) {
$("#deleteModalBody").html(data);
$("#deleteModal").modal("show"); // shows the modal pop-up now that we have our partial view
});
});
});
$("#deleteBtn").on("click", function () {
$.ajax({
type:'POST',
url: "/User/DeleteConfirmed",
dataType: "json",
data: {id: Id} ,
success: function (result) {
var id = result;
},
});
});
});
</script>
@DisplayNameFor（model=>model.Name）
@DisplayNameFor（model=>model.SelectedGender）
@foreach（模型中的var项目）
{
@DisplayFor（modelItem=>item.Name）
@DisplayFor（modelItem=>item.SelectedGender）
@ActionLink（“编辑”，“编辑”，新的{id=item.id}）|
@ActionLink（“详细信息”，“详细信息”，新的{id=item.id}）|
}
$（函数（）{
$（“#deleteModal”）.modal（“hide”）；//最初隐藏模式弹出窗口，直到需要时为止
$（.deleteLink”）。在（“单击”，函数（）{
$.get（'@Url.Action（“GetDeletePartial”），{id:$（this.prop（“id”）}，函数（数据）{
$（“#deleteModalBody”）.html（数据）；
$（“#deleteModal”）.modal（“show”）；//现在我们有了部分视图，显示模式弹出窗口
});
});
});
$（#deleteBtn”）。在（“单击”，函数（）{
$.ajax({
类型：'POST'，
url:“/User/deleteConfixed”，
数据类型：“json”，
数据：{id:id}，
成功：功能（结果）{
var id=结果；
},
});
});
});
<p>
@Html.ActionLink("Create New", "Create")
</p>
<table class="table">
<tr>
<th>
@Html.DisplayNameFor(model => model.Name)
</th>
<th>
@Html.DisplayNameFor(model => model.SelectedGender)
</th>
<th></th>
</tr>
@foreach (var item in Model)
{
<tr>
<td>
@Html.DisplayFor(modelItem => item.Name)
</td>
<td>
@Html.DisplayFor(modelItem => item.SelectedGender)
</td>
<td>
@Html.ActionLink("Edit", "Edit", new { id = item.ID }) |
@Html.ActionLink("Details", "Details", new { id = item.ID }) |
<a href="#" class="deleteLink" id="@item.ID">delete</a>
</td>
</tr>
}
</table>
<script>
$(function () {
$("#deleteModal").modal("hide"); // initially hides the modal pop-up until needed
$(".deleteLink").on("click", function () {
$.get('@Url.Action("GetDeletePartial")', { id: $(this).prop("id") }, function (data) {
$("#deleteModalBody").html(data);
$("#deleteModal").modal("show"); // shows the modal pop-up now that we have our partial view
});
});
});
$("#deleteBtn").on("click", function () {
$.ajax({
type:'POST',
url: "/User/DeleteConfirmed",
dataType: "json",
data: {id: Id} ,
success: function (result) {
var id = result;
},
});
});
});
</script>
<tr id="@item.ID">
条目上有id吗？如果是，则在成功块中使用jQuery删除它们$（entryToDelete）.删除（）。@shopia T实现您的功能的最佳可靠方法是使用partialview在foreach循环中显示详细信息，在您执行删除操作后，只需从jquery再次加载该部分视图，因为该部分视图不会显示已删除的行，因为它已从数据库中删除…@Archon如何获取entryToDelete？这是全部代码我在帖子里写的…@KartikeyaKhosla你能举个例子吗？非常感谢，你能解释一下这是如何解决问题的吗？$（'.'.'+id）这是什么？$以及这一切是如何工作的：）？假设你的id是第一行，那么语句
$（'.''.'+id）