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

Question

I am building an application with ASP.NET MVC, and I have a need for a wizard style interface on one of my pages.

Here is what I am doing so far:
I created a page with 5 div. Everyone has "display: none" installed in the css file. When the user first hits the page, I use jquery to show the first step using:

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

At the first stage there is a selection list, and when the user makes a choice, the following code is executed:

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

This continues until the user proceeds to step 5 and clicks the submit button. Everything works fine, except when I am in step 2, 3, 4, 5 and click on the "Back" button, it returns me completely back to the page I was on before, when I just want to go to the previous step.

How can I do this job? I saw 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 need AJAX on the wizard page, you can do this by returning various views after a successful POST form.

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

, Ajax, ( ) / . DHTML- .

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

Hijax (wikipedia)