How do I create an ASP.NET MVC wizard with back button support?

Question

I am creating an app with ASP.NET MVC and I have the need for a wizard style interface on one of my pages.

Here is what I'm doing so far:
I have created a page with 5 divs. All have "display: none" set in the css file. When the user hits the page for the first time, I use jquery to show the first step using:

$("#callStep1").show();

The first step has a select list and when the user makes a selection the following code is executed:

$("#callStep1").hide();
$("#callStep2").show();

This continues until the user gets to step 5 and clicks the submit button. Everything is working fine except if I'm on step 2, 3, 4, 5 and hit the back button, it takes me all the way back to the page I was on before when I really just want to go to the previous step.

How can I make this work? I've seen some examples using "#" and creating links on the page, but not sure if there is a better way.

Any suggestions?

Answer 1

If you don't absolutely need AJAX on the wizard page, it is possible to do this by returning different views after a successful form POST.

In the controller:

[AcceptVerbs(HttpVerbs.Get)]
public ActionResult DoSomethingLong(int somethingId, int step)
{
  MyModelType myModel = MyModelFactory.Fetch(somethingId);

  switch(step)
  {
    case 1:
      return View("Step1", myModel);
      break;
    case 2:
      return View("Step2", myModel);
      break;
  }
}

[AcceptVerbs(HttpVerbs.Post)]
public ActionResult DoSomethingLong(int somethingId, int step)
{
   MyModelType myModel = MyModelFactory.Fetch(somethingId);

   if (TryUpdateModel(myModel))
   {
       //Successful update.  Send to next step.
       return RedirectToAction("DoSomethingLong", new {somethingId = somethingId, step = step + 1}
   }
   else
   {
       //Update failed, redisplay current View with validation errors.
       return View(myModel);
   }
}

Answer 2

Implement Ajax driven links in a completely unobtrusive and accessible manner (also known as Hijax) with support for the browser's back/forward navigation buttons and bookmarking. Enhance comparable DHTML driven links as well.

http://www.stilbuero.de/jquery/history/#Chapter_3

Hijax (wikipedia)