Syncfusion.AspNetMvc.Inputs 34.1.30

Syncfusion® ASP.NET MVC Inputs Components

A comprehensive suite of ASP.NET MVC input and form components for building modern interactive user interfaces. Includes TextBox, TextArea, MaskedTextBox, NumericTextBox, ColorPicker, Uploader, Slider, Signature, Rating, OTP Input, and Speech-to-Text components.

Supported Components

This package includes the following components:

• TextBox
• TextArea
• MaskedTextBox
• NumericTextBox
• ColorPicker
• Uploader
• Slider
• Signature
• Rating
• OTP Input
• Speech to Text

ASP.NET MVC TextBox Component

The ASP.NET MVC TextBox Component is a styled single-line input component with floating labels, icons, and validation support.

Key Features:

• Floating Label: Auto, Always, and Never floating label modes
• Icon Support: Prefix and suffix icons within the input field
• Input Validation: Built-in styling for valid, invalid, and warning states
• Multiline Support: Optionally extend to multiline text input
• Readonly & Disabled: Support for non-editable states
• Accessibility: Full keyboard and ARIA support

Documentation

• Getting Started
• API Reference
• Live Demos

ASP.NET MVC TextArea Component

The ASP.NET MVC TextArea Component is a styled multiline text input with floating labels and auto-resize capability.

Key Features:

• Floating Label: Animated label that moves on focus
• Auto Resize: Automatically expands height as the user types
• Character Count: Optional character counter display
• Readonly & Disabled: Support for non-editable states
• Validation Styling: Error, warning, and success state indicators
• Accessibility: Full keyboard and screen reader support

Documentation

• Getting Started
• API Reference
• Live Demos

ASP.NET MVC MaskedTextBox Component

The ASP.NET MVC MaskedTextBox Component enforces structured input patterns using a configurable mask string.

Key Features:

• Mask Configuration: Define input format using mask characters (e.g., 000-000-0000 for phone numbers)
• Custom Characters: Define custom mask characters for domain-specific patterns
• Prompt Character: Configurable placeholder character shown in empty mask positions
• Validation: Prevents invalid characters based on mask rules
• Paste Handling: Smart paste support that maps pasted content to the mask
• Accessibility: Keyboard navigation and ARIA attributes

Documentation

• Getting Started
• API Reference
• Live Demos

ASP.NET MVC NumericTextBox Component

The ASP.NET MVC NumericTextBox Component handles numeric input with formatting, min/max constraints, and step increment support.

Key Features:

• Number Formatting: Format values using standard and custom format strings (e.g., n2, c2, p2)
• Min/Max Constraints: Restrict input to a defined numeric range
• Step Increment: Configurable increment/decrement step via spin buttons
• Spin Buttons: Up/down arrow buttons for mouse-based value adjustment
• Strict Mode: Prevents entry of values outside the min/max range
• Accessibility: Keyboard navigation with arrow key support

Documentation

• Getting Started
• API Reference
• Live Demos

ASP.NET MVC ColorPicker Component

The ASP.NET MVC ColorPicker Component supports Picker and Palette modes with RGBA, HEX, and HSV color formats.

Key Features:

• Picker & Palette Modes: Switch between a full color spectrum picker and a predefined palette
• Color Formats: Supports HEX, RGB, and HSV color model inputs
• Opacity Control: Built-in alpha channel slider
• Custom Palette: Define a custom set of colors for the palette view
• Inline Rendering: Render the picker inline rather than as a popup
• Accessibility: Keyboard-navigable color selection

Documentation

• Getting Started
• API Reference
• Live Demos

ASP.NET MVC Uploader Component

The ASP.NET MVC Uploader Component provides drag-and-drop file upload with chunked upload, auto-upload, and file validation.

Key Features:

• Drag and Drop: Upload files by dragging them onto the drop zone
• Chunked Upload: Split large files into chunks for reliable transfer
• Auto Upload: Automatically begin upload on file selection
• Multiple Files: Select and upload multiple files simultaneously
• File Validation: Restrict by file type, size, and count
• Progress Indicator: Per-file upload progress bar
• Accessibility: Full keyboard and screen reader support

Documentation

• Getting Started
• API Reference
• Live Demos

ASP.NET MVC Slider Component

The ASP.NET MVC Slider Component provides single-value and range slider inputs with tooltips, ticks, and custom rendering.

Key Features:

• Single & Range: Choose between single-handle or dual-handle range selection
• Tooltip: Configurable tooltip showing the current value on drag
• Ticks: Major and minor tick marks with optional labels
• Step: Configurable step interval between selectable values
• Vertical Orientation: Render slider vertically or horizontally
• Custom Rendering: Template support for thumb and tooltip customization
• Accessibility: Arrow key navigation and ARIA attributes

Documentation

• Getting Started
• API Reference
• Live Demos

ASP.NET MVC Signature Component

The ASP.NET MVC Signature Component provides a freehand drawing canvas for capturing digital signatures with image export.

Key Features:

