ASP.Net MVC Delete without load entire page

Question

I'm still new to asp.net mvc, i want to delete list of partial view, the delete is working but i must reload the entire page to show the new list

What I want is the partial view show the new list after delete without load the entire page, so only the partial view is updated

Here is my code:

My view content some of partial view :

@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>

Here is my partial view for UserHistory I tried to use ajax but it's not work. I already tried to use

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

and

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

Here is my code :

@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>

Here is my UserHistoryDetail Code :

@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>

And here is my JsonResult when button delete clicked :

  [HttpPost]
    public JsonResult DeleteUserHistory(string ID)
    {

        db.delUserHistory(ID);

        return Json(true);
    }

I still cannot find the solution for this , or maybe i used ajax in wrong way, any suggestion?

If you are using MVC4 (or higher), you don't need those [ancient script references](http://stackoverflow.com/questions/8782697/are-microsoftajax-js-microsoftmvcajax-js-and-microsoftmvcvalidation-js-obsolete). — Steve Greene, Apr 23 '17 at 03:20
you action `DeleteUserHistory` can return the updated history list and not Boolean and you can rebind the result in ajax success. — Anil, Apr 25 '17 at 06:14

score 0 · Answer 1 · answered Apr 23 '17 at 02:36

Let's assume that the DeleteUserHistory post url is '/[Controller]/': '/UserHistory'

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

What you should really do is use WebApi to manage data and use the views to display.

As for the delete, use method type 'delete' instead of 'post'. Post should be used for "adds".

ASP.Net MVC Delete without load entire page

1 Answers1