SuperAPI AI Directory
Partner中文AI newsFavorites
Skillssyncfusion-aspnetcore-stepper

syncfusion-aspnetcore-stepper

General & other

View repository

Updated 10-16 05:01

About this skill

Implementing ASP.NET Core Stepper Control

The Syncfusion ASP.NET Core Stepper is a navigation component that guides users through a series of logical steps in a sequential workflow. Use it for wizards, multi-step forms, checkout processes, and any experience requiring step-by-step progression.

When to Use This Skill

  • Multi-step forms or wizards - Guide users through sequential data collection
  • Checkout flows - Show shopping cart → shipping → payment → confirmation
  • Progress tracking - Display task or process completion status
  • Linear workflows - Enforce sequential step progression (e.g., registration, onboarding)
  • Status visualization - Show which steps are completed, in-progress, or pending
  • Step validation - Display validation state (success/error) for each step

Control Overview

Key Capabilities:

  • Sequential step navigation with automatic or manual progression
  • Multiple step display types (default with indicators + labels, label-only, indicator-only)
  • Horizontal and vertical orientations for different layouts
  • Step status management (NotStarted, InProgress, Completed)
  • Step validation with success/error indicators
  • Linear mode for enforcing sequential progression
  • Rich templating for custom step content
  • Events for step changes, validation, and interactions
  • Tooltips with custom templates for additional guidance
  • Animation effects for smooth transitions
  • Localization and RTL support

Installation and Setup

Read: references/getting-started.md

  • NuGet package installation
  • TagHelper registration in _ViewImports.cshtml
  • CDN and NPM resource includes
  • Basic project setup

Creating Your First Stepper

Quick Start Example - Basic horizontal stepper with 4 steps:

<ejs-stepper id="stepper" activeStep="0">
    <e-stepper-steps>
        <e-stepper-step iconCss="sf-icon-cart" label="Shopping Cart" text="Review items"></e-stepper-step>
        <e-stepper-step iconCss="sf-icon-transport" label="Shipping" text="Enter address"></e-stepper-step>
        <e-stepper-step iconCss="sf-icon-payment" label="Payment" text="Select payment"></e-stepper-step>
        <e-stepper-step iconCss="sf-icon-success" label="Confirmation" text="Order complete"></e-stepper-step>
    </e-stepper-steps>
</ejs-stepper>

Vertical stepper:

<ejs-stepper id="stepper" orientation="Vertical">
    <e-stepper-steps>
        <e-stepper-step iconCss="sf-icon-cart" label="Cart"></e-stepper-step>
        <e-stepper-step iconCss="sf-icon-transport" label="Shipping"></e-stepper-step>
        <e-stepper-step iconCss="sf-icon-payment" label="Payment"></e-stepper-step>
    </e-stepper-steps>
</ejs-stepper>

Stepper Properties

Complete reference: references/stepper-properties-reference.md

Key Stepper-Level Properties (15 total):

  • activeStep - Current step index (0-based)
  • animation - Step transition animation configuration
  • cssClass - CSS class for component styling
  • enablePersistence - Persist state across page reloads
  • enableRtl - Right-to-left layout support
  • labelPosition - Label placement (Top, Bottom, Start, End)
  • linear - Sequential-only progression mode
  • locale - Localization culture setting
  • orientation - Horizontal or Vertical layout
  • readOnly - Disable all interactions
  • showTooltip - Display tooltips on hover
  • stepType - Visual style (Default, Label, Indicator)
  • steps - Array of step definitions
  • template - Custom step content template
  • tooltipTemplate - Custom tooltip template

Step Properties

Complete reference: references/stepper-properties-reference.md

Step-Level Properties (8 total):

  • cssClass - CSS class for individual step
  • disabled - Disable specific step
  • iconCss - Icon CSS class
  • isValid - Validation state (true/false/null)
  • label - Step label text
  • optional - Mark step as optional
  • status - Step status (NotStarted, InProgress, Completed)
  • text - Step descriptive text

Animation Properties

Animation Configuration (3 properties):

  • enable - Enable/disable animation
  • duration - Animation duration in milliseconds
  • delay - Delay before animation starts

Example:

<ejs-stepper id="stepper">
    <e-stepper-animation enable="true" duration="1000" delay="500"></e-stepper-animation>
    <e-stepper-steps>
        <e-stepper-step label="Step 1"></e-stepper-step>
        <e-stepper-step label="Step 2"></e-stepper-step>
    </e-stepper-steps>
</ejs-stepper>

Stepper Methods

Complete reference: references/stepper-methods-reference.md

Available Methods (12 total):

  • nextStep() - Move to next step programmatically
  • previousStep() - Move to previous step
  • addEventListener(eventName, handler) - Add event listener
  • removeEventListener(eventName, handler) - Remove event listener
  • dataBind() - Apply pending property changes
  • refresh() - Re-render component
  • refreshProgressbar() - Update progress bar position
  • reset() - Reset to first step
  • getRootElement() - Get root DOM element
  • destroy() - Clean up component
  • appendTo(selector) - Append to target element

