在ajax调用上删除索引视图上的记录后重新加载索引视图

我在索引视图中有项目列表&对应于每个项目的删除按钮。我想删除一个记录，并得到最终用户的确认。记录正在从数据库中删除并得到确认，但仍存在于UI中。所以我创建了一个名为"IndexReloader"的共享视图。删除&在这个视图中，我正在重新加载索引视图。这是我的代码

    [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视图，

@{
    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脚本文件。我希望在删除记录后立即用最新数据加载索引视图。我怎样才能做到这一点？

您可以创建部分视图而不是共享视图。如果你想重新加载页面（没有ajax），你可以重定向到索引页面所在的相同操作，这样你就可以用简单的POST 重定向到相同的页面

如果你想做得更好，你可以在Indexroader.cshml中为显示的数据创建一个局部视图。（如果是某个控制器的Index.chtml而不是共享视图，效果会更好）

public ActionResult Index()
{
     return View("Index");  //This could go in any controller you have
}

然后在Index.chtml中，您可以调用一个局部视图

@{
    Layout = "~/Views/Shared/_Layout.cshtml";
}
<!--some stuff you want -->  
<div id="ListItems">
    @{Html.RenderAction("PartialViewAction","Controller");}
</div>

然后在你的控制器中，你可以做这样的事情：

public PartialViewResult PartialViewAction()
{
    //code stuff to return to the view, your list items
    return PartialView("_YourIndexData");
}

您可以随心所欲地创建部分视图，您需要从数据库中获得的所有项目以及在部分视图上使用您的模型或视图模型都将呈现在Index.chtml上然后你的局部视图，如果你想发送ID来删除记录，你可以使用一些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;
    });

在这种情况下，我使用"#按钮"点击功能。如果你在部分视图中使用项目列表，你可以在列表中创建一个链接，如下所示：

<a href="#" onclick="YourJavascriptFunction(@Model.YourID)">Delete</a>

然后你可以用上面相同的代码创建一个javascript函数：

function Yourfunction(ID){
     //AJAX CODE HERE
}

希望这能有所帮助。祝你好运

相关内容

最新更新

热门标签：