InputBase<TValue> is the abstract Blazor base class for custom form components. TValue identifies the C# model-property type represented by the HTML input. The base class supplies form binding and validation integration, leaving the component to render its element and translate browser strings into TValue values. section 36.2.1
A derived component typically relies on these members and responsibilities:
- Set the rendered element’s value from CurrentValueAsString and assign a changed browser value back through that property. section 36.2.1
- Include CssClass in the rendered element so Blazor can indicate modified, valid, and invalid states. section 36.2.2
- Implement TryParseValueFromString to convert the HTML string representation into TValue and return a parser error when conversion fails. section 36.2.1
Generic custom select
A CustomSelect component declares @typeparam TValue, inherits InputBase<TValue>, renders a select element, and accepts a dictionary of display labels to TValue values. Its onchange handler assigns the selected string to CurrentValueAsString; its Parser function performs the type-specific conversion. This keeps the component reusable for properties such as DepartmentId and LocationId rather than coupling it to one model type.
Listing 36.8 The contents of the CustomSelect.razor file in the Blazor/Forms folder
@typeparam TValue
@inherits InputBase<TValue>
@using System.Diagnostics.CodeAnalysis
<select class="form-control @CssClass" value="@CurrentValueAsString"
@onchange="@(ev => CurrentValueAsString = ev.Value as string)">
@ChildContent
@foreach (KeyValuePair<string, TValue> kvp in Values) {
<option value="@kvp.Value">@kvp.Key</option>
}
</select>
@code {
[Parameter]
public RenderFragment? ChildContent { get; set; }
[Parameter]
public IDictionary<string, TValue> Values { get; set; }
= new Dictionary<string, TValue>();
[Parameter]
public Func<string, TValue>? Parser { get; set; }
protected override bool TryParseValueFromString(string? value,
[MaybeNullWhen(false)] out TValue? result,
[NotNullWhen(false)] out string? validationErrorMessage) {
try {
if (Parser != null && value != null) {
result = Parser(value);
validationErrorMessage = null;
return true;
}
result = default(TValue);
validationErrorMessage = "Value or parser not defined";
return false;
} catch {
result = default(TValue);
validationErrorMessage = "The value is not valid";
return false;
}
}
}
Inspect the complete CustomSelect.razor implementation, including its generic parameter, rendered select, parameters, and parsing override. section 36.2.1
When placed inside an EditForm, a derived InputBase component participates in the same validation flow as built-in Input* components. DataAnnotationsValidator integrates model attributes, while ValidationMessage and ValidationSummary display property and model errors. section 36.2.2
