Refreshing a page on button press

Question

newbie developer here and this is actually my first question on stack overflow. I'm in my first role as a developer and I've been given the task of finishing off an app that someone else started and I'm having a hard time getting the page to refresh when the users click a particular button.

The page has a list of items and each item has a checkbox next to it that users can put a check mark into and then click the Remove Items button. In theory clicking that button is supposed to refresh the page when it's done, or at least refresh the section of the page that contains the list..as far as I can tell. And the item is being removed, but the refresh isn't working so users are having to manually refresh the page before the items they chose to remove actually disappear off the screen.

Here's what's behind the button in controller:

[HttpPost]
        public ActionResult UpdatePartStatus(List<tblPart> parts, tblArea area)
        {
            _LookupService.UpdatePartStatus(parts);
            // return RedirectToAction("Details", area);
            // return Redirect("~/Details");
            return RedirectToAction("Parts", "Menu", false);
            // <% return Response.Redirect(Request.RawUrl); %>
            // return Response.Redirect(Request.RawUrl);
            // return Page.Redirect(Page.Request.RawUrl, false);
            // return Redirect(Request.UrlReferrer.ToString());
            // return View();
            // return Redirect(HttpContext.Request.UrlReferrer.AbsoluteUri);

        }

The first line that's commented out is the way the previous developer left it. All the other lines that are commented out are the things I've tried so far, none of which worked. And the one that isn't commented out just happens to be the last one I tried before posting this. Most of those attempts are the results of searching around here on stack overflow

And here's the script from the Details view:

<script>
    $('#btnAjax').click(function () {

            ....validation code I removed for this post....

            $.ajax({
                type: 'post',
                url: '/Parts/UpdatePartStatus',
                contentType: 'application/json; charset=utf-8',
                data: JSON.stringify(data),
                dataType: 'json'
            })
        }
    });
</script>

And here's the MapRoute code that I've seen referenced in several other posts on this topic:

routes.MapRoute(
                name: "Default",
                url: "{controller}/{action}/{id}",
                defaults: new { controller = "Parts", action = "Menu", id = UrlParameter.Optional }

The last thing the previous developer said before they left was that this is all standard MVC, nothing out of the ordinary but I'm running out of ideas.

I appreciate any thoughts or advice anyone can offer.

Thanks

Answer 1

If you are using Ajax, then you should use

    public JsonResult UpdatePartStatus(List<tblPart> parts, tblArea area)
    {
        _LookupService.UpdatePartStatus(parts);

        return Json(null); //This will always return a null result to your ajax call indicating a success 
    }

For me, I usually do return json result this way :

try {
    LookupService.UpdatePartStatus(parts);
    return Json(new { Success = true});
}
catch {
    return Json(new { Success = false});
}

And in your ajax call, do this:

$.ajax({
type: 'post',
url: '/Parts/UpdatePartStatus',
contentType: 'application/json; charset=utf-8',
data: JSON.stringify(data),
dataType: 'json',
success: function(result) {
    if (result.Success)
        location.reload();
    } else {
        alert("Delete failed");
    }

}
})

Answer 2

The code you shared in question does not have anything to reload the current page. Looks like you are making an ajax form submit to the server. So it does not really make sense to return a redirect response from that.

If you want to reload the page, you can do that in the done event of the ajax call.

$.ajax({
    type: 'post',
    url: '/Parts/UpdatePartStatus',
    contentType: 'application/json; charset=utf-8',
    data: JSON.stringify(data)
}).done(function(res){
    window.location.href = window.location.href; // This will reload the page
}).fail(function(a, b, c) {
    console.log('ajax call failed');
    });

But again, If you are reloading the page what is the point of doing the ajax post ? Instead of realoding the page, you may simply remove the specific DOM element(s) you removed using javascript. This will give the user a partial page update experience without the entire page reload.

If you know the Id of the item you removed, you can use that in your jQuery selector to remove it.

var idOfDeletedItem = "someDomElementId";
$.ajax({
    type: 'post',
    url: '/Parts/UpdatePartStatus',
    contentType: 'application/json; charset=utf-8',
    data: JSON.stringify(data)
}).done(function(res){
    // Let's remove that DOM element from the DOM
    $("#"+idOfDeletedItem).remove();

}).fail(function(a, b, c) {
    console.log('ajax call failed');
});

Answer 3

Simply add a success function to the ajax request:

$.ajax({
    type: 'post',
    url: '/Parts/UpdatePartStatus',
    contentType: 'application/json; charset=utf-8',
    data: JSON.stringify(data),
    dataType: 'json',
    success: function() {
        location.reload();
    }
})