HiddenField - Basic Usage

The HiddenField component stores a non-displayed value. While the field is not visible to users, the value is accessible to both server-side code and JavaScript.

Source Code

@page "/ControlSamples/HiddenField"

<HiddenField ID="myHiddenField" Value="@HiddenValue" OnValueChanged="HandleValueChanged" />

<p><strong>Current hidden value:</strong> @HiddenValue</p>

<div class="mb-3">
    <label class="form-label">Update hidden field value:</label>
    <input type="text" class="form-control" @bind="NewValue" />
</div>

<Button Text="Update Hidden Field" OnClick="UpdateHiddenValue" />

@code {
    private string HiddenValue = "secret-value-123";
    private string NewValue = "";
    private string Message = "";

    private void UpdateHiddenValue()
    {
        if (!string.IsNullOrEmpty(NewValue))
        {
            HiddenValue = NewValue;
            Message = $"Hidden field updated to: {HiddenValue}";
            NewValue = "";
        }
    }

    private void HandleValueChanged(EventArgs e)
    {
        Message = "Value changed event triggered!";
    }
}