Inconsistency with window.history.back()

Question

I have the following code in an MVC view that I'm using to test window.history.back()

If the user clicks the link (highlighted in red) within the paragraph tag, window.history.back() executes as I would expect. It takes me back to the prior page with state maintained on that page. However, if the user clicks the button, I don't get the same behavior. The current view is reloaded, or at least an attempt is made to reload the current page. But it fails. And it doesn't matter if the jQuery is executed, or I put the window.history.back() call within the Button onClick, the same thing happens.

A piece of information which might be helpful. The button is inside an HTML.BeginForm and the line in the paragraph tag is not.

Anyone know why this is happening?

Answer 1

The browser is probably interpreting the button as a submit button and submitting the form, thus causing a page refresh. Adding type="button" will prevent that.

<button type="button">Cancel</button>

Answer 2

$('#cancelButton').click(function(e){
    e.preventDefault();

    /* ... code ... */
});