Question

I have an asp.net mvc3 site that is showing some odd behavior when clicking the back button. I have a form with a text input, the value is set to a property on my Model, like this:

@using (Html.BeginForm("Search", "Home", FormMethod.Get, new { name = "searchForm" }))
{
    <div>
        <input id="term" type="text" name="Term" value='@Model.Term' />
        <input type="submit" value="Search" />
    </div>
}

Everything works great, except when using the back button in the browser. If I enter “ABC” then submit my form, enter “XYZ” and submit again, then go back I am still seeing “XYZ” in the text field, but when I inspect the html using the browser developer tools it’s showing the correct value of “ABC” (correct value is also in the query string).

I also have another place on the page where I’m dislaying the same @Model.Term value, but in that place it’s being displayed correctly as “ABC”.

Any ideas? I feel like it has to be something stupid that I’m doing but I can’t figure it out 🙂

Answer 1

The browser is likely showing what it last saw as your input to the form, as opposed to what the HTML contains. It doesn’t know the relationship between the two places where the text is shown, it just knows the user typed ‘Bob’ into one of them (so it shows it).

One option might be to save a cookie (server side) when a form submit is done. Then use the technique shown here to trigger some javascript when back is clicked. In that javascript, detect if the cookie is there and if it is force a full page refresh (equivalent of clicking F5).

Note I am not saying this is a good idea (I think its a horrible idea), but it may do what you are expecting (as opposed to what your user’s expect – which is what is happening now).

Another (far better) option is to ensure that every POST does a redirect straight after to a GET. That way when you do a Back click it goes back to the results of the GET (which will likely align with your expectations).

---