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!