Question

我还是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>

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

了

$(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，有什么建议吗？

Answer 1

我们假设DeleteUserHistory帖子网址为'/ [Controller] /'：'/ UserHistory'

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

您应该做的是使用WebApi管理数据并使用视图进行显示。

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

ASP.Net MVC删除无负载整页

1 个答案: