Blazor - Criando Botões de opções (RadioButton)
  Neste artigo veremos como criar de forma simples um componente RadioButton no Blazor Server.


Um radio button ou botão de opção é um elemento de controle gráfico que permite ao usuário escolher apenas uma de um conjunto predefinido de opções mutuamente exclusivas.

 


 

Neste artigo vou mostrar como criar de forma simples botões de opções no Blazor.

Criando o projeto Blazor Server

Vamos criar no VS 2022 um projeto do tipo Blazor Server App chamado BlazorRadioButton

 

Podemos limpar o projeto removendo os arquivos criados por padrão que não iremos usar como os componenets Counter, FetchData e SurverPrompt. Vamos remover também a pasta Data do projeto.

 

Vamos criar no projeto a pasta ViewModels e nesta pasta criar a classe RadioButtonViewModel:

 

public class RadioButtonViewModel
{
        [Required(ErrorMessage = "Estado Civil")]
        public string? SelecioneEstadoCivil { get; set; }
        public List<SelectListItem>? EstadoCivil { get; set; }
}


A seguir na pasta Pages vamos criar um componente Blazor chamado RadioButton.razor :

 

@page "/radiobutton"
<EditForm Model="@Radiobutton" OnValidSubmit="@FormSubmitted">
    <div class="card">
        <div class="card-header">
            <h5 class="card-title">RadioButton</h5>
        </div>
        <div class="card-body">
            <div class="form-row">
                <div class="form-group col-md-4">
                    <label>Estado Civil: </label>
                    <br />

                    <ValidationMessage For="@(() => Radiobutton.SelecioneEstadoCivil)" />

                    <InputRadioGroup ValueChanged="@((string value) => SelectionChanged(value))"
                                     ValueExpression="@(() => Radiobutton.SelecioneEstadoCivil)"
                                     Value="@Radiobutton.SelecioneEstadoCivil"
                                     class="form-control">

                        @foreach (var estado in Radiobutton.EstadoCivil)
                        {
                            <InputRadio Value="estado.Value" />
                            @estado.Text <br />
                        }
                    </InputRadioGroup>
                </div>
            </div>
        </div>
        <div class="card-footer">
          <button type="submit" class="btn btn-success">Enviar</button>
            Selecionado : @SelectedValue
        </div>
    </div>
</EditForm>

@code {
    protected RadioButtonViewModel Radiobutton { get; set; } = new RadioButtonViewModel();
    protected string? SelectedValue { get; set; }
    protected override void OnInitialized()
    {
      string? estadoCivilPadrao = "1";
      Radiobutton.EstadoCivil = new List<SelectListItem>()
      {
          new SelectListItem() { Value ="1", Text = "Solteiro"},
          new SelectListItem() { Value ="2", Text ="Casado"},
          new SelectListItem() { Value ="3", Text ="Divorciado"},
          new SelectListItem() { Value ="4", Text ="Viúvo"},
          new SelectListItem() { Value ="5", Text ="Separado"}
      };
        Radiobutton.SelecioneEstadoCivil = estadoCivilPadrao;
        SetEstadoCivilDisplayValue(estadoCivilPadrao);
    }
    protected void SelectionChanged(string value)
    {
        if (value != null)
        {
            SetEstadoCivilDisplayValue(value);
            Radiobutton.SelecioneEstadoCivil = value;
        }
    }
    protected void FormSubmitted()
    {
        var radiobuttonValue = Radiobutton.SelecioneEstadoCivil;
        SetEstadoCivilDisplayValue(radiobuttonValue);
    }
    private void SetEstadoCivilDisplayValue(string value)
    {
        if (value == "1"){SelectedValue = "Solteiro";}
        else if (value == "2"){SelectedValue = "Casado";}
        else if (value == "3"){SelectedValue = "Divorciado";}
        else if (value == "4"){SelectedValue = "Viúvo";}
        else if (value == "5"){SelectedValue = "Separado";}
    }
}


Neste código temos o seguinte:

 

1- Criamos uma propriedade Radiobutton do tipo da nossa ViewModel

2- No método OnInitialized atribuímos os valores que desejamos definir nos botões de opção
3- No método FormSubmitted vamos obter o valor selecionado pelo usuário

 

Estamos usando um formulário Blazor usando EditForm Model e tratando a submissão em OnValidSubmit="@FormSubmitted"


Percorremos a lista contendo os itens a serem exibidos e apresentamos ao usuário e usamos um Card onde exibimos seleção do usuário obtendo o valor em  @SelectedValue

 

Devemos exibir o valor do botão de opção selecionado e para isso, precisamos usar as propriedades ValueChanged de InputRadioGroup.

Quando o formulário for submetido quando o botão Enviar for acionado , devemos ser capazes de obter o valor do botão de opção selecionado.

Para isso, vamos adicionar 3 métodos à classe no componente RadioButton:


1.- SetEstadoCivilDisplayValue, que é usado para exibir o valor de texto do botão de opção selecionado.
2.- SelectionChanged - Para tratar com a alteração da seleção
3.- FormSubmitted - Para tratar o envio do formulário


Além disso o método SetEstadoCivilDisplayValue recebe o valor como entrada e define a propriedade SelectedValue usada na página para exibir o valor selecionado.

 

Vamos ajustar o código do componente NavMenu.razor incluindo o link para acessar o componente da lista de seleção:

 

...
<div class="nav-item px-3">
   <NavLink class="nav-link" href="radiobutton">
      <span class="oi oi-list-rich" aria-hidden="true"></span> RadioButton
 </NavLink>
</div>
...

 

Executando o projeto iremos obter o seguinte resultado:

 

 

Pegue o projeto aqui :  BlazorRadioButton.zip (sem as referências)...


"Porque o Filho do homem(Jesus) veio buscar e salvar o que se havia perdido."
Lucas 19:10  

Porque um menino nos nasceu, um filho se nos deu, e o principado está sobre os seus ombros, e se chamará o seu nome: Maravilhoso, Conselheiro, Deus Forte, Pai da Eternidade, Príncipe da Paz.

Isaías 9:6
Porque um menino nos nasceu, um filho se nos deu, e o principado está sobre os seus ombros, e se chamará o seu nome: Maravilhoso, Conselheiro, Deus Forte, Pai da Eternidade, Príncipe da Paz.

Isaías 9:6

Referências:

José Carlos Macoratti