Create Wizard steps in MVC and Razor

Question

I would like to build one MVC application to create the account of a user using more then one wizard steps. Do I need to go with one view page and hide or display a div by client side logic or do I need to create different view for each wizard (using partial views)?

What is the best option here? I need to maintain state data between wizard steps so the user can move back or next and on last step he or she can save it to the database.

score 19 · Accepted Answer · edited May 23 '17 at 11:44

19

There are different possibilities. You could use a pure client side solution by showing/hiding sections or a full server side solution. It's up to you to decide which one is best for your particular scenario. Here's an example you might take a look at if you decide to go the server side approach.

edited May 23 '17 at 11:44

Community

1
1

answered Jan 19 '12 at 09:32

Darin Dimitrov

1,023,142
271
3,287
2,928

8

Darin's link to an example that he provided in an answer was very instrumental in helping me to set up wizards in MVC. – REMESQ Feb 16 '12 at 04:29
2

@REMESQ - such a long way to say 'Thanks, That helped'. – Rafael Herscovici Aug 11 '15 at 12:22

jgauffin · Answer 2 · 2012-01-19T09:54:56.387

Depends on if you allow javascript or not.

If you allow javascript, use jQuery to show/hide divs.

I just made the following wizard script. It supports multiple wizards on the same page, as long as you follow the class/div syntax below.

<div class="wizard">
    <div class="step active">
        some information
    </div>
    <div class="step" style="display:none">
        Step 2 info
    </div>
    <div class="step" style="display:none">
        Step 3 info
    </div>

    <input type="button" class="prev" style="display: none" value="Previous" />
    <input type="button" class="next"  value="Next" />
</div>



<script type="text/javascript">
$(function() {
    $('.wizard .prev').click(function() {
        var wizard = $(this).parent('.wizard');

        $('.step.active', wizard).hide();

        var currentStep = $('.step.active', wizard);
        currentStep.hide();
        currentStep.removeClass('active');

        var newStep = currentStep.prev('.step', wizard);
        newStep.addClass('active');
        newStep.show();

        if ($('.step:first', wizard)[0] == newStep[0]) {
            $(this).hide();
        }

        $('.next', wizard).show();
    });

    $('.wizard .next').click(function() {
        var wizard = $(this).parent('.wizard');

        $('.step.active', wizard).hide();

        var currentStep = $('.step.active', wizard);
        currentStep.hide();
        currentStep.removeClass('active');

        var newStep = currentStep.next('.step', wizard);
        newStep.addClass('active');
        newStep.show();

        if ($('.step:last', wizard)[0] == newStep[0]) {
            $(this).hide();
        }

        $('.prev', wizard).show();
    });
});
</script>

Without javascript:

Create a view model which contains information for all steps and share it between all wizard step views. This allows you to keep all state between the different POSTs.

your code workes fine but how to validate each form? – kirtan Dec 14 '16 at 06:22 — kirtan, Dec 14 '16 at 06:22

score 1 · Answer 3 · answered Jan 19 '12 at 09:49

1

I'm doing something similar at the moment. I'm collecting a large set of data over several steps and allowing the users to save the data at any point.

I've basically split it up into multiple views and created ViewModels for each view with the relevant info for that wizard step. Seems to be working reasonably well for my purposes.

answered Jan 19 '12 at 09:49

slapthelownote

4,249
1
23
27

1

can you please provide some example – Arun Rana Jan 19 '12 at 11:34
It might be easier if you let me know if there is there something in particular you are struggling with? – slapthelownote Jan 21 '12 at 09:31

Create Wizard steps in MVC and Razor

3 Answers3

Linked