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.

Answer 1

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.

Answer 2

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.

Answer 3

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.