48

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?

3
  • 2
    Why "no javascript"? I'd use Flash or Silverlight instead :) Nov 24, 2008 at 22:16
  • 3
    I hope your boss is not your boss anymore... because of what he said... ;)
    – NoWar
    Dec 17, 2013 at 17:45
  • Ask him why "no Javascript".
    – Pradip
    May 6, 2019 at 9:21

8 Answers 8

46

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.

10
  • 10
    Just to add something more,,, you can place each step of the wizard in a Partial view, and do a Render.Partial on each DIV. Nov 10, 2009 at 19:42
  • 9
    There is a problem with using a single view and javascript to hide/show like you mention - your page is going to get absolutely huge as the wizard grows. Sure, a wizard with 2-3 steps might be okay, but more than that and you are just asking for trouble. Mar 9, 2010 at 21:19
  • 3
    @charles What number becomes worse than prematurely optimizing?
    – user1228
    Mar 10, 2010 at 11:19
  • 4
    @charles You were saying that more than 3 steps is going to cause the page to get "absolutely huge". So, your concern is that the page will grow large, slowing down requests. In other words, before you actually know that you need to you're trying to optimize response times. Its as simple as that, really. Not trying to incite, just responding to your concerns. They are valid, of course, but only if your wizard page is causing an issue. Or were you just trying to "incite something" by saying more than 3 steps = trouble?
    – user1228
    Mar 10, 2010 at 14:50
  • 3
    And don't forget, that data, saved in Session can be lost anytime when .NET decides that memory is not enough.
    – denis_n
    Apr 10, 2011 at 21:34
20

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.

3
  • 1
    I would do this but just use TempData. Yah it is stored in Session too, but no need to manage it since it gets removed for you.
    – anonymous
    Nov 18, 2008 at 18:58
  • 5
    For a wizard, you want the information across several pages, so you don't want it removed until you submit. Keeping it in session allows you to travel forward, backwards or restart and keep the data that has allready been entered.
    – Matthew
    Dec 4, 2008 at 3:50
  • What happens if the user suddenly decides to navigate to a different area of the application? The session information should be cleared everytime the user decides to go elsewhere.
    – Mukus
    Mar 18, 2014 at 0:57
12

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.

4
  • 2
    To improve security you should hash the primary key, otherwise a hacker could take someone else's object
    – jao
    Jan 30, 2010 at 14:47
  • You don't need nulls if each step has its own table in the database. Jun 12, 2013 at 17:45
  • What if the user choose to cancel, or the wizard is aborted in some other way? Then you will end up with incomplete garbage entries in the database.
    – awe
    Sep 13, 2013 at 6:40
  • Cancelling can allow the system to clear data. But if the user clicks on a different link in the application, that needs to call the clear method too. So you then want to make the user follow a strict workflow or your application starts to break.
    – Mukus
    Mar 18, 2014 at 0:59
4

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.

3

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.

13
  • The problem with this solution is the amount of data you end up storing in your hidden input field, which increases the size of both the HTTP request and its respective response. Both of these are going to affect the performance of your site for the user and other users as well (since it will affect your bandwidth). The latter may be negligible, depending on how often the wizard is being accessed, but it could cause a problem. If you are going to serialize the data, you are better to store it in a DB table temporarily or the session. Mar 9, 2010 at 21:24
  • @charles, if you expect so huge traffic in the wizard, then the session object will overfill much faster than you will get performance issues with serializing/deserializing of the previous steps (or even bandwith issues) Solution above is definitely more scalable and safer(performance-wise). Remember that we are talking about asp.net mvc, so I'm 99% sure that the session is not distributed, or at least on the state server.. Beware of the microoptimalizations on the wrong place..
    – jhexp
    May 20, 2010 at 10:38
  • @jhexp, I have no idea how you can say that using a hidden input field is more scalable and safer for performance than using a temporary database table. There is absolutely no way you are going to get better performance passing a huge string back and forth on every request than you would get by pulling it out of the database each time. Oh, and as for session, why do you think that the session is not distributed? That's totally up to the implementer, MVC has no restriction on that. May 20, 2010 at 15:17
  • @charles You want to tell us that full database query per each step is faster and more scalable than having a hidden field in the form?? And I don't say that MVC restricts implementation of distributed sessions, but its a very very rare case. Many highly loaded apps are stateless on the server anyway.
    – jhexp
    May 21, 2010 at 11:27
  • @jhexp you obviously have no idea how slow an HTTP request is in comparison to a simple database call. Adding to the size of that request and response is definitely slower than a single database call. And that's with a high-speed connection, don't even get started on dial up (yes, people still DO use dial up). May 21, 2010 at 13:14
2

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

0
1

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.

3
  • Is there a code sample? Your controller is all in a class, no way to see the code.
    – Rob Koch
    Nov 22, 2011 at 15:02
  • @rob there is the example project on NuGet, and if you want I can give you the source code of the example. Nov 25, 2011 at 15:48
  • That'd be awesome, you may contact me via my website.
    – Rob Koch
    Nov 28, 2011 at 19:26
1

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.