View not refreshing after AJAX post

Question

I have a view (Index.cshtml) with a grid (Infragistics JQuery grid) with an imagelink. If a user clicks on this link the following jquery function will be called:

function ConfirmSettingEnddateRemarkToYesterday(remarkID) {

    //Some code...

    //Call to action.
$.post("Home/SetEnddateRemarkToYesterday", { remarkID: remarkID },  function (result) {
    //alert('Succes: ' + remarkID);
    //window.location.reload();
    //$('#remarksgrid').html(result);
});

}

Commented out you can see an alert for myself and 2 attempts to refresh the view. The location.reload() works, but is basically too much work for the browser. The .html(result) posts the entire index.cshtml + Layout.cshtml double in the remarksgrid div. So that is not correct.

This is the action it calls (SetEnddateRemarkToYesterday):

       public ActionResult SetEnddateRemarkToYesterday(int remarkID) {

        //Some logic to persist the change to DB.

        return RedirectToAction("Index");
    }

This is the action it redirects to:

[HttpGet]
public ActionResult Index() {
    //Some code to retrieve updated remarks. 
    //Remarks is pseudo for List<Of Remark>
    return View(Remarks);

}

If I don't do window.location.reload after the succesfull AJAX post the view will never reload. I'm new to MVC, but i'm sure there's a better way to do this. I'm not understanding something fundamental here. Perhaps a nudge in the right direction? Thank you in advance.

Better to make remarksgrid a partial view and return a partial view result in SetEnddateRemarkToYesterday method. — ssilas777, Jul 19 '13 at 10:46
@ssilas777 You are right. I realized that the day after I posted this, which is the solution I went for. Thank you for replying. — Danny van der Kraan, Jul 22 '13 at 07:21

score 19 · Accepted Answer · edited Aug 07 '14 at 22:52

19

As you requesting AJAX call, you should redirect using its response

Modify your controller to return JSONResult with landing url:

public ActionResult SetEnddateRemarkToYesterday(int remarkID) {
    //Some logic to persist the change to DB.
    var redirectUrl = new UrlHelper(Request.RequestContext).Action("Index", "Controller");
        return Json(new { Url = redirectUrl });
}

JS Call:

$.post("Home/SetEnddateRemarkToYesterday", { remarkID: remarkID },  function (result) {
    window.location.href = result.Url
});

edited Aug 07 '14 at 22:52

Leniel Maccaferri

100,159
46
371
480

answered Jul 19 '13 at 11:32

Satpal

132,252
13
159
168

Tested it. Works as Satpal suggests. In the end I went for putting the grid on a partial view though. It seems more in line with the MVC architecture to me. Thanks for replying Satpal. – Danny van der Kraan Jul 22 '13 at 07:22

score 4 · Answer 2 · answered Jul 30 '13 at 11:25

4

After Ajax post you need to call to specific Url.. like this.. window.location.href = Url

answered Jul 30 '13 at 11:25

Naveen Katakam

400
1
8
23

score 0 · Answer 3 · answered Mar 20 '17 at 19:09

0

When using jQuery.post the new page is returned via the .done method

jQuery

jQuery.post("Controller/Action", { d1: "test", d2: "test" })
  .done(function (data) {
      jQuery('#reload').html(data);
  });

HTML

<body id="reload">

answered Mar 20 '17 at 19:09

Colin

1,758
1
19
24

score 0 · Answer 4 · answered Jan 01 '21 at 01:30

For me this works. First, I created id="reload" in my form and then using the solution provided by Colin and using Ajax sent data to controller and refreshed my form.

That looks my controller:

[Authorize(Roles = "User")]
[HttpGet]
public IActionResult Action()
{
    var model = _service.Get()...;
    return View(model);
}

[Authorize(Roles = "User")]
[HttpPost]
public IActionResult Action(object someData)
{

    var model = _service.Get()...;

    return View(model);
}

View:

<form id="reload" asp-action="Action" asp-controller="Controller" method="post">
    .
    .
    .
</form>

Javascript function and inside this function I added this block:

$.ajax({
    url: "/Controller/Action",
    type: 'POST',
    data: {
        __RequestVerificationToken: token, // if you are using identity User
        someData: someData
    },
    success: function (data) {
        console.log("Success")
        console.log(data);
        var parser = new DOMParser();
        var htmlDoc = parser.parseFromString(data, 'text/html'); // parse result (type string format HTML)
        console.log(htmlDoc);
        var form = htmlDoc.getElementById('reload'); // get my form to refresh
        console.log(form);
        jQuery('#reload').html(form); // refresh form
    },
    error: function (error) {
        console.log("error is " + error);
    }
});

View not refreshing after AJAX post

4 Answers4

Linked