Create dropdownlist in blazor| create checkboxlist in blazor| create radiobuttonlist in blazor

 Create dropdownlist in blazor| create checkboxlist in blazor| create radiobuttonlist in blazor 

Sure! Here's an example of how you can create a dropdown list, checkbox list, and radio button list in Blazor:

1. Dropdown List:

razor

@page "/dropdown"

<h3>Dropdown List</h3>

<select class="form-control" @bind="@SelectedOption">

    @foreach (var option in Options)

    {

        <option value="@option">@option</option>

    }

</select>

<p>Selected option: @SelectedOption</p>

@code {

    protected string SelectedOption { get; set; }

    protected List<string> Options { get; set; }

    protected override void OnInitialized()

    {

        Options = new List<string>

        {

            "Option 1",

            "Option 2",

            "Option 3"

        };

        SelectedOption = Options[0];

    }

}

2. Checkbox List:

razor

@page "/checkbox"

<h3>Checkbox List</h3>

@foreach (var option in Options)

{

    <div>

        <input type="checkbox" id="@option" value="@option" checked="@SelectedOptions.Contains(option)" @onchange="ToggleOption" />

        <label for="@option">@option</label>

    </div>

}

<p>Selected options: @string.Join(", ", SelectedOptions)</p>

@code {

    protected List<string> SelectedOptions { get; set; }

    protected List<string> Options { get; set; }

    protected override void OnInitialized()

    {

        Options = new List<string>

        {

            "Option 1",

            "Option 2",

            "Option 3"

        };

        SelectedOptions = new List<string> { Options[0] };

    }

    protected void ToggleOption(ChangeEventArgs e)

    {

        var option = e.Value.ToString();

        if (SelectedOptions.Contains(option))

            SelectedOptions.Remove(option);

        else

            SelectedOptions.Add(option);

    }

}

3. Radio Button List:

razor

@page "/radiobutton"

<h3>Radio Button List</h3>

@foreach (var option in Options)

{

    <div>

        <input type="radio" id="@option" name="radioOptions" value="@option" checked="@SelectedOption == option" @onchange="UpdateSelection" />

        <label for="@option">@option</label>

    </div>

}

<p>Selected option: @SelectedOption</p>

@code {

    protected string SelectedOption { get; set; }

    protected List<string> Options { get; set; }

    protected override void OnInitialized()

    {

        Options = new List<string>

        {

            "Option 1",

            "Option 2",

            "Option 3"

        };

        SelectedOption = Options[0];

    }

    protected void UpdateSelection(ChangeEventArgs e)

    {

        SelectedOption = e.Value.ToString();

    }

}

In these examples, each component demonstrates a different type of list control in Blazor. The dropdown list, checkbox list, and radio button list are all populated with sample options and allow for selecting and displaying the selected values. You can customize the options, styling, and behavior based on your specific requirements.

Thanks for learning. Happy learning..

If you have any queries or suggestion please comment the same...