The Refresh Button and your ASP.Net Form

You have built a ASP.Net web-form which accepts data from the user, which then gets submitted for being appended to a database. But have you wondered what would happen if the user hits the dreaded “Refresh” button of the browser after submitting the web-page?

While tracking down a recent issue, I wondered about the same problem. So I created a set of test pages to check out the issue and figure out a fix.

http://www.aggregatedintelligence.com/Samples/PreventDuplicates/WithRefreshIssue.aspx

Fill in the 2 fields and hit the submit button. Now hit F5 (Refresh) and see what happens.

Every time, you hit the Refresh button, you will find that a new entry gets added to the text box below. This is because, when you hit the Submit button, the browser’s last action was to post the information from the page to the server. The posted data includes the information regarding the submit button event and as well as the information in the 2 fields. On the server, your page handles the button’s click event and adds an entry to the text-box. Now, every time you hit the refresh button on the browser, you are re-posting all the data (field values, button click event, etc.) to the web-page. The web-page does not know that the events it is handling are due to a “Refresh” issued by the browser and handles the events like normal, resulting in multiple entries being added to the text box. This is probably not the behavior you or your users expect from your web-page.

So how do you fix it?

The answer is very simple. Like I said before, the issue stems from the fact that when you press the Submit button, the browser posts data to your web-server and when you hit the “refresh” button, the data that was last sent by the browser gets re-posted to the web-server. All we need to do to fix the issue is to clear the headers in the page and this is extremely simple to do.

After you handle the Submit button’s event, redirect the page back to the same page using the following code:

Response.Redirect(this.Request.Url.ToString(), false);
return;

This will clear all the posted data from the page. When you hit the “Refresh” button, because there is no data to be posted, the button’s click event does not fire and you do not get duplicate items in your text box.

This technique is shown in the following page: http://www.aggregatedintelligence.com/Samples/PreventDuplicates/WithoutRefreshIssue.aspx

Why is all this important?

On pages where you accept user input, you need to know how to handle the case of the user hitting the “Refresh” button on the browser. Otherwise, you can end up with duplicate records.

I also show that the same technique can be used to fix pages which contain multiple buttons that submit data to the web-server. (Example with Multiple Submits)

And if you want to take a look at the code for the example, download it from the link below: