User Experience #4: The Back Button

Don't break the back button.  Nobody likes this...



I've been making websites with ASP.NET Web Forms since it came out in 2001.  The problem is that many of the built-in controls work off of Postbacks and Viewstate.  So what?  Well, a postback is where a form POST  is used on a page to send data back to itself.  The trouble is that if you then refresh the page after the post occurs, you'll see the ugly message above.

So one of the worst examples of this is the DataPager control.  The DataPager control will allow you to create pages for your data like this...

1  2  3  4  5

Now with the default behavior of the DataPager, every link above will result in a postback.  This means that if you hit the back button and then hit refresh you'll see the ugly message above again.  It also means that every "page" will have the same URL, so this approach is lousy for SEO purposes.

You can of course avoid all of these problems by avoiding certain controls in ASP.NET Web Forms and writing custom code where necessary.  But these types of mistakes can be made with other languages and web frameworks too.

So what should you do?  Well, there are two approaches:

1. Use a form GET instead.  When your form sends data with a GET, then everything is passed by querystring and you'll never run into the problem above.  The drawback here is that since everything is in the querystring this is not secure.  So it's a good approach for search engines, data pagers (as above), etc.  But it's a bad approach if your form is used to change data, log in with a password, checkout with a credit card, etc.  The GET also has a limit when it comes to length.  It's going to depend on the browser, but as a rule, don't expect it to handle anything over 2,000 characters long reliably.

2. Use a form POST followed by a redirect.  So in the examples I mentioned above where a GET is a bad approach, this is what you'll need.  After the form POST, redirect the user to a different URL with a 302, or better, a 303 redirect.  This will allow the user to flow between pages with the back, forward, and refresh buttons, and they'll never see the ugly "form resubmission" message.