ASP.Net MVC 删除而不加载整个页面答案

【问题标题】：ASP.Net MVC Delete without load entire pageASP.Net MVC 删除而不加载整个页面
【发布时间】：2017-09-19 11:27:03
【问题描述】：

我还是 asp.net mvc 的新手，我想删除部分视图列表，删除工作正常，但我必须重新加载整个页面才能显示新列表

我想要的是局部视图在删除后显示新列表而不加载整个页面，所以只更新局部视图

这是我的代码：

我的观点内容部分观点：

@model cc.Models.User

@{
   Layout = "~/Views/Shared/_MemberLayout.cshtml";
 }    

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="@Url.Content("~/Scripts/MicrosoftAjax.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/MicrosoftMvcValidation.debug.js")" type="text/javascript"></script>

<body class="container body-content">

<div id="partialView1">
    @Html.Action(...)
</div>

<div id="partialView2">
    @Html.Action(...)
</div>

<div id="partialView4">
    @Html.Action(...)
</div>

<div id="partialView3" class="col-md-8 col-sm-1">
    @Html.Action("UserHistory", "User")
</div>


</body>

这是我尝试使用 ajax 的 UserHistory 的部分视图，但它不起作用。我已经尝试过使用

$(this).closest('.historyRow').remove();

和

$("a.deleteHistory").live("click", function () {
    $(this).parents("div.historyRow:first").remove(); 
    return false;
});

这是我的代码：

@model cc.Models.UserHistory

@{    
    Layout = null;
}

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="@Url.Content("~/Scripts/MicrosoftAjax.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/MicrosoftMvcValidation.debug.js")" type="text/javascript"></script>


<div id="formHistory">
   <div id="historyDetail">
        <div id="editDataHistoryUser">
            @foreach (var item in Model.History)
            {
                @Html.Partial("UserHistoryDetail", item)
            }
        </div>
        @Html.ActionLink("Add Form", "AddUserHistory", null, new { id = "btnFormHistory" })
    </div>
</div>



<script type="text/javascript">



$("#btnFormHistory").click(function () {
    $.ajax({
        url: this.href,
        cache: false,
        success: function (html) {  $("#editDataHistoryUser").append(html); }
    });
    return false;
});

$('#formHistory').on('click', '.deleteHistory', function () { 
    var id = $(this).data('id');
    if (id == 0) { 

        $(this).closest('.historyRow').remove();

        //$("a.deleteHistory").live("click", function () {
        //    $(this).parents("div.historyRow:first").remove();
        //    return false;
        //});
    } else {

        var url = '@Url.Action("DeleteUserHistory", "User")';
        $.post(url, { ID: id }, function (response) {
            if (response) {                    
                $(this).closest('.historyRow').remove();

                //$("a.deleteHistory").live("click", function () {
                //    $(this).parents("div.historyRow:first").remove();
                //    return false;
                //});                   

            }
        }).fail(function (response) {

        });
    }
});

</script>

这是我的 UserHistoryDetail 代码：

@model cc.Models.IUserHistory

@{
    Layout = null;
}


<div id="formUserHistoryDetail">
    @using (Ajax.BeginForm("UserHistoryDetail", "User", new AjaxOptions { HttpMethod = "POST" }))
  {
    <div id="historyRow">
         <div>@Html.LabelFor(model => model.IDHistory, new { style = "display:none;" })</div>
...
         <a href="#" class="deleteHistory" data-id="@Model.IDHistory">delete</a>
                    </div>


                }

</div>

这是我点击删除按钮时的 JsonResult：

  [HttpPost]
    public JsonResult DeleteUserHistory(string ID)
    {

        db.delUserHistory(ID);

        return Json(true);
    }

我仍然找不到解决方案，或者我以错误的方式使用了 ajax，有什么建议吗？

【问题讨论】：

如果您使用的是 MVC4（或更高版本），则不需要那些 ancient script references。
you action DeleteUserHistory 可以返回更新的历史列表而不是布尔值，您可以在ajax 成功时重新绑定结果。

标签： c# jquery asp.net-mvc asp.net-mvc-4 asp.net-ajax

【解决方案1】：

假设 DeleteUserHistory 帖子 url 是 '/[Controller]/': '/UserHistory'

$('.deleteHistory').click(function(){
  var url = '/UserHistory';
  $.ajax({
    type: "POST",
    url: url,
    data: data,
    success: onSuccessCallback
  });
});

您真正应该做的是使用 WebApi 来管理数据并使用视图来显示。

至于删除，使用方法类型'delete'而不是'post'。帖子应该用于“添加”。

【讨论】：