ASP.NET Core Wizard Overview
The Wizard is part of Telerik UI for ASP.NET Core, a
professional grade UI library with 110+ components for building modern and feature-rich applications. To try it out sign up for a free 30-day trial.
The Telerik UI Wizard TagHelper and HtmlHelper for ASP.NET Core are server-side wrappers for the Kendo UI Wizard widget.
The Wizard displays content in sequential, stepwise order. Each step of the Wizard component has content, which can be a Form or any other type of HTML content. The progress indicator shows the user the number of steps left toward the last step of the process.
Initializing the Wizard
The following example demonstrates how to define the Wizard.
@(Html.Kendo().Wizard()
.Name("wizard")
.Steps(s=> {
s.Add().Content("Initial Step");
s.Add().Content("Second Step");
s.Add().Content("Final Step");
})
)
<script>
$(function() {
// The Name() of the Wizard is used to get its client-side instance.
var wizard = $("#wizard").data("kendoWizard");
});
</script>
<kendo-wizard name="wizard">
<wizard-steps>
<wizard-step title="Initial step">
<wizard-step-content>
<h1>Initial step content</h1>
</wizard-step-content>
</wizard-step>
<wizard-step title="Second step">
<wizard-step-content>
<h1>Second step content</h1>
</wizard-step-content>
</wizard-step>
<wizard-step title="Final step">
<wizard-step-content>
<h1>Final step content</h1>
</wizard-step-content>
</wizard-step>
</wizard-steps>
</kendo-wizard>
Functionality and Features
- Form Integration—You can integrate the Form component inside a specified Wizard step.
- Content—The Wizard enables you to render static and asynchronous content.
- Layout—You can control the layout of the Wizard based on your preferences.
- Events—Subscribe to the Wizard events to implement any custom logic.
- Accessibility—The Wizard is accessible for screen readers, supports WAI-ARIA attributes, and delivers keyboard shortcuts for faster navigation.
Next Steps
- Getting Started with the Wizard
Basic Usage of the Wizard HtmlHelper for ASP.NET Core (Demo)
- Wizard in Razor Pages