在ajax调用中删除索引视图后，重新加载索引视图 [英] Reload index view after deleting a record on it on ajax call
问题描述
我在索引视图上有项目列表，每个项目对应的删除按钮.我想删除一条记录，并得到最终用户的确认.记录已通过数据库确认删除，但仍存在于UI上.因此，我创建了一个名为"IndexReloader"的共享视图.删除&后返回在此视图中，我正在重新加载索引视图.这是我的代码
I have list of items on index view & a delete button corresponding to each item. I want to delete a record with confirmation from end user. Record is getting deleted with confirmation from db but still exists on UI. So I created a shared view named "IndexReloader". which is returned after deleting & in this view I am reloading the index view. Here's my code
[HttpPost]
public ActionResult Delete(int? Id)
{
SqlConnection ObjSqlCon = null;
try
{
var SqlQuery = @"DELETE FROM [USER] WHERE USERID = " + Id;
var ConnectionStr = ConfigurationManager.ConnectionStrings["MVCConnectionString"];
// create a connection object
ObjSqlCon = new SqlConnection(ConnectionStr.ToString());
// create a command object
var ObjSqlCmd = new SqlCommand(SqlQuery, ObjSqlCon);
// open the connection
ObjSqlCon.Open();
ObjSqlCmd.ExecuteNonQuery();
//return View("IndexReloader");
return View("~/Views/Shared/IndexReloader.cshtml");
}
catch (Exception Ex)
{
return View();
}
finally
{
if (ObjSqlCon != null)
{
ObjSqlCon.Close(); ObjSqlCon.Dispose();
}
}
}
IndexReloader视图，
The IndexReloader view,
@{
Layout = "~/Views/Shared/_Layout.cshtml";
}
<!DOCTYPE html>
<html>
<head>
<title>IndexReloader</title>
<script type="text/javascript">
$(document).ready(function () {
//location.reload();
alert("hey");
window.location.replace("http://localhost/LearningMVC/My/Index.cshtml");
});
</script>
</head>
在母版页中，我包含了jquery脚本文件.我希望在删除记录后立即将最新数据加载到索引视图中.我该如何实现?
In master page I have included jquery script files. I want my index view to be loaded with latest data as soon as I delete a record. How can I achieve this?
推荐答案
您可以创建部分视图而不是共享视图.如果要重新加载页面(不带ajax)，则可以重定向到具有索引页面的相同操作，因此可以通过简单的POST重定向到同一页面
You can create a partial view instead of a share view. If you want to reload the page (without ajax) you could redirect to the same action where you have the index page so will redirect to the same page with a simple POST
如果您希望更好，可以在Indexreloader.cshml中为显示的数据创建一个局部视图. (最好是某个控制器的Index.cshtml而不是共享视图)
If you want it better, you could create a partialview inside your Indexreloader.cshml for the data shown. (Better if it's a Index.cshtml of some controller instead of a shared view)
public ActionResult Index()
{
return View("Index"); //This could go in any controller you have
}
然后在Index.cshtml中，您可以调用局部视图
Then inside you Index.cshtml you could call a partialview
@{
Layout = "~/Views/Shared/_Layout.cshtml";
}
<!--some stuff you want -->
<div id="ListItems">
@{Html.RenderAction("PartialViewAction","Controller");}
</div>
然后在您的控制器中，您可以执行以下操作:
Then in you controller you could do something like this:
public PartialViewResult PartialViewAction()
{
//code stuff to return to the view, your list items
return PartialView("_YourIndexData");
}
您可以根据需要创建局部视图，您需要从数据库中使用并在局部视图上使用模型或视图模型的所有项目都将显示在Index.cshtml上 然后您的partialview，如果您想发送ID来删除记录，则可以使用一些ajax:
Your partial view you can create it as you like, all the items you need from database and use your model or viewmodel on the partialview will render on your Index.cshtml And then your partialview if you want to send the the ID to delete the record you could use some ajax:
$("#Button").click(function () {
$.ajax({
url: "@Url.Action("DeleteAction","Controller")",
type: "POST",
cache: false,
data: { id : "YourId" },
success: function (result) {
//Here you can call your partialview with your query in the controller
var url = "@Url.Action("PartialViewAction", "Controller")";
//If you need a parameter you can use this code to replace it via javascript
//url = url.replace("-dummy", JavascriptVariable);
//The div ID in your Index.cshtml
$("#ListItems").load(url)
}
});
return false;
});
在这种情况下，我在点击功能上使用了"#Button".如果您在局部视图中使用项目列表，则可以在列表项目中创建一个链接，如下所示:
In this case im using a "#Button" on click function. If you are using a list of items in your partial view you could create a link in you list items like this:
<a href="#" onclick="YourJavascriptFunction(@Model.YourID)">Delete</a>
然后您可以使用上面的相同代码创建一个javascript函数:
And then you could create a javascript function with the same code above:
function Yourfunction(ID){
//AJAX CODE HERE
}
希望这会有所帮助.祝你好运.
Hope this helps a little. Good luck.
这篇关于在ajax调用中删除索引视图后，重新加载索引视图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
