syncfusion-aspnetcore-inputs

# Implementing Syncfusion ASP.NET Core Inputs ## Uploader The **Uploader** is an advanced file upload control that allows users to upload files asynchronously with features like chunk upload, drag-and-drop, validation, progress tracking, and previews. Supports multiple files, templates, security validation, and form integration. ### Navigation Guide #### Getting Started 📄 **Read:** [references/uploader-getting-started.md](references/uploader-getting-started.md) - NuGet package installation and setup - Tag helper registration and script/style references - Basic Uploader rendering with `<ejs-uploader>` - Auto-upload vs manual upload - SaveUrl/RemoveUrl configuration - Multiple file selection #### Async Upload 📄 **Read:** [references/uploader-async-upload.md](references/uploader-async-upload.md) - `<e-uploader-asyncsettings>` sub-tag with SaveUrl/RemoveUrl - Sequential vs simultaneous upload - Progress tracking with `progress` event - Success/failure event handling - Controller endpoint patterns #### Chunk Upload 📄 **Read:** [references/uploader-chunk-upload.md](references/uploader-chunk-upload.md) - Enabling chunk upload with `chunkSize` - Retry logic with `retryCount` and `retryAfterDelay` - Pause/resume operations - Large file handling - Server-side chunk processing #### File Validation 📄 **Read:** [references/uploader-file-validation.md](references/uploader-file-validation.md) - `allowedExtensions` for file type restrictions - `minFileSize` and `maxFileSize` for size limits - File count restrictions - Duplicate file detection - Custom validation via `selected` event #### Drag-Drop Support 📄 **Read:** [references/uploader-drag-drop-support.md](references/uploader-drag-drop-support.md) - Default drag-drop area - Custom drop areas with `dropArea` selector - Paste-upload functionality - Directory/folder upload with `directoryUpload` - Drag enter/leave events #### Templates and Styling 📄 **Read:** [references/uploader-templates-and-styling.md](references/uploader-templates-and-styling.md) - Custom file list templates - Button customization - Progress bar styling - CSS classes (e-primary, e-success, etc.) - Theme support (Fluent, Material, Bootstrap) #### Advanced Patterns 📄 **Read:** [references/uploader-advanced-patterns.md](references/uploader-advanced-patterns.md) - Form submission with uploaded files - Directory upload - Security considerations (path traversal, MIME validation) - File previews (images) - Error handling patterns #### API Reference 📄 **Read:** [references/uploader-api.md](references/uploader-api.md) - All properties with types, defaults, and descriptions - All events (selected, uploading, success, failure, progress, etc.) - AsyncSettings sub-properties - CSS class reference table - Complete tag helper attribute syntax --- ### Quick Start **1. Install NuGet package:** ``` Install-Package Syncfusion.EJ2.AspNet.Core ``` **2. Register Tag Helper** in `~/Pages/_ViewImports.cshtml`: ```cshtml @addTagHelper *, Syncfusion.EJ2 ``` **3. Add CSS and script** in `~/Pages/Shared/_Layout.cshtml`: ```html <link rel="stylesheet" href="https://cdn.syncfusion.com/ej2/fluent.css" /> <script src="https://cdn.syncfusion.com/ej2/dist/ej2.min.js"></script> ``` **4. Add Script Manager** at end of `<body>`: ```html <ejs-scripts></ejs-scripts> ``` **5. Render the Uploader:** ```cshtml <ejs-uploader id="uploader" autoUpload="true"> <e-uploader-asyncsettings saveUrl="Home/Save" removeUrl="Home/Remove"> </e-uploader-asyncsettings> </ejs-uploader> ``` --- ### Common Patterns #### Async Upload with SaveUrl/RemoveUrl ```cshtml <ejs-uploader id="uploader" autoUpload="true" multiple="true"> <e-uploader-asyncsettings saveUrl="Home/Save" removeUrl="Home/Remove"> </e-uploader-asyncsettings> </ejs-uploader> ``` #### Chunk Upload ```cshtml <ejs-uploader id="chunkUploader" autoUpload="true"> <e-uploader-asyncsettings saveUrl="Home/SaveChunk" removeUrl="Home/Remove" chunkSize="1048576"> </e-uploader-asyncsettings> </ejs-uploader> ``` #### File Validation ```cshtml <ejs-uploader id="validatedUploader" allowedExtensions=".jpg,.png,.pdf" maxFileSize="5242880" minFileSize="1024" multiple="false"> <e-uploader-asyncsettings saveUrl="Home/Save" removeUrl="Home/Remove"> </e-uploader-asyncsettings> </ejs-uploader> ``` #### Drag-Drop with Custom Area ```cshtml <div id="dropArea" style="border: 2px dashed #ccc; padding: 20px;"> Drop files here </div> <ejs-uploader id="uploader" dropArea="#dropArea" autoUpload="true"> <e-uploader-asyncsettings saveUrl="Home/Save" removeUrl="Home/Remove"> </e-uploader-asyncsettings> </ejs-uploader> ``` --- ## NumericTextBox The **NumericTextBox** is a text input control that allows users to enter numeric values with support for formatting, validation, spin buttons, decimal precision, and globalization. It also provides two-way binding with ASP.NET Core models. ### Navigation Guide #### Getting Started 📄 **Read:** [references/numeric-textbox-getting-started.md](references/numeric-textbox-getting-started.md) - NuGet package installation and setup - Tag helper registration and script/style references - Basic NumericTextBox rendering with `<ejs-numerictextbox>` - Setting value, min, and max - NumericTextBoxFor model binding #### Formats and Validation 📄 **Read:** [references/numeric-textbox-formats-and-validation.md](references/numeric-textbox-formats-and-validation.md) - Currency (`c2`), percentage (`p2`), decimal formats - Min/max range validation - `strictMode` for clamping out-of-range values - Custom format strings - `validateOnType` for real-time validation #### Adornments and Styling 📄 **Read:** [references/numeric-textbox-adornments-and-styling.md](references/numeric-textbox-adornments-and-styling.md) - Prepend/append adornments with templates - Currency symbols, percentage icons - Size classes (e-small, e-bigger) - CSS customization and themes #### Spin Buttons and Step 📄 **Read:** [references/numeric-textbox-spin-buttons-and-step.md](references/numeric-textbox-spin-buttons-and-step.md) - Show/hide spin buttons with `showSpinButton` - Step values for increment/decrement - Keyboard navigation (up/down arrows) - Custom step patterns #### Precision and Decimals 📄 **Read:** [references/numeric-textbox-precision-decimals.md](references/numeric-textbox-precision-decimals.md) - Decimal precision with `decimals` property - `validateDecimalOnType` for real-time decimal validation - `strictMode` behavior - Currency and percentage precision #### Two-Way Binding and Forms 📄 **Read:** [references/numeric-textbox-two-way-binding-forms.md](references/numeric-textbox-two-way-binding-forms.md) - `NumericTextBoxFor` model binding - Form submission with POST - Server-side validation - Tag helper integration with HTML forms #### Globalization and Accessibility 📄 **Read:** [references/numeric-textbox-globalization-accessibility.md](references/numeric-textbox-globalization-accessibility.md) - `locale` property for culture setting - CLDR data loading for non-English cultures - `enableRtl` for Arabic, Hebrew - WCAG 2.2 compliance and ARIA attributes - Keyboard navigation and screen reader support #### API Reference 📄 **Read:** [references/numeric-textbox-api.md](references/numeric-textbox-api.md) - All properties with types, defaults, and descriptions - All events (change, input, focus, blur, created, destroyed) - CSS class reference table - Enum values (FloatLabelType, etc.) - Complete tag helper attribute syntax --- ### Quick Start **1. Install NuGet package:** ``` Install-Package Syncfusion.EJ2.AspNet.Core ``` **2. Register Tag Helper** in `~/Pages/_ViewImports.cshtml`: ```cshtml @addTagHelper *, Syncfusion.EJ2 ``` **3. Add CSS and script** in `~/Pages/Shared/_Layout.cshtml`: ```html <link rel="stylesheet" href="https://cdn.syncfusion.com/ej2/fluent.css" /> <script src="https://cdn.syncfusion.com/ej2/dist/ej2.min.js"></script> ``` **4. Add Script Manager** at end of `<body>`: ```html <ejs-scripts></ejs-scripts> ``` **5. Render the NumericTextBox:** ```cshtml <ejs-numerictextbox id="price" min="0" max="10000" value="100" format="c2" placeholder="Enter price"> </ejs-numerictextbox> ``` --- ### Common Patterns #### Currency Format ```cshtml <ejs-numerictextbox id="amount" format="c2" min="0" value="100"> </ejs-numerictextbox> ``` #### Percentage with Step ```cshtml <ejs-numerictextbox id="percentage" format="p2" min="0" max="100" step="5" showSpinButton="true"> </ejs-numerictextbox> ``` #### NumericTextBoxFor (Model Binding) ```cshtml @model AppModel <ejs-numerictextboxfor id="quantity" for="@Model.Quantity"> </ejs-numerictextboxfor> ``` #### With Validation ```cshtml <ejs-numerictextbox id="age" min="18" max="100" strictMode="true" validateOnType="true" placeholder="Enter age"> </ejs-numerictextbox> ``` --- ## OTP Input The **OTP Input** (One-Time Password) is a specialized input control for entering verification codes, OTPs, PINs, or any fixed-length alphanumeric sequence. Supports multiple input types (number, text, password), styling modes, and accessibility. ### Navigation Guide #### Getting Started 📄 **Read:** [references/otp-input-getting-started.md](references/otp-input-getting-started.md) - NuGet package installation and setup - Tag helper registration and script/style references - Basic OTP rendering with `<ejs-otpinput>` - Setting length and type - ValueChanged event for verification #### Configuration 📄 **Read:** [references/otp-input-configuration.md](references/otp-input-configuration.md) - Input types: number, text, password - Styling modes: Outlined, Filled, Underlined - Placeholder text (single or per-field) - Separator character between fields - Disabled state and CSS classes #### Events 📄 **Read:** [references/otp-input-events.md](references/otp-input-events.md) - Created, Input, ValueChanged, Focus, Blur events - Real-time feedback patterns - Auto-submit on completion - Timeout handling - Validation feedback #### Accessibility 📄 **Read:** [references/otp-input-accessibility.md](references/otp-input-accessibility.md) - WCAG 2.2 AA compliance - WAI-ARIA attributes (role, aria-label, aria-required) - Full keyboard interaction table - Screen reader support - RTL support for Arabic, Hebrew #### API Reference 📄 **Read:** [references/otp-input-api.md](references/otp-input-api.md) - All properties (length, type, stylingMode, separator, etc.) - All events with descriptions - CSS class reference - Complete tag helper attribute syntax --- ### Quick Start **1. Install NuGet package:** ``` Install-Package Syncfusion.EJ2.AspNet.Core ``` **2. Register Tag Helper** in `~/Pages/_ViewImports.cshtml`: ```cshtml @addTagHelper *, Syncfusion.EJ2 ``` **3. Add CSS and script** in `~/Pages/Shared/_Layout.cshtml`: ```html <link rel="stylesheet" href="https://cdn.syncfusion.com/ej2/fluent.css" /> <script src="https://cdn.syncfusion.com/ej2/dist/ej2.min.js"></script> ``` **4. Add Script Manager** at end of `<body>`: ```html <ejs-scripts></ejs-scripts> ``` **5. Render the OTP Input:** ```cshtml <ejs-otpinput id="otp" length="6" type="number" placeholder="0" valueChanged="onOtpComplete"> </ejs-otpinput>