• Freehand Drawing: Capture smooth signature strokes on a canvas element
• Stroke Customization: Configure stroke color, width, and background color
• Undo/Redo: Step back through stroke history
• Clear: Reset the canvas with a single method call
• Export: Save the signature as a PNG, JPEG, or SVG image
• Readonly Mode: Display a signature without allowing edits
• Accessibility: Keyboard-accessible clear and save actions

Documentation

• Getting Started
• API Reference
• Live Demos

ASP.NET MVC Rating Component

The ASP.NET MVC Rating Component renders a star rating input with precision control and label customization.

Key Features:

• Precision: Full, half, or exact precision rating support
• Custom Icons: Replace default stars with any icon or template
• Labels: Show dynamic tooltips or labels per rating value
• Readonly Mode: Display-only rating without user interaction
• Min Value: Define a minimum selectable rating value
• Accessibility: Keyboard navigation and ARIA roles

Documentation

• Getting Started
• API Reference
• Live Demos

ASP.NET MVC OTP Input Component

The ASP.NET MVC OTP Input Component provides a segmented input field designed for one-time password and verification code entry.

Key Features:

• Segmented Fields: Individual input boxes per character for structured code entry
• Input Types: Supports number, text, and password character masking per segment
• Auto Focus: Automatically moves focus to the next segment on character entry
• Paste Support: Paste a complete code and distribute characters across segments automatically
• Validation Styling: Error state styling for invalid OTP values
• Accessibility: ARIA labels and keyboard navigation between segments

Documentation

• Getting Started
• API Reference
• Live Demos

ASP.NET MVC Speech to Text Component

The ASP.NET MVC Speech to Text Component converts spoken words to text using the browser's Web Speech API.

Key Features:

• Browser Speech API: Leverages the native Web Speech API for transcription
• Language Support: Configure the recognition language/locale
• Interim Results: Display partial transcription results as the user speaks
• Start/Stop Control: Programmatic and UI-driven control over recognition session
• Target Binding: Bind transcription output directly to a TextBox or TextArea
• Accessibility: Button controls with ARIA labels for screen reader users

Documentation

• Getting Started
• API Reference
• Live Demos

Common Setup

These setup steps are required only once for your application, regardless of which Syncfusion components you use.

1. Install Base NuGet Package

Install-Package Syncfusion.AspNetMvc.Inputs

2. Add Namespace Reference

Edit Web.config under the Views folder and add the Syncfusion.EJ2 namespace:

<namespaces>
    <add namespace="Syncfusion.EJ2"/>
</namespaces>

3. Add Stylesheet & Script References

In your layout file (~/Views/Shared/_Layout.cshtml), add the following in the <head> section:

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>@ViewBag.Title - Syncfusion Application</title>
    
    
    <link rel="stylesheet" href="https://cdn.syncfusion.com/ej2/34.1.30/fluent2.css" />
    
    
    <script src="https://cdn.syncfusion.com/ej2/34.1.30/dist/ej2.min.js"></script>
</head>

4. Register Script Manager

At the end of the <body> tag in your layout file (~/Views/Shared/_Layout.cshtml):

<body>
    @RenderBody()
    
    
    @Html.EJS().ScriptManager()
</body>

Quick Start

Step 1: Add ASP.NET MVC Inputs control

Add the Syncfusion® ASP.NET MVC Inputs control ~/Views/Home/Index.cshtml page:

@Html.EJS().TextBox("textbox").Placeholder("Enter text").Render()


@Html.EJS().NumericTextBox("numeric").Placeholder("Enter number").Render()


@Html.EJS().MaskedTextBox("phone")
    .Mask("(999) 999-9999")
    .Placeholder("(123) 456-7890")
    .Render()


@Html.EJS().CheckBox("checkbox").Label("I agree").Render()


@Html.EJS().RadioButton("radio")
    .Label("Option")
    .Name("default")
    .Render()


@Html.EJS().Switch("switch").Render()


@Html.EJS().ColorPicker("colorpicker").Render()


@Html.EJS().Rating("rating").Render()


@Html.EJS().OtpInput("otp").Render()


@Html.EJS().TextArea("textarea")
    .Placeholder("Enter your message")
    .Render()


@Html.EJS().Slider("slider")
    .Min(0)
    .Max(100)
    .Value(30)
    .Render()

Step 2: Run the Application

Press Ctrl+F5 to run the application in your browser.

Support

• Submit a support ticket
• Community forums
• Feature requests

License

This is a commercial product and requires a paid license for possession or use. Review the Syncfusion® EULA

• Purchase a license
• Start a free 30-day trial

About Syncfusion®

Syncfusion® provides 1600+ UI components and frameworks for web, mobile, and desktop development across multiple platforms:

Web: Blazor | ASP.NET MVC | ASP.NET MVC | JavaScript | Angular | React | Vue

Mobile: Flutter | MAUI | UWP

Desktop: WinForms | WPF | WinUI

Learn more at www.syncfusion.com

sales@syncfusion.com | Toll Free: 1-888-9-DOTNET