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" />
paket add Nubgrammer.Wizard.MVC --version 1.0.0
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
Dependencies
-
.NETFramework 4.5
- bootstrap (>= 3.3.7)
- jQuery (>= 3.3.1)
- jQuery.Validation (>= 1.17.0)
Used By
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 |