how to make a wizard with ASP.Net MVC

Our site has multiple "wizards" where various data is collected over several pages, and cannot be committed to the database until the last step.

What is the best/correct way to make a wizard like this with ASP.Net MVC

edit: My boss is now saying "no javascript" - any thoughts on how to get around that restriction?

Answers


I don't believe there is a best/correct way, but the way I'd do it is...

Each wizard gets its own page. Each step gets its own div. All steps are in the same form.

The previous/next buttons would essentially hide/show the div in each step of the process. The last step's submit button submits the entire form. It would be pretty trivial to implement this using jQuery, and it would be easy to maintain as all the wizard steps are in a single ViewPage.

On the controller side, you'd have two controller methods, the HttpVerbs.Get version that would prepare the form for viewing and the HttpVerbs.Post version that would take a FormsResult and parse it to get out the information required to submit the user's answers to storage/other processes.


Wow, your boss stinks.

This answer almost gracefully works for those ****** who have javascript disabled (yes, both of them). You can tweak it to hide the next-previous buttons via CSS and unhide them in your javascript code. This way people with javascript see the wizard and people without javascript will see the entire form (without next/prev buttons).

The other option is to create a view for each step in the wizard. You can store the intermediate results of the form in the Session. This way would cost plenty of time and effort to implement, which means you could probably squeeze some overtime out of your boss when you demonstrate, in about twenty minutes of effort you spend during lunch, how easy the javascript route is to implement.


If you can't use JavaScript, then make each step a view, with a method in the controller, and keep your data in session until ready to submit to the database.

You can make your Next and Prev buttons using the ActionLink HtmlHelper method.


Another way is to save the incomplete object that you are building with the wizard to the database and just pass the primary key to the next step of the wizard. I know that this means you need to make some of the database fields nullable, but it does have the added advantage that you can save the primary key in a cookie and allow the user to come back to the wizard at some later time. This option doesn't require javascript or session state.


Make the different panels all be client side ... all in the same form ... and when the final submit button is pressed, you can post all of the values at the same time.


If you can't use Javascript and don't want to spend server resources with Session variables, you can also serialize and deserialize the values being entered in the different steps, and pass it back and forth using a hidden input field. A bit like ViewState in ASP.NET Webforms.


I put together a login wizard and documented the ideas behind it on my blog if that helps: link text


You can use the simple component MVCWizard.Wizard available on NuGet. The WizardController allows you to create a wizard using partial view. There is also the AutoWizardController that renders the entire wizard in a single view. All these components operate with the session to store the model state.


There is a very simple, flexible and extensible method in this question: How to simplify my statefull interlaced modal dialogs in ASP.NET MVC


Need Your Help

Empty function in BASH

bash ubuntu mint

I'm using FPM tool to create .deb package. This tool create before/after remove package from supported files.

Overwrite or override

terminology override overwrite

It might seem to be a stupid question but I'm just so curious and want to use the correct term when talking about the issue. Couldn't find a similar question here so I decided to create a new one.