ASP.NET MVC multistep wizard
The ASP.Net MVC multistep wizard is used to split the sequence of related actions as multiple parts based on the form contents such as train ticket booking or registration forms. The ASP.NET MVC tab based multistep wizard organize the information more efficiently. This quick start helps you to create a multistep wizard using the ASP.NET MVC Tabs control.
Creating the multistep wizard using tab
Step 1: Initialize the tab with the items collection as shown in the following example.
@Html.EJS().Tab("ej2Tab").HeightAdjustMode(HeightStyles.None).Height("390").Created("tabCreated").Items(ViewBag.headeritems).Render()
Step 2: Define tab items with contents as shown in the following example.
<div id="Tab1"> // Tab 1 contents are going here </div> <div id="Tab2"> // Tab 2 contents are going here </div> <div id="Tab3"> // Tab 3 contents are going here </div> <div id="Tab4"> // Tab 4 contents are going here </div>
Step 3: Map the ID of the HTML content to tab items and disable all other tabs except the first tab at controller side as shown in the following example.
public ActionResult Index()
{
List<TabTabItem> headerItems = new List<TabTabItem>();
headerItems.Add(new TabTabItem { Header = new TabHeader { Text = "Tab 1" }, Content = "#Tab1" });
// Disable the property used to disable the tabs except tab 1 in initial time
headerItems.Add(new TabTabItem { Header = new TabHeader { Text = "Tab 2" }, Content = "#Tab2", Disabled = true });
headerItems.Add(new TabTabItem { Header = new TabHeader { Text = "Tab 3" }, Content = "#Tab3", Disabled = true });
headerItems.Add(new TabTabItem { Header = new TabHeader { Text = "Tab 4" }, Content = "#Tab4", Disabled = true });
ViewBag.headeritems = headerItems;
return View();
}
Step 4: Add the styles to the tab as shown in the following example.
<style>
.e-tab-section .e-tab .e-content.e-control {
overflow-x: hidden;
overflow-y: auto;
}
</style>
Step 5: Once the first action gets completed in wizard, the second action must be enabled using the enableTab method as shown in the following example.
function tabNavigations(args) {
switch (args.target.id) {
case "Action 1":
tabObj.enableTab(0, false);
tabObj.enableTab(1, true);
break;
case "Action 2":
// Implement action 2 code
break;
case "Action 3":
// Implement action 3 code
break;
case "Action 4":
// Implement action 4 code
break;
}
}
Documentation link: https://ej2.syncfusion.com/aspnetmvc/documentation/tab/how-to/create-wizard-using-tab/
Demo link: https://ej2.syncfusion.com/aspnetmvc/Tab/Wizard#/material
