Navigate to Url or Url.Action in Javascript

Question

This may have already been answered somewhere but I cannot find any information that makes sense to me.

I have a Cancel button in my cshtml that contains a href='@Url.Action("Index"). It looks like this:

<a href='@Url.Action("Index")' class="linkbutton" id="btnCancel" title="Return to Home Page">Cancel</a>

Now, if changes have been made, I need to confirm whether to leave the page or save changes before leaving.

So, I've added an event on the button click to present a popup to confirm to continue or save. Of course, leaving the button code in the cshtml file as it is, acts exactly as one would expect. It's a link and my event never fires.

I changed the cshtml button to the following code:

<input type="button" class="navigationButtons" id="btnCancel" value="Cancel" title="Return to Home Page" />

Now, my event gets fired and I display my popup to confirm continue or save. The save works great because it's another method that performs a save to the db. I can't make the Confirm button into a link button, because it is used in another place in the code that just continues without leaving the page.

I have found answers for window.location, $.get and $.ajax. But I cannot figure out how to put into the JavaScript code that will go to my Index page.

PLEASE! Does anyone know how to do this and help me understand what I obviously do not know. :-(

Answer 1

Provided that your JavaScript is included in your .cshtml file, you can write Razor code inside your script:

window.location.replace('@Url.Action("Index")');

If you're having trouble with that, you could try creating a hidden link on your page and having your JavaScript trigger a click:

<a id="my-hidden-url" href="@Url.Action("Index")" hidden></a>

<script>
    $('#my-hidden-url').trigger('click');
</script>