how to make a wizard with ASP.Net MVC

+3 A:

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.

Joel Martinez 2008-11-17 22:28:37

+18 A:

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.

Will 2008-11-17 22:29:24

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.

hminaya 2009-11-10 19:42:05

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.

Charles Boyung 2010-03-09 21:19:30

@charles What number becomes worse than prematurely optimizing?

Will 2010-03-10 11:19:17

@Will There is no set number, and I don't know that what you are implying here is accurate either. "Prematurely optimizing"? You're trying to incite something by saying that. It's not like we're talking about some huge amount of work, just storing this serialized object on the server, instead of passing it back and forth for every single page request.

Charles Boyung 2010-03-10 14:08:26

@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?

Will 2010-03-10 14:50:58

+11 A:

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.

Matthew 2008-11-18 17:05:22

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.

eyston 2008-11-18 18:58:32

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 2008-12-04 03:50:46

+2 A:

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.

rodbv 2008-11-24 22:13:40

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.

Charles Boyung 2010-03-09 21:24:52

@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 2010-05-20 10:38:59

@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.

Charles Boyung 2010-05-20 15:17:34

@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 2010-05-21 11:27:50

@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).

Charles Boyung 2010-05-21 13:14:41

You are right, but its a wrong measure.. More important is the resource utilization, not if the browser downloads the response few ms faster. Lets say you will have three steps wizard, each step will add 5kb to the serialized string(which is really enough for a single page form), you transfered back and forward 30kb more in total in all three steps. As opposed to three inserts and one select to the db.

jhexp 2010-05-21 15:13:16

+3 A:

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.

Ben Mills 2009-02-03 19:49:41

To improve security you should hash the primary key, otherwise a hacker could take someone else's object

jao 2010-01-30 14:47:06

Great idea jao.

Ben Mills 2010-02-05 20:18:27

+3 A:

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

2009-09-22 20:03:44

+2 A:

There is an answer - 4 step wizard, it's on Russian. But is you will read only code, you will understand how to do it.

There also download link with source code at bottom of that post, named: MvcWizard1.rar.

Boris 2009-10-01 15:38:16

ansaurus

tags:

views:

answers:

how to make a wizard with ASP.Net MVC

related questions