Events and Event Arguments

Complete reference: references/events-and-interactions.md

Available Events (5 total):

created

Fires after stepper rendering completes.

  • Args: Event object

stepChanged

Fires after active step successfully changes.

  • Args: activeStep, element, event, isInteracted, name

stepChanging

Fires before active step changes (allows cancellation for validation).

  • Args: activeStep, cancel, element, event, isInteracted

stepClick

Fires when user clicks a step.

  • Args: activeStep, previousStep, element, event, name

beforeStepRender

Fires before rendering each step (allows dynamic modifications).

  • Args: index, element, name

Step Types and Orientations

Read: references/step-types-and-styles.md

  • Default step type (icons + labels)
  • Label-only step type with label positioning (Top, Bottom, Start, End)
  • Indicator-only step type
  • Horizontal orientation (side-by-side steps)
  • Vertical orientation (stacked steps)
  • Visual appearance customization

Step Configuration

Read: references/steps-configuration.md

  • Defining step icons with iconCss property
  • Adding text content and labels to steps
  • Optional step indicator
  • Disabling steps to prevent interaction
  • Setting active step with activeStep property
  • Step status values (NotStarted, InProgress, Completed)
  • Applying CSS classes for custom styling
  • Step validation with isValid property

Events and Interactions

Read: references/events-and-interactions.md

  • Created event when stepper finishes rendering
  • stepChanged event after active step changes
  • stepChanging event before step change (validation point)
  • stepClick event when user clicks a step
  • beforeStepRender event for dynamic step modification
  • Linear navigation mode for sequential-only progression
  • Event pattern examples

Templates and Customization

Read: references/templates-and-customization.md

  • Custom step templates with step model context
  • Tooltip configuration and display
  • Tooltip templates for detailed step information
  • CSS class customization
  • CSS properties for styling
  • Theme and appearance customization
  • Animation effects with duration and delay

Advanced Features

Read: references/advanced-features.md

  • Animation configuration (enable, duration, delay)
  • Linear flow for sequential-only step progression
  • Localization and locale customization
  • RTL (right-to-left) layout support
  • Readonly mode to disable all interactions
  • Accessibility considerations
  • Performance optimization

Step Validation

Read: references/steps-validation.md

  • Step validation patterns (isValid property)
  • Form validation with stepChanging event
  • Async validation patterns with fetch API
  • Real-time validation on user input
  • Validation state values (true/false/null)

Common Patterns

Wizard Pattern with Linear Navigation

For forms that require sequential step completion, enable linear mode:

<ejs-stepper id="wizard" linear="true">
    <e-stepper-steps>
        <e-stepper-step iconCss="sf-icon-cart" label="Cart"></e-stepper-step>
        <e-stepper-step iconCss="sf-icon-transport" label="Shipping"></e-stepper-step>
        <e-stepper-step iconCss="sf-icon-payment" label="Payment"></e-stepper-step>
    </e-stepper-steps>
</ejs-stepper>

Step Validation Pattern

Validate form content before allowing step progression using stepChanging event:

<ejs-stepper id="wizard" linear="true" stepChanging="validateStep">
    <e-stepper-steps>
        <e-stepper-step iconCss="sf-icon-cart" label="Cart"></e-stepper-step>
        <e-stepper-step iconCss="sf-icon-transport" label="Shipping"></e-stepper-step>
        <e-stepper-step iconCss="sf-icon-payment" label="Payment"></e-stepper-step>
    </e-stepper-steps>
</ejs-stepper>

<script>
function validateStep(args) {
    var form = document.getElementById('stepForm');
    if (!form.checkValidity()) {
        args.cancel = true;  // Prevent step change
        alert('Please complete all required fields');
    }
}
</script>

Dynamic Content Pattern

Load and display different content based on active step:

<ejs-stepper id="stepper" activeStep="@Model.CurrentStep" stepChanged="onStepChanged">
    <e-stepper-steps>
        <!-- Steps here -->
    </e-stepper-steps>
</ejs-stepper>

<div id="content">
    <!-- Content loads dynamically based on active step -->
</div>

<script>
function onStepChanged(args) {
    loadContentForStep(args.activeStep);
}

function loadContentForStep(stepIndex) {
    // Load content via AJAX or from pre-loaded data
}
</script>

Common Use Cases

  1. E-commerce checkout - Cart → Address → Payment → Confirmation
  2. User registration - Account info → Email verification → Profile → Complete
  3. Application wizard - Requirements → Configuration → Review → Deploy
  4. Onboarding flow - Welcome → Profile → Preferences → Start
  5. Task workflow - Analyze → Plan → Execute → Review
  6. Multi-form survey - Demographics → Questions part 1 → Questions part 2 → Summary