InputBox deselect the selection and return to initial state

Question

I have a Blazor WebAssembly app that contains an InputBox with options.

1. When the is loaded for the first time, nothing is selected and shows "Please select an option" followed by the DataAnnotation validations like [Required].

**Data Model**
class Meeting
 ...
 [Required(ErrorMessage = "Please Select a Branch")]
 public string SIteGID { get; set; } 
 ...

**Meeting.razor**
<EditForm Model="@meetingObject">
    <DataAnnotationsValidator />
...
 <div class="form-group">
                            <label for="groupMemberBranch" class="label-control">BRANCH</label>
                            <InputSelect id="groupMemberBranch" @bind-Value="meetingObject.SIteGID" @onchange="OnValueChanged" class="form-control custom-select" title="The selection of a Branch Required ">
                                <option value="Select" selected disabled="disabled">(Please select a Branch)</option>
                                @foreach (Branch branch in branchResponseResult.Data.ToList())
                                        {
                                            <option value="@branch.SiteGID"> @branch.BranchDescription</option>
                                        }
                            </InputSelect>
                            <ValidationMessage For="@(()=> meetingDTO.SIteGID)" />
                        </div>
...

2. Under some conditions, the following line of code executed

meetingObject.SIteGID = 5;  // Force the selection of a specific Branch by Code

3. After the step (2), I would like to return to inititial state. That means, show the message to select a branch, raise validations if nothing is selected on Submit. for Example

...
meetingDTO.SIteGID = "Select"; // This line of code does not raise annotation messages if the user ignore the selection.

Any help will be great. Thank you

...
meetingDTO.SIteGID = "Select"; // This line of code does not raise annotation messages if the user ignore the selection.

Answer 1

Here's a form loosely based on the information provided in your question, that demonstrates one way to code what I believe you are asking for.

@page "/"
@using System.ComponentModel.DataAnnotations;

<PageTitle>Index</PageTitle>

<h1>Hello, world!</h1>

<EditForm Model=_meeting>
    <DataAnnotationsValidator />
    <div class="col mb-3">
        <InputSelect class="form-control" @bind-Value=_meeting.SIteGID >

            @if (_meeting.SIteGID is null)
            {
                <option selected disabled> -- Select a meeting -- </option>
            }

            @foreach (var option in _result.Items)
            {
                <option value="@option.SiteGID">@option.BranchDescription</option>
            }

        </InputSelect>
        <ValidationMessage For="@(()=> _meeting.SIteGID)" />
    </div>
    <div class="text-end">
        <button type="button" class="btn btn-success" @onclick="@(() => SetSite("3"))">Set Site to Madrid</button>
        <button type="button" class="btn btn-danger" @onclick="@(() => SetSite(null))">Reset Site</button>
        <button type="submit" class="btn btn-primary">Submit</button>
    </div>
</EditForm>

<div class="bg-dark text-white m-2 p-2">
<pre> Site GID : @_meeting.SIteGID </pre>
</div>
@code {
    private Meeting _meeting = new();

    private ResponseResult<BranchFKItems> _result = new(new List<BranchFKItems> { new("1", "London"), new("2", "Paris"), new("3", "Madrid") }, true);

    private void SetSite(string? value)
        => _meeting.SIteGID = value;

    public record ResponseResult<TRecord>(IEnumerable<TRecord> Items, bool Success);
    public record BranchFKItems(string SiteGID, string BranchDescription ); 
    public class Meeting
    {
        [Required(ErrorMessage = "Please Select a Branch")]
        public string? SIteGID { get; set; }
    }
}