Nubgrammer.Wizard.MVC 1.0.0

A jQuery plugin designed for use with ASP.NET and ajax-loaded pages.  This plugin supports dynamically-added input fields with jquery validation.

Install-Package Nubgrammer.Wizard.MVC -Version 1.0.0
dotnet add package Nubgrammer.Wizard.MVC --version 1.0.0
<PackageReference Include="Nubgrammer.Wizard.MVC" Version="1.0.0" />
For projects that support PackageReference, copy this XML node into the project file to reference the package.
paket add Nubgrammer.Wizard.MVC --version 1.0.0
The NuGet Team does not provide support for this client. Please contact its maintainers for support.

Wizard

Download the netWizardDemo solution to see how it all works together.
Proper documentation is on my long list of things to do, but this might get you started.

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>
} 

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>

For your form fields, simply create views that return the desired set of fields on each wizard page. Each fieldset represents a different step in the Wizard.

This plugin also supports dynamically added fields. Refer to the demo solution for guidance on this:
https://github.com/vtsells/Wizard/tree/master/netWizardDemo

Wizard

Download the netWizardDemo solution to see how it all works together.
Proper documentation is on my long list of things to do, but this might get you started.

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>
} 

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>

For your form fields, simply create views that return the desired set of fields on each wizard page. Each fieldset represents a different step in the Wizard.

This plugin also supports dynamically added fields. Refer to the demo solution for guidance on this:
https://github.com/vtsells/Wizard/tree/master/netWizardDemo

NuGet packages

This package is not used by any NuGet packages.

GitHub repositories

This package is not used by any popular GitHub repositories.

Version History

Version Downloads Last updated
1.0.0 423 3/2/2018