MVC.Wizard

MVC Wizard Readme

Use these steps below to create your wizard or download the NuGet sample package: MVC.Wizard.Sample

• Add a MVC Controller to your project and let it inherit from "MVC.Wizard.Controllers.WizardController"
• Add a ViewModel to your project and inherit it from "MVC.Wizard.ViewModels.WizardViewModel"
• Add for each step in your wizard a class and add a public property (with the name Step1, Step2, Step3 etc.) to your ViewModel to expose the step properties. In this way, each step has it's own validation. Create in the constructor of your viewmodel a new instance of each step.
• Create an MVC Action in your controller and construct a new instance of your ViewModel. Send this viewmodel to your view.
• Create a view for your action
• Add a form element with an id attribute
• Add a div with an id attribute. Place inside the div an ul and multiple li elements inside for each step.
• Use this code for the buttons to navigate. You can change the text or add css classes for the buttons if you like.

• Create textboxes for each property in the right step in the right li of your lu as your normally would do in MVC. Also add a knockoutjs binding to this textbox.

Sample with Step1 as property in your inherited WizardViewModel and InitialWizardValue as a string property inside your Step1 class:

@Html.LabelFor(model => model.Step1.InitialWizardValue, new { @class = "control-label col-md-2" })

@Html.TextBoxFor(model => model.Step1.InitialWizardValue, new { data_bind = "value: Model.Step1.InitialWizardValue" }) @Html.ValidationMessageFor(model => model.Step1.InitialWizardValue)

• Construct the wizard on document ready: WizardContainer: The id of the div container around the ul. YourUniqueWizardForm: The id of the form for posting your wizard to the server.

• Add a validation summary for general messages by placing a div inside your "#WizardContainer". General messages are messages that are not for a specific property. This is the same as an ModelState error that has an empty MemberName in MVC. It is possible to place multiple summaries on the page as long they are in the wizard container. You can throw a custom error message in the ProcessToNext method in your MVC controller by throwing a System.ComponentModel.DataAnnotations.ValidationException.