Telerik UI for ASP.NET Core Wizard Overview

The Telerik UI for ASP.NET Core Wizard lets you easily create multi-step processes and guide step-by-step users in applications.

In this demo, you can see the implementation of a simple registration process using the Wizard component, that requests user input in detail in three steps: Registration Info, Personal, and Payment Details. Breaking up a process into stages will simplify user input tasks so that they will need to manage just one form at a time. At each step, you have a pre-configured built-in validation of the input data and a progress indicator showing the number of steps left towards achieving their final goal for the process.

Key Features of Wizard component:

• Built-in Validation (If configured)
• Integration with the Form component
• Loading content using AJAX
• Configuring the position of the component's stepper

The Wizard component can be initialized both from a form and div DOM elements. By default, the Wizard is initialized from a div element.

To initialize the Wizard from a form element, the .Tag(“form”) configuration has to be used. If the Wizard is initialized with a Tag(“form”) configuration if the Wizard contains form definitions, the forms inside the component will be initialized from a div element. In this scenario, the ‘novalidate’ attribute should be added to the form element from which the Wizard is initialized. This can be implemented as follows:

@(Html.Kendo().Wizard()
.Name("wizard")
.Events(ev => ev.Done("onDone"))
.Tag("form")
.HtmlAttributes(new { @novalidate ="" })
.Steps(s =>
{
……………………
})

The ‘novalidate’ attribute is needed to prevent the duplication of the built-in form validation and the default browser validation. If a form inside the Wizard is not validated using the component’s configuration, there is no need to add the ‘novalidate’ attribute.

You can find additional information on how to use the UI for ASP.NET Core Wizard component in this section of the product documentation. here you can see the API provided by the component.

This Wizard example is part of unique collection of hundreds of ASP.NET Core demos, with which you can see all Telerik ASP.NET Core components and their features in action. View the source code of the demos from the library or directly adapt, and edit them and their theme appearance in Telerik REPL for ASP.NET Core or ThemeBuilder.