-
Notifications
You must be signed in to change notification settings - Fork 10.4k
Closed
Labels
api-approvedAPI was approved in API review, it can be implementedAPI was approved in API review, it can be implementedarea-blazorIncludes: Blazor, Razor ComponentsIncludes: Blazor, Razor Components
Milestone
Description
Background and Motivation
Currently, Blazor developers using SSR (Server-Side Rendering) and EditForm need to use raw HTML to create hidden input fields:
<input type="hidden" name="model.Id" @bind-value="model.Id" />
This approach is inconsistent with other Blazor input components that have dedicated wrappers (InputText, InputSelect, etc.). The lack of an InputHidden component creates an odd gap in the framework's form input components, making model binding more complex than necessary.
Adding an InputHidden component will provide a consistent API surface for all form inputs and simplify model binding scenarios in Blazor applications.
Proposed API
namespace Microsoft.AspNetCore.Components.Forms
{
+ public class InputHidden : InputBase<string?>
+ {
+ public ElementReference? Element { get; protected set; }
+ protected override void BuildRenderTree(RenderTreeBuilder builder);
+ protected override bool TryParseValueFromString(string? value, out string? result, out string? validationErrorMessage);
+ }
}
Usage Examples
// Simple usage in an EditForm
<EditForm Model="@model" OnValidSubmit="@HandleSubmit">
<InputHidden @bind-Value="model.Id" />
<InputText @bind-Value="model.Name" />
<button type="submit">Submit</button>
</EditForm>
// With additional attributes
<EditForm Model="@model">
<InputHidden id="user-id" @bind-Value="model.UserId" />
<InputHidden @bind-Value="model.SessionToken" class="security-token" />
</EditForm>
// Accessing the element reference
@code {
private InputHidden hiddenInput;
protected override async Task OnAfterRenderAsync(bool firstRender)
{
if (firstRender && hiddenInput.Element.HasValue)
{
// Can interact with the element if needed
var elementRef = hiddenInput.Element.Value;
}
}
}
Alternative Designs
The proposed design follows the established pattern of other input components in the framework, inheriting from InputBase<T>
and providing a consistent API surface.
Risks
N/A
Metadata
Metadata
Assignees
Labels
api-approvedAPI was approved in API review, it can be implementedAPI was approved in API review, it can be implementedarea-blazorIncludes: Blazor, Razor ComponentsIncludes: Blazor, Razor Components