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

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>

这是我尝试使用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，有什么建议吗？

Answer 1

假设DeleteUserHistory帖子的URL为'/ [Controller] /'：'/ UserHistory'

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

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

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

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

问题描述

1 个解决方案

解决方案1
0 2017-04-23 02:36:27

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

问题描述

1 个解决方案

解决方案1 0 2017-04-23 02:36:27

解决方案1
0 2017-04-23 02:36:27