Question

I’m working on an ASP.NET MVC 4 app. This app requires a wizard within it. The wizard contains three screens. I need their URLs to map to:

/wizard/step-1
/wizard/step-2
/wizard/step-3

In my WizardController, I have the following actions:

public ActionResult Step1()
{
  var model = new Step1Model();
  return View("~/Views/Wizard/Step1.cshtml", model);
}

[HttpPost]
public ActionResult AddStep1(Step1Model previousModel)
{
  var model = new Step2Model();
  model.SomeValue = previousModel.SomeValue;

  return View("~/Views/Wizard/Step2.cshtml", model);
}

[HttpPost]
public ActionResult AddStep2(Step2Model previousModel)
{
  var model = new Step3Model();
  return View("~/Views/Wizard/Step3.cshtml", model);
}

While this approach works, my problem is that the browser URL doesn’t update. How do I post the values from a step and redirect the user to a new URL with a different data model?

Thank you!

Answer 1

In each of your wizard’s views where you call Html.BeginForm(), make sure you call an overload of it that accepts either the desired route, or desired controller, action, and other routing parameters. For example, in Step1.cshtml:

@using (Html.BeginForm("Step-2", "MyWizard")) {
    // put view stuff in here for step #1, which will post to step #2
}

That will make the target URL “pretty”, but it won’t fix the action names themselves being “ugly”. To fix that, there’s a feature in MVC that will “rename” an action method to almost anything you want:

[HttpPost]
[ActionName("step-2")] // this will make the effective name of this action be "step-2" instead of "AddStep1"
public ActionResult AddStep1(Step1Model previousModel)
{
    // code here
}

Assuming the app is using the default MVC route (controller/action/id), each step will have its own URL.