Как я могу пометить переключатель как «проверенный» в моем приложении Blazor, создавая переключатели внутри цикла foreach?

#.net-core #blazor

Вопрос:

Я заполняю группу переключателей в своем приложении Blazor foreach циклом:

 Dictionary<string,string> my_radio_options = new Dictionary<string,string>(){
    {"optionone","Option One"}
    {"optiontwo","Option Two"}
    {"optionthree","Option Three"}
    {"optionfour","Option Four"}
    {"optionfive","Option Five"}
}

@foreach (KeyValuePair<String, String> entry in my_radio_options) {
    <input type="radio" name="my_selected_option" id="my_selected_option-@entry.Value" @onclick="() => my_selection = entry.Key">
}

@code {
    private string my_selection;

    private void do_something() {
        // Use "my_selection" here ...
    }
}
 

Я попробовал это:

 <input type="radio" name="my_selected_option" id="my_selected_option-@entry.Value" @onclick="() => my_selection = entry.Key" checked="@(entry.Key.Equals(my_radio_options.ElementAt(1).Key) ? "checked" : "")">
 

И это:

 @{bool first = true;}
@foreach (KeyValuePair<String, String> entry in my_radio_options) {
    <input type="radio" name="my_selected_option" id="my_selected_option-@entry.Value" @onclick="() => my_selection = entry.Key" checked="@(first ? "checked" : "")">
    @(first = false)
}
 

Однако ни один из этих методов не работает.

Как я могу это сделать?

Комментарии:

1. можешь попробовать вот так: <input type="radio" name="my_selected_option" id="my_selected_option-@entry.Value" checked="@first">

2. @TheBacker ДА … это сработало! Спасибо. Странно, однако, если я F12 и проверю этот элемент, я не увижу «проверено» или «проверено= «истинно» » или что-то еще. В любом случае, это работает. Еще раз спасибо за вашу помощь.

Ответ №1:

Существует несколько способов сделать это, но вот рабочая версия вашего кода.

  1. my_selection может быть либо ключом, либо значением, это зависит от того, что вы хотите.
  2. Код C# не смешивается с разметкой Razor — его легко читать.
  3. IsChecked возвращает значение true/false.
  4. Использует onchange событие, а onclicked не то, что больше подходит для кнопок.
 @page "/Check"
@foreach (KeyValuePair<String, String> entry in my_radio_options)
{
    <div>
        <input type="radio" name="my_selected_option" id="my_selected_option-@entry.Value" checked="@this.IsChecked(entry.Key)" @onchange="() => Update(entry.Key)">
        <label>@entry.Value</label>
    </div>
}
<div class="m-3">Selected item: @my_selection</div>

@code {
    private string my_selection = "optionthree";

    private void do_something()
    {
        // Use "my_selection" here ...
    }
    Dictionary<string, string> my_radio_options = new Dictionary<string, string> {
        {"optionone","Option One"},
        {"optiontwo","Option Two"},
        {"optionthree","Option Three"},
        {"optionfour","Option Four"},
        {"optionfive","Option Five"},
    };

    private void Update(string value)
    {
        my_selection = value;
    }

    private bool IsChecked(string value)
        => value.Equals(my_selection);
}