Redirect user to a page using JavaScript/jQuery on button click in ASP.net MVC 5 application

Question

I want the user to get redirected to a different page as soon as form is submitted. I don't care about what happens when the controller action httpost gets called. I just want the user to get redirected a page as soon as a button is clicked or form is submitted. below is what I have tried but its not working

cshtml file snippet

<script>
    $(document).ready(function () {
        $('#formSubmitButton').click(function () {
            debugger;
            // Neither works
             window.location.href = "/Home/Index"; 
            window.location.href = "https://www.google.com";


        });
    });
</script>

Home Controller

   public ActionResult Index()
        {
            return View();
        }

Actual httpost controller method that gets hit

[HttpPost]
[ValidateAntiForgeryToken]
public ActionResult SavePayment(PaymentFormMV data)
{
    return View ("Hello")
}

I can see the breakpoint gets hit in the JavaScript code. But no effect. Also the normal post call goes on as expected and SavePayment method gets called and hence the view hello accordingly. Why I am not able to redirect user on the button click to index page. I know the SavePayment will get called eventually but why not the redirection is working. Am I missing something?

Edit

Here is the whole story. Clients are making payment and some payments are getting timed out. The "Hello" redirection is perfectly fine when the timeout had not happened. So basically if time out happens in 2 minutes. then I will put a timer for may be 1.58 minutes before redirecting user to home page. If the post method returns success then the "Hello.cshtml" will get called.

But just in case if IIS server is about to throw time out exception which is after 2 minutes then my JavaScript code will time out (1.58 set in timer) before IIS kicks out and will redirect the user to home page. And I hope that the IIS time out error which eventually will occur will not override the home page that user has been safely redirected. Please guide me. Bottom line I don't want the IIS to kick out the user. I have not added the timeout interval code in JavaScript code snippet because the normal redirection itself is not working.

Answer 1

Because, when you click the submit button, the form is submitted and the HttpPost action method will handle the posted formdata and return a ViewResult (The html markup generated from the "Hello" view) back. Since the form is being submitted, it will not execute the JS code where you are setting the window.location.href value.

You should do your redirection in your action method after successfully doing your save, like the PRG pattern:

[HttpPost]
[ValidateAntiForgeryToken]
public ActionResult SavePayment(PaymentFormMV data)
{
    //do something
    return RedirectToAction("Index","Home"); 
}

If you absolutely want to do the redirection using client side script, but want the form to be submitted and processed (like a fire-forget fashion), you might consider doing an ajax form post.

$('#formSubmitButton').click(function (e) {

   e.preventDefault();  // Prevent normal form submit

   var _form=$(this).closest("form");
   $.post(_form.attr("action"),_form.serialize(),function(res){
      // If you want to check the response and then do redirection
      // you should do it here. Make sure you return a json response from server then
   });
   window.location.href = "https://www.google.com";

});

Edit

As per the edit in question

Here is the whole story. Clients are making payment and some payments are getting timed out. The "Hello" redirection is perfectly fine when the timeout had not happened. So basically if time out happens in 2 minutes. then I will put a timer for may be 1.58 minutes before redirecting user to home page. If the post method returns success then the "Hello.cshtml" will get called. But just in case if IIS server is about to throw time out exception which is after 2 minutes then my JavaScript code will time out (1.58 set in timer) before IIS kicks out and will redirect the user to home page. And I hope that the IIS time out error which eventually will occur will not override the home page that user has been safely redirected. Bottom line I don't want the IIS to kick out the user. I have not added the timeout interval code in JavaScript code snippet because the normal redirection itself is not working

My initial response is, Do not do anything with takes 2 minutes on a user thread like this. That is not a good user experience. I am not sure where you are getting the 2 minute time out from! But I suggest you fix the code which takes this long time. You should offload this to may be an ajax call ( see above sample ajax code) and if you are not getting a 200 OK response (or your success callback), you may do something on client side (show a message to user so they can try again). This way you can eliminate the use of your local JavaScript timer.

Bottom line is: fix the code which takes 2+ minutes! There might be an alternate way to solve your problem/use cases.