Wizard

JQuery Wizard Plugin

This is going to be the project page for a jQuery plugin I’m working on.  It’s called Wizard.  Yea, so original, I know.

Designed to work specifically with Bootstrap, jQuery, and ASP.NET MVC, you can easily create a wizard-like experience that is submitted to your controller as a single view model that you can slice and dice any way you wish.

Demo

Since WordPress doesn’t do so hot with hosted ASP.NET apps, here’s a better demo:

And here’s the Github: https://github.com/vtsells/Wizard

You’ll find a full solution in there that shows how it’s all supposed to work together.  In short, the form is just a container for your input elements.  Each fieldset represents a step in the wizard.  The plugin will load different sets of input fields into each step by calling action methods in your controllers and then ajax-ing them into the proper place.  You’ll need partial views for each step that contain nothing but formatting and your input/select/validation markup.  Finally, the form will be submitted to a single action which can slice and dice the form data as desired.

Basic Setup

Put something like this where you want the form to be:

@using (Html.BeginForm("AddNewUser", "Home", FormMethod.Post, new { @class = "wizard-form"})) 
{  
    @Html.AntiForgeryToken(); 
    @Html.ValidationSummary(true, "", new { @class = "text-danger" }) 
    <div class="wizard-form-nav btn-group btn-group-justified"> 
    </div> 
    <div class="wizard-form-pages"> 
        <fieldset name="Create User" data-url="@Url.Action("UserWizard", "MUsers")"></fieldset> 
        <fieldset name="Add Applications" data-url="@Url.Action("ApplicationWizard", "MApplications")"></fieldset> 
        <fieldset name="Add Addresses" data-url="@Url.Action("AddressWizard", "MAddresses")"></fieldset> 
    </div> 
    <div class="wizard-form-controls btn-group btn-group-justified"> 
    </div> 
}

Then Initialize the form with:

<script> 
    $(document).ready(function () { 
        $(".wizard-form").Wizard({ 
            size: 500,  
            onSubmit: function (e, form) { 
                alert(form.serialize()); 
                //e.preventDefault(); 
                //alert("I was submitted"); 
            } 
        }); 
    }); 
</script>

I’m currently working on the nuget package and proper documentation.

Let me know what you think!