How do I create a MVC 'Wizard' similar in functionality to Webforms Wizards?

Question

I'd like to create a wizard in ASP.NET MVC similar to the wizard control functionality found in ASP.NET webforms.

What is the best way to do this?

Answer 1

With ASP.NET MVC I would suggest using javascript/jquery to create a wizard in a web page; something like

<script type="text/javascript">
    $().ready(InitializeWizard);
    function InitializeWizard() {
        $(".step").hide();
        $("#step1").show();
    }
    function Step1OK() {
        $("#step1").hide();
        $("#step2").show();
    }
    function Step2OK() {
        $("#step2").hide();
        $("#stepComplete").show();
    }
</script>

<div id="step1" class="step">
    Step 1
    <input type="button" onclick="Step1OK();" value="OK" />
</div>
<div id="step2" class="step">
    Step 2
    <input type="button" onclick="Step2OK();" value="OK" />
</div>
<div id="stepComplete" class="step">
    Complete
</div>

NB! Remember, in the top of the document, to load jquery, e.g. by referencing the google link:

<script src="http://www.google.com/jsapi"></script>
<script>
    google.load("jquery", "1.3.2");
</script>

Answer 2

Try this one.

It uses jQuery and contains a sample project.

Answer 3

There is no simple way to use a wizard control in ASP.NET MVC. Because ASP.NET MVC is not Web forms, so you should stop thinking webformy and start thinking the MVC way. A better thing to do would be to leverage jQuery and partials (Partial Views) to come up with a nice user experience which walks the user through some predefined steps.

Answer 4

ASP.NET MVC itself is a stateless design pattern meaning between requests there is no form of state. If you would like to hold some sort of state you would have to use some sort of persistant mechanism like a cookie, querystring (blah?page=2), session or maybe even in the database.

Answer 5

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.