Блог

Главная - Вопросы по программированию - Как привязать переключатели в Blazor?

Как привязать переключатели в Blazor?

#c# #binding #radio-button #blazor

#c# #привязка #переключатель #Blazor

Вопрос:

Привязка переключателей не происходит в blazor. В соответствии с документацией предлагается использовать тег InputRadio, но этот тег не работает в blazor и показывает проблему привязки. Любые предложения о том, как привязать переключатель

Ответ №1:

Конечно, это так, это описано здесь:

 @using System.Globalization
@typeparam TValue
@inherits InputBase<TValue>

<input @attributes="AdditionalAttributes" type="radio" value="@SelectedValue" 
       checked="@(SelectedValue.Equals(Value))" @onchange="OnChange" />

@code {
    [Parameter]
    public TValue SelectedValue { get; set; }

    private void OnChange(ChangeEventArgs args)
    {
        CurrentValueAsString = args.Value.ToString();
    }

    protected override bool TryParseValueFromString(string value, 
        out TValue result, out string errorMessage)
    {
        var success = BindConverter.TryConvertTo<TValue>(
            value, CultureInfo.CurrentCulture, out var parsedValue);
        if (success)
        {
            result = parsedValue;
            errorMessage = null;

            return true;
        }
        else
        {
            result = default;
            errorMessage = $"{FieldIdentifier.FieldName} field isn't valid.";

            return false;
        }
    }
}

Использование

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

<h1>Radio Button Group Test</h1>

<EditForm Model="@model" OnValidSubmit="@HandleValidSubmit">
    <DataAnnotationsValidator />
    <ValidationSummary />

    @for (int i = 1; i <= 5; i  )
    {
        <label>
           <InputRadio name="rate" SelectedValue="i" @bind-Value="model.Rating" />
           @i
        </label>
    }

    <button type="submit">Submit</button>
</EditForm>

<p>You chose: @model.Rating</p>

@code {
    private Model model = new Model();

    private void HandleValidSubmit()
    {
        ...
    }

    public class Model
    {
        [Range(1, 5)]
        public int Rating { get; set; }
    }
}

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

1. Обновленная ссылка: learn.microsoft.com/en-us/aspnet/core/blazor /…

2. Конечно, но как вы это сделаете, не используя MS InputRadio внутри EditForm?.. можно @bind без каких-либо проблем. Как это сделать с

3. Не уверен, что изменилось с 2020 года, но это решение InputGroup, принятое, как показано выше, выдает ошибку отслеживания стека: InvalidOperationException: Microsoft. AspNetCore. Компоненты. Формы. InputRadio 1[System.String] must have an ancestor Microsoft.AspNetCore.Components.Forms.InputRadioGroup 1[Система. Строка] с соответствующим свойством ‘Name’, если оно указано.

4. Я имею в виду … в сообщении об ошибке буквально говорится, как устранить ошибку.

Ответ №2:

Приведенный ниже код работает для меня

 <input type="radio" checked="@(User.Gender == GenderEnum.Male)"
    name="Gender" @onchange="@(() => User.Gender = GenderEnum.Male)" />
<label>Male</label>

<input type="radio" checked="@(User.Gender == GenderEnum.Female)"
    name="Gender" @onchange="@(() => User.Gender = GenderEnum.Female)" />
<label>Female</label>

<input type="radio" checked="@(User.Gender == GenderEnum.Other)"
    name="Gender" @onchange="@(() => User.Gender = GenderEnum.Other)" />
<label>Other</label>

У нас также может быть функция, вызываемая из @onchange like
@onchange="@UpdateGender"

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

1. Если вы делаете это, можете также создать универсальный компонент, который принимает любой тип перечисления и перебирает его значения.

2. Уверен, что это можно сделать! Но вопрос заключается в привязке простых переключателей. Я выбрал простой пример перечисления по признаку пола. Выбирая сам пример с полом, я не был уверен, что буду продолжать, поскольку это может начать войну гендерной идентичности в комментариях, поскольку я оставил много полов в своем примере.