Vincular controles a dados em aplicativos Blazor

Concluído

Blazor permite vincular controles HTML a propriedades para que os valores alterados sejam exibidos automaticamente na interface do usuário (UI).

Suponha que você esteja desenvolvendo uma página que coleta informações dos clientes sobre suas preferências de pizza. Você deseja carregar as informações de um banco de dados e permitir que os clientes façam alterações, como gravar suas coberturas favoritas. Quando há uma alteração do usuário ou uma atualização no banco de dados, você deseja que os novos valores sejam exibidos na interface do usuário o mais rápido possível.

Nesta unidade, você aprenderá a usar a vinculação de dados no Blazor para vincular elementos da interface do usuário a valores, propriedades ou expressões de dados.

O que é a vinculação de dados?

Se desejar que um elemento HTML exiba um valor, você pode escrever código para alterar a exibição. Você precisa escrever código extra para atualizar a exibição quando o valor for alterado. No Blazor, você pode usar a vinculação de dados para conectar um elemento HTML a um campo, propriedade ou expressão. Dessa forma, quando o valor é alterado, o elemento HTML é atualizado automaticamente. A atualização geralmente acontece rapidamente após a alteração, e você não precisa escrever nenhum código de atualização.

Para vincular um controle, você usaria a @bind diretiva:

@page "/"

<p>
    Your email address is:
    <input @bind="customerEmail" />
</p>

@code {
    private string customerEmail = "user@contoso.com"
}

Na página anterior, sempre que a customerEmail variável muda de valor, o <input> valor é atualizado.

Note

Os controles, como <input>, atualizam sua exibição somente quando o componente é renderizado e não quando o valor de um campo muda. Como os componentes Blazor são renderizados após a execução de qualquer código do manipulador de eventos, na prática, as atualizações geralmente são exibidas rapidamente.

Vincular elementos a eventos específicos

A @bind diretiva é inteligente e compreende os controlos que utiliza. Por exemplo, quando você vincula um valor a uma caixa <input>de texto, ele vincula o value atributo. Uma caixa <input> de seleção HTML tem um checked atributo em vez de um value atributo. Em vez disso, o @bind atributo usa automaticamente esse checked atributo. Por padrão, o controle está vinculado ao evento DOM onchange . Por exemplo, considere esta página:

@page "/"

<h1>My favorite pizza is: @favPizza</h1>

<p>
    Enter your favorite pizza:
    <input @bind="favPizza" />
</p>

@code {
    private string favPizza { get; set; } = "Margherita"
}

Quando a página é renderizada, o valor padrão Margherita é exibido no elemento e na <h1> caixa de texto. Quando você insere uma nova pizza favorita na caixa de texto, o <h1> elemento não muda até que você saia da caixa de texto ou selecione Enter porque é quando o onchange evento DOM é acionado.

Muitas vezes, esse é o comportamento que você quer. Mas suponha que você queira que o <h1> elemento seja atualizado assim que inserir qualquer caractere na caixa de texto. Em vez disso, você pode obter esse resultado vinculando-se ao oninput evento DOM. Para vincular a esse evento, você deve usar as @bind-value diretivas e @bind-value:event :

@page "/"

<h1>My favorite pizza is: @favPizza</h1>

<p>
    Enter your favorite pizza:
    <input @bind-value="favPizza" @bind-value:event="oninput" />
</p>

@code {
    private string favPizza { get; set; } = "Margherita"
}

Nesse caso, o título muda assim que você digita qualquer caractere na caixa de texto.

Formatar valores vinculados

Se você exibir datas para o usuário, convém usar um formato de dados localizado. Por exemplo, suponha que você escreva uma página especificamente para usuários do Reino Unido, que preferem escrever datas com o dia primeiro. Você pode usar a @bind:format diretiva para especificar uma única cadeia de caracteres de formato de data:

@page "/ukbirthdaypizza"

<h1>Order a pizza for your birthday!</h1>

<p>
    Enter your birth date:
    <input @bind="birthdate" @bind:format="dd-MM-yyyy" />
</p>

@code {
    private DateTime birthdate { get; set; } = new(2000, 1, 1);
}

Note

No momento da escrita, as cadeias de caracteres de formato são suportadas apenas com valores de data. Formatos de moeda, formatos de número e outros formatos podem ser adicionados no futuro. Para verificar as informações mais recentes sobre formatos de vinculação, consulte Formatar cadeias de caracteres na documentação do Blazor.

Como alternativa ao uso da @bind:format diretiva, você pode escrever código C# para formatar um valor acoplado. Use o get e set accessors na definição de membro, como neste exemplo:

@page "/pizzaapproval"
@using System.Globalization

<h1>Pizza: @PizzaName</h1>

<p>Approval rating: @approvalRating</p>

<p>
    <label>
        Set a new approval rating:
        <input @bind="ApprovalRating" />
    </label>
</p>

@code {
    private decimal approvalRating = 1.0;
    private NumberStyles style = NumberStyles.AllowDecimalPoint | NumberStyles.AllowLeadingSign;
    private CultureInfo culture = CultureInfo.CreateSpecificCulture("en-US");
    
    private string ApprovalRating
    {
        get => approvalRating.ToString("0.000", culture);
        set
        {
            if (Decimal.TryParse(value, style, culture, out var number))
            {
                approvalRating = Math.Round(number, 3);
            }
        }
    }
}

Na próxima unidade, você aplica o que aprendeu sobre a vinculação de controles aos dados.