Jquery – ASP.NET MVC and jQuery with TempData

asp.net-mvcjquery

I have a link in one of my views that users can click that calls an ActionResult. The link is like so:

<a class="do_something" href="#">lorem ipsum</a>

I then have some javascript that posts to the ActionResult (there is no data passed to the ActionResult) like so:

$("a.do_something").click(function() {
   var urltopost = "/foo";

   $.post(urltopost);
   return false;
});

The ActionResult is intended to then do something, like so:

    [AcceptVerbs(HttpVerbs.Post)]
    public ActionResult foo()
    {
        //do something here

        TempData["Success"] = "You have successfully done something";
        return RedirectToAction("Index", "Home");
    }

What I want to have happen is that when the user clicks the link, the ActionResult does its thing, and then redirects the user to another view, displaying the TempData message letting them know that everything worked correctly.

Everything works fine, except for the redirect part. When the link is clicked, the ActionResult is called, and it does what it is supposed to do, but the view is not redirected.

The question is, how can I redirect the user to the desired view when something happens in the ActionResult? Is it better practice to redirect from jQuery (if so, how can that be done)?

Best Solution

Your javascript just calls the controller action but it doesn't do anything with the returned value (in this case, the html from the view it redirects to).

You should create a callback function and replace the current html with the returned html from the javascript $.post() call.

As an example, here's some code of mine which posts a form to a controller action which returns a partial view:

            var f = $("#FilterProfile");
            var action = f.attr("action");
            var serializedForm = f.serialize();
            $.post(action,
                serializedForm,
                function(data) {
                    $("tbody").html(data);
                });

Your code should be something like this:

                    $.post("/foo",
                      function(data) {
                          $("html").replaceWith(data);
                      });

I did not test it but you should get the picture. If you have firebug installed on your FF browser, you could see what the $.post() method returns.

If you want to do a "real" redirect and enable the user to use his back button, you could also make the $.post() return the URL of the view to redirect to, and then use location.href = data; to do the redirect.