WssBlazorControls - Edit Controls Library

A Blazor component library providing form controls with validation, accessibility, and consistent styling.

Quick Reference: Datatype to Control Mapping

Datatype	Control	Notes
`string`	`EditString`	Single-line text input
`string` (multiline)	`EditTextArea`	Multi-line text input
`int`, `decimal`, `double`, etc.	`EditNumber<T>`	Numeric input with step support
`DateTime`, `DateTime?`	`EditDate<T>`	Date picker
`bool`	`EditBool`	Checkbox
`bool?`	`EditBoolNullRadio`	Three-state radio (Yes/No/Not Set)
`TEnum`	`EditSelectEnum<TEnum>`	Dropdown from enum values
`TEnum`	`EditRadioEnum<TEnum>`	Radio buttons from enum values
`string` (from list)	`EditSelectString<T>`	Dropdown from string list
`string` (from list)	`EditRadioString`	Radio buttons from string list
`TValue` (custom)	`EditSelect<TValue>`	Dropdown with custom options
`TValue` (custom)	`EditRadio<TValue>`	Radio buttons with custom options
`List<string>`	`EditCheckedStringList`	Multi-select checkboxes from string list
`List<TEnum>`	`EditCheckedEnumList<TEnum>`	Multi-select checkboxes from enum
Display only	`EditDisplay`	Read-only formatted value

Basic Usage Pattern

All controls follow the same pattern:

razor

<EditControlName @bind-Value="model.Property" Field="@(() => model.Property)" />

•@bind-Value - Two-way binding to the model property
•Field - Expression for validation and auto-configuration

Configuration via Data Annotations

Controls auto-configure from model attributes:

csharp

public class MyModel
{
    [Required]
    [DisplayName("Full Name")]
    [Description("Enter your legal name")]
    [ToolTip("Used for official documents")]
    public string? Name { get; set; }
}

razor

<EditString @bind-Value="model.Name" Field="@(() => model.Name)" />
<!-- Automatically shows label "Full Name", description, tooltip, and required indicator -->

Form Setup

razor

<EditForm Model="@_model" OnValidSubmit="HandleSubmit">
    <ObjectGraphDataAnnotationsValidator />  <!-- Always use this validator -->

    <EditString @bind-Value="_model.Name" Field="@(() => _model.Name)" />
    <EditNumber @bind-Value="_model.Age" Field="@(() => _model.Age)" />

    <button type="submit">Submit</button>
</EditForm>

Edit vs Read-Only Mode

Toggle IsEditMode on individual controls or use FormOptions for all controls:

razor

<CascadingValue Value="@(new FormOptions { IsEditMode = false })">
    <!-- All controls display read-only values -->
</CascadingValue>

Common Properties (All Controls)

Property	Type	Description
`IsEditMode`	`bool`	Edit (true) or read-only (false) mode
`IsDisabled`	`bool`	Disable user interaction
`IsHidden`	`bool`	Hide the control
`IsRequired`	`bool`	Show required indicator (auto-detected from `[Required]`)
`Label`	`string?`	Override auto-detected label
`Description`	`string?`	Override auto-detected description
`Tooltip`	`string?`	Override auto-detected tooltip
`ContainerClass`	`string?`	Additional CSS classes
`Hiding`	`HidingMode?`	Smart hiding based on value state

Detailed Documentation

•Text Controls - EditString, EditTextArea
•Numeric Controls - EditNumber<T>
•Date Controls - EditDate<T>
•Boolean Controls - EditBool, EditBoolNullRadio
•Select Controls - EditSelectEnum, EditSelectString, EditSelect
•Radio Controls - EditRadioEnum, EditRadioString, EditRadio
•Multi-Select Controls - EditCheckedStringList, EditCheckedEnumList
•Display Controls - EditDisplay
•Form Configuration - FormOptions, FormGroupOptions, HidingMode