Saving which radio button has been checked

Viewed 30

I have a list of three radio buttons and I'm trying to figure out how I can display which one has been clicked and saved. These radio buttons are in my Blazor project and the UpdateFilter method on the on click just saves the string to the database. How can I make the one that is clicked and saved show as checked when the page is loaded?

        <label class="GroupTitle">Filters:</label><br/>
        <input type="radio" name="number" id="all" @oninput="@(() => UpdateFilter("all"))" /> 
        <label for="">Clear all files</label><br />  
        <input type="radio" name="number" id="number" @oninput="@(() => UpdateFilter("number"))" />
        <label for="">Based on number of files</label><br />    
        <input type="radio" name="number" id="date" @oninput="@(() => UpdateFilter("date"))" />    
        <label for="date">Based on date of files</label><br />
1 Answers

You should really be using the <InputRadioGroup> component. Here is a very contrived example:

<EditForm Model="this.model">
    <InputRadioGroup @bind-Value="this.model.Filter">
        @foreach (var filterOption in this.FilterOptions)
        {
            <label><InputRadio Value="@filterOption.Key" />&nbsp;@filterOption.Value</label>
            <br />
        }
    </InputRadioGroup>
</EditForm>

@code{
    private Model model = new Model();
    private Dictionary<string, string> FilterOptions = new
    {
        { "all", "Clear all files" },
        { "number", "Based on number of files" },
        { "date", "Based on date of files" },
    }

    public class Model
    {
        public string Filter { get; set; }
    }
}
Related