Question

i’m using asp.net mvc 2.0 and jqModal to setup a modal wizard.

i have a variable amount of pages based on initial widget type selected.

my initial effort to brainstorm is to use an enum like followed:

public enum WizardSetup
{
    Start,
    Page1,
    Page2,
    Finish
}

how would you page through the enum? again, there may or may not be a page 2 based on widget selected. So in the user interface there would be a back, next, and finish button to cycle through the pages.

i thought of user controls for the different pages and using jqModal’s ajax to load the different pages.

any thoughts on the best way and easiest way to do this paging stuff?

Answer 1

A few ways I can think of to skin multistep wizards:

1. Use some jquery etc to page through divs that exist on the page already. The ones that aren’t currently active are hidden. This is the most trivial but won’t degrade gracefully with no js. Also won’t work well for your dynamic tree of pages. On the plus side you don’t get the pain of trying to pass state between separate actions.

2. Use ajax forms for each step of the wizard with the next buttons being wired up to actions that generate the appropriate next step. Passing the view model between these actions is tricky. You either have to use hidden fields on the forms, or something like Html.Serialize() in MVC Futures to pass the whole view model object (probably better unless its only a few fields). Also you will run into problems with validation if you are using that and have the actions receive the view model object at each step as it will try to validate fields that haven’t been set at the step of the wizard you are in. This can be worked around with an ActionFilter to remove errors for fields that aren’t relevant at the step you are on. The nice thing about this approach is that it works without js turned on if you use a decent ajax library (even ms unobtrusive ajax).

3. Create something hand crafted using json payloads back and forth to the server. Will be a lot of effort as you’ll be building the forms client side using js.

4. Similar to 2, but store the state in a session variable (scale probs with multi server) or in a db etc. Saves having to marshall it back and forth to the browser each time.

Of course if you don’t need to pass state between the wizard steps it’s a lot easier.

There is quite a good work through of 2) in the Pro Asp.Net MVC2 book by Steve Sanderson although its a little dated now and it uses an action filter which isn’t needed with the way Html.Serialize works in mvc3 Futures (can deserialise into param of action method).

Unfortunately, multistep wizards are a bit of a pain as they are intrinsically stateful which is pretty much the opposite goal to which web technology aspires.