ASP.NET Core Blazor ligação de dados

Este artigo explica os recursos de vinculação de dados para componentes Razor e elementos DOM em aplicativos Blazor.

Funcionalidades de vinculação

Razor componentes fornecem recursos de vinculação de dados com o atributo de diretiva @bindRazor com um campo, propriedade ou valor de expressão Razor.

O exemplo a seguir associa:

• Um valor de um elemento <input> para o campo de C# inputValue.
• Um valor de elemento <input> secundário para a propriedade InputValue de C#.

Quando um elemento <input> perde o foco, o seu campo vinculado ou propriedade é atualizado.

Bind.razor:

@page "/bind"

<PageTitle>Bind</PageTitle>

<h1>Bind Example</h1>

<p>
    <label>
        inputValue: 
        <input @bind="inputValue" />
    </label>
</p>

<p>
    <label>
        InputValue: 
        <input @bind="InputValue" />
    </label>
</p>

<ul>
    <li><code>inputValue</code>: @inputValue</li>
    <li><code>InputValue</code>: @InputValue</li>
</ul>

@code {
    private string? inputValue;

    private string? InputValue { get; set; }
}

A caixa de texto é atualizada na interface do usuário somente quando o componente é renderizado, não em resposta à alteração do valor do campo ou da propriedade. Como os componentes se renderizam após a execução do código do manipulador de eventos, as atualizações de campo e propriedade geralmente são refletidas na interface do usuário imediatamente após um manipulador de eventos ser acionado.

Como demonstração de como a vinculação de dados se compõe em HTML, o exemplo a seguir vincula a propriedade InputValue aos atributos <input> e value do segundo elemento onchange (change). O segundo elemento <input> no exemplo a seguir é uma demonstração de conceito e não se destina a sugerir como você deve vincular dados em Razor componentes.

BindTheory.razor:

@page "/bind-theory"

<PageTitle>Bind Theory</PageTitle>

<h1>Bind Theory Example</h1>

<p>
    <label>
        Normal Blazor binding: 
        <input @bind="InputValue" />
    </label>
</p>

<p>
    <label>
        Demonstration of equivalent HTML binding: 
        <input value="@InputValue" @onchange="@((ChangeEventArgs __e) =>
            InputValue = __e?.Value?.ToString())" />
    </label>
</p>

<p>
    <code>InputValue</code>: @InputValue
</p>

@code {
    private string? InputValue { get; set; }
}

Quando o componente BindTheory é renderizado, a value do elemento <input> de demonstração HTML vem da propriedade InputValue. Quando o usuário insere um valor na caixa de texto e altera o foco do elemento, o evento onchange é acionado e a propriedade InputValue é definida como o valor alterado. Na realidade, a execução de código é mais complexa porque @bind lida com casos em que conversões de tipo são realizadas. Em geral, @bind associa o valor atual de uma expressão ao atributo value do <input> e manipula as alterações usando o manipulador registrado.

Associe uma propriedade ou campo a outros eventos do DOM incluindo um atributo @bind:event="{EVENT}" com um evento do DOM para o espaço reservado {EVENT}. O exemplo a seguir vincula a propriedade InputValue ao valor do elemento <input> quando o evento oninput do elemento (input) é acionado. Ao contrário do evento onchange (change), que é acionado quando o elemento perde o foco, oninput (input) é acionado quando o valor da caixa de texto muda.

Page/BindEvent.razor:

@page "/bind-event"

<PageTitle>Bind Event</PageTitle>

<h1>Bind Event Example</h1>

<p>
    <label>
        InputValue: 
        <input @bind="InputValue" @bind:event="oninput" />
    </label>
    
</p>

<p>
    <code>InputValue</code>: @InputValue
</p>

@code {
    private string? InputValue { get; set; }
}

Para executar lógica assíncrona após a ligação, use @bind:after="{DELEGATE}", onde o espaço reservado {DELEGATE} é um delegado (método) C#. Um delegado C# atribuído não é executado até que o valor associado seja atribuído sincronamente.

Não é suportado o uso de um parâmetro de retorno de chamada de evento (EventCallback/EventCallback<T>) com @bind:after. Em vez disso, passe um método que retorna um Action ou Task para @bind:after.

No exemplo a seguir:

• O <input> de cada elemento value é vinculado ao campo searchText de forma síncrona.
• O método PerformSearch é executado de forma assíncrona:
  • Quando a primeira caixa perde o foco (eventoonchange) depois que o valor é alterado.
  • Após cada pressão de tecla no eventooninput na segunda caixa de texto.
• PerformSearch chama um serviço com um método assíncrono (FetchAsync) para retornar os resultados da pesquisa.

@inject ISearchService SearchService

<input @bind="searchText" @bind:after="PerformSearch" />
<input @bind="searchText" @bind:event="oninput" @bind:after="PerformSearch" />

@code {
    private string? searchText;
    private string[]? searchResult;

    private async Task PerformSearch() => 
        searchResult = await SearchService.FetchAsync(searchText);
}

Exemplos adicionais

BindAfter.razor:

@page "/bind-after"
@using Microsoft.AspNetCore.Components.Forms

<h1>Bind After Examples</h1>

<h2>Elements</h2>

<input type="text" @bind="text" @bind:after="() => { }" />

<input type="text" @bind="text" @bind:after="After" />

<input type="text" @bind="text" @bind:after="AfterAsync" />

<h2>Components</h2>

<InputText @bind-Value="text" @bind-Value:after="() => { }" />

<InputText @bind-Value="text" @bind-Value:after="After" />

<InputText @bind-Value="text" @bind-Value:after="AfterAsync" />

@code {
    private string text = "";

    private void After() {}
    private Task AfterAsync() { return Task.CompletedTask; }
}

Para obter mais informações sobre o componente InputText, consulte componentes de entrada do ASP.NET Core Blazor.

Os componentes suportam a vinculação de dados bidirecional definindo um par de atributos @bind com um modificador :get ou :set. O espaço reservado {PARAMETER} nos exemplos a seguir é usado para vincular um parâmetro de componente:

• @bind:get / @bind-{PARAMETER}:get: Especifica o valor a ser vinculado.
• @bind:set / @bind-{PARAMETER}:set: Especifica um retorno de chamada para quando o valor for alterado.

Os modificadores :get e :set são sempre usados juntos.

Com :get/:set vinculação, você pode reagir a uma alteração de valor antes que ela seja aplicada ao DOM e pode alterar o valor aplicado, se necessário. Considerando que com @bind:event="{EVENT}" vinculação de atributo, onde o espaço reservado {EVENT} é um evento DOM, você recebe a notificação depois que o DOM é atualizado e não há capacidade de modificar o valor aplicado durante a vinculação.

O componente a seguir demonstra a sintaxe dos elementos e do componente usado pelos formulários em cenários síncronos () e assíncronos ().

BindGetSet.razor:

@page "/bind-get-set"
@using Microsoft.AspNetCore.Components.Forms

<h1>Bind Get Set Examples</h1>

<h2>Elements</h2>

<input type="text" @bind:get="text" @bind:set="(value) => { text = value; }" />
<input type="text" @bind:get="text" @bind:set="Set" />
<input type="text" @bind:get="text" @bind:set="SetAsync" />

<h2>Components</h2>

<InputText @bind-Value:get="text" @bind-Value:set="(value) => { text = value; }" />
<InputText @bind-Value:get="text" @bind-Value:set="Set" />
<InputText @bind-Value:get="text" @bind-Value:set="SetAsync" />

@code {
    private string text = string.Empty;

    private void Set(string value)
    {
        text = value;
    }

    private Task SetAsync(string value)
    {
        text = value;
        return Task.CompletedTask;
    }
}

Para obter mais informações sobre o componente InputText, consulte componentes de entrada do ASP.NET Core Blazor.

Para obter outro exemplo de uso de @bind:get e @bind:set, consulte a seção Vincular em mais de dois componentes mais adiante neste artigo.

Razor vinculação de atributo diferencia maiúsculas de minúsculas:

• @bind, @bind:evente @bind:after são válidos.
• @Bind / @bind:Event / @bind:aftEr (letras maiúsculas) ou @BIND/@BIND:EVENT/@BIND:AFTER (todas as letras maiúsculas) são inválidas.

Use modificadores @bind:get/@bind:set e evite os manipuladores de eventos para a vinculação bidirecional dos dados

Não é possível implementar a vinculação de dados bidirecional com um manipulador de eventos. Use modificadores de @bind:get/@bind:set para vinculação de dados bidirecional.

❌ Considere a seguinte abordagem disfuncional para vinculação de dados bidirecional usando um manipulador de eventos:

<p>
    <input value="@inputValue" @oninput="OnInput" />
</p>

<p>
    <code>inputValue</code>: @inputValue
</p>

@code {
    private string? inputValue;

    private void OnInput(ChangeEventArgs args)
    {
        var newValue = args.Value?.ToString() ?? string.Empty;

        inputValue = newValue.Length > 4 ? "Long!" : newValue;
    }
}

O manipulador de eventos OnInput atualiza o valor de inputValue para Long! depois que um quarto caractere é fornecido. No entanto, o usuário pode continuar adicionando caracteres ao valor do elemento na interface do usuário. O valor de inputValue não é associado ao valor do elemento a cada vez que uma tecla é pressionada. O exemplo anterior só é capaz de ligação de dados unidirecional.

A razão para esse comportamento é que Blazor não está ciente de que seu código pretende modificar o valor de inputValue no manipulador de eventos. Blazor não tenta forçar os valores do elemento DOM e os valores das variáveis .NET a corresponderem, a menos que eles estejam vinculados à sintaxe @bind. Em versões anteriores do Blazor, a vinculação de dados bidirecional é implementada vinculando o elemento a uma propriedade e controlando o valor da propriedade com seu setter. Na .NET 7 ou posterior no ASP.NET Core, a sintaxe dos modificadores @bind:get/@bind:set é usada para implementar a associação de dados bidirecional, como demonstra o próximo exemplo.

✔️ Considere a seguinte abordagem correta usar @bind:get/@bind:set para vinculação de dados bidirecional:

<p>
    <input @bind:event="oninput" @bind:get="inputValue" @bind:set="OnInput" />
</p>

<p>
    <code>inputValue</code>: @inputValue
</p>

@code {
    private string? inputValue;

    private void OnInput(string value)
    {
        var newValue = value ?? string.Empty;

        inputValue = newValue.Length > 4 ? "Long!" : newValue;
    }
}

O uso de modificadores de @bind:get/@bind:set controla o valor subjacente de inputValue via @bind:set e vincula o valor de inputValue ao valor do elemento via @bind:get. O exemplo anterior demonstra a abordagem correta para implementar a vinculação de dados bidirecional.

Vinculação a uma propriedade em C# com acessadores get e set

Acessadores get e set de C# podem ser usados para criar um comportamento de formato de vinculação personalizado, conforme demonstra o seguinte componente DecimalBinding. O componente vincula um decimal positivo ou negativo com até três casas decimais a um elemento <input> por meio de uma propriedade string (DecimalValue).

DecimalBinding.razor:

@page "/decimal-binding"
@using System.Globalization

<PageTitle>Decimal Binding</PageTitle>

<h1>Decimal Binding Example</h1>

<p>
    <label>
        Decimal value (±0.000 format):
        <input @bind="DecimalValue" />
    </label>
</p>

<p>
    <code>decimalValue</code>: @decimalValue
</p>

@code {
    private decimal decimalValue = 1.1M;
    private NumberStyles style = 
        NumberStyles.AllowDecimalPoint | NumberStyles.AllowLeadingSign;
    private CultureInfo culture = CultureInfo.CreateSpecificCulture("en-US");

    private string DecimalValue
    {
        get => decimalValue.ToString("0.000", culture);
        set
        {
            if (Decimal.TryParse(value, style, culture, out var number))
            {
                decimalValue = Math.Round(number, 3);
            }
        }
    }
}

Observação

Em vários componentes, a vinculação bidirecional a uma propriedade com acessadores get/set requer o descarte do Task retornado por EventCallback.InvokeAsync no setter da propriedade. Para vinculação de dados bidirecional, recomendamos o uso de modificadores de @bind:get/@bind:set. Para mais informações, consulte a orientação @bind:get/@bind:set mencionada anteriormente neste artigo.

Para ver um exemplo de como o Task retornado pelo EventCallback.InvokeAsync é descartado no .NET 6 ou anterior antes de @bind:get/@bind:set modificadores se tornarem um recurso de estrutura, consulte o componente NestedChild do Bind em mais de dois componentes seção na versão .NET 6 deste artigo.

Seleção de várias opções com os elementos <select>

A vinculação suporta a seleção de opção multiple com elementos <select>. O evento @onchange fornece uma matriz dos elementos selecionados por meio de argumentos de evento (ChangeEventArgs). O valor deve ser vinculado a um tipo de matriz.

BindMultipleInput.razor:

@page "/bind-multiple-input"

<h1>Bind Multiple <code>input</code>Example</h1>

<p>
    <label>
        Select one or more cars: 
        <select @onchange="SelectedCarsChanged" multiple>
            <option value="audi">Audi</option>
            <option value="jeep">Jeep</option>
            <option value="opel">Opel</option>
            <option value="saab">Saab</option>
            <option value="volvo">Volvo</option>
        </select>
    </label>
</p>

<p>
    Selected Cars: @string.Join(", ", SelectedCars)
</p>

<p>
    <label>
        Select one or more cities: 
        <select @bind="SelectedCities" multiple>
            <option value="bal">Baltimore</option>
            <option value="la">Los Angeles</option>
            <option value="pdx">Portland</option>
            <option value="sf">San Francisco</option>
            <option value="sea">Seattle</option>
        </select>
    </label>
</p>

<span>
    Selected Cities: @string.Join(", ", SelectedCities)
</span>

@code {
    public string[] SelectedCars { get; set; } = [];
    public string[] SelectedCities { get; set; } = [ "bal", "sea" ];

    private void SelectedCarsChanged(ChangeEventArgs e)
    {
        if (e.Value is not null)
        {
            SelectedCars = (string[])e.Value;
        }
    }
}

Para obter informações sobre como são tratados os valores de cadeias de caracteres vazias e null na vinculação de dados, consulte a secção opções de elementos de vinculação <select> para valores de objeto C# null.

Vinculando opções de elemento <select> a valores de null de objeto C#

Não há nenhuma maneira sensata de representar um valor de opção de elemento <select> como um objeto C# null valor, porque:

• Os atributos HTML não podem ter valores null. O equivalente mais próximo de null em HTML é a ausência do atributo HTML value do elemento <option>.
• Ao selecionar um <option> sem atributo value, o navegador trata o valor como o conteúdo de texto do elemento do <option>.

A estrutura Blazor não tenta suprimir o comportamento padrão porque envolveria:

• Criação de uma cadeia de soluções alternativas de casos especiais no framework.
• Quebrando as alterações no comportamento da estrutura atual.

O equivalente null mais plausível em HTML é uma cadeia de caracteres vazia value. A estrutura Blazor lida com transformações de null para cadeia de caracteres vazia com a vinculação bidirecional ao valor de um <select>.

Valores não analisáveis

Quando um usuário fornece um valor não analisável para um elemento ligado a dados, o valor não analisável é automaticamente revertido para seu valor anterior quando o evento bind é acionado.

Considere o componente a seguir, onde um elemento <input> está vinculado a um tipo de int com um valor inicial de 123.

UnparsableValues.razor:

@page "/unparsable-values"

<PageTitle>Unparsable Values</PageTitle>

<h1>Unparsable Values Example</h1>

<p>
    <label>
        inputValue: 
        <input @bind="inputValue" />
    </label>
    
</p>

<p>
    <code>inputValue</code>: @inputValue
</p>

@code {
    private int inputValue = 123;
}

A vinculação aplica-se ao evento onchange do elemento. Se o usuário atualizar o valor da entrada da caixa de texto para 123.45 e alterar o foco, o valor do elemento será revertido para 123 quando onchange for acionado. Quando o valor 123.45 é rejeitado em favor do valor original de 123, o usuário entende que seu valor não foi aceito.

Para o evento oninput (@bind:event="oninput"), uma reversão de valor ocorre após qualquer pressionamento de tecla que introduz um valor não analisável. Ao direcionar o evento oninput com um tipo vinculado a int, um utilizador é impedido de digitar um caractere de ponto (.). Um caractere de ponto (.) é imediatamente removido, para que o usuário receba feedback imediato de que apenas números inteiros são permitidos. Há cenários em que reverter o valor no evento oninput não é ideal, como quando o utilizador deve poder limpar um valor de <input> não analisável. As alternativas incluem:

• Não use o evento oninput. Use o evento onchange padrão, onde um valor inválido não é revertido até que o elemento perca o foco.
• Vincular a um tipo anulável, como int? ou string e usar modificadores de @bind:get/@bind:set (descritos anteriormente neste artigo) ou vincular a uma propriedade com get personalizado e set lógica de acesso para manipular entradas inválidas.
• Use um componente de entrada , como InputNumber<TValue> ou InputDate<TValue>, com validação de formulário . Os componentes de entrada, juntamente com os componentes de validação de formulário, fornecem suporte interno para gerenciar entradas inválidas:
  • Permitir que o usuário forneça entradas inválidas e receba erros de validação no EditContextassociado.
  • Exiba erros de validação na interface do usuário sem interferir com o usuário inserindo dados adicionais do formulário da Web.

Formatar cadeias de caracteres

A associação de dados funciona com uma única cadeia de caracteres de formato DateTime usando @bind:format="{FORMAT STRING}", onde o espaço reservado {FORMAT STRING} é a cadeia de caracteres de formato. Outras expressões de formato, como formatos de moeda ou número, não estão disponíveis no momento, mas podem ser adicionadas em uma versão futura.

DateBinding.razor:

@page "/date-binding"

<PageTitle>Date Binding</PageTitle>

<h1>Date Binding Example</h1>

<p>
    <label>
        <code>yyyy-MM-dd</code> format:
        <input @bind="startDate" @bind:format="yyyy-MM-dd" />
    </label>
</p>

<p>
    <code>startDate</code>: @startDate
</p>

@code {
    private DateTime startDate = new(2020, 1, 1);
}

No código anterior, o tipo de campo do elemento <input> (atributotype) assume como padrão text.

Há suporte para System.DateTime e System.DateTimeOffset anuláveis:

private DateTime? date;
private DateTimeOffset? dateOffset;

Especificar um formato para o tipo de campo date não é recomendado porque Blazor tem suporte interno para formatar datas. Apesar da recomendação, utilize apenas o formato de data yyyy-MM-dd para que a ligação funcione corretamente, caso seja fornecido um formato com o tipo de campo date.

<input type="date" @bind="startDate" @bind:format="yyyy-MM-dd">

Vinculação com parâmetros de componentes

Um cenário comum é a vinculação de uma propriedade de um componente filho a uma propriedade em seu componente pai. Esse cenário é chamado de de ligação encadeada porque vários níveis de ligação ocorrem simultaneamente.

Não é possível implementar ligações encadeadas com sintaxe @bind em um componente filho. Um manipulador de eventos e um valor devem ser especificados separadamente para permitir a atualização da propriedade no componente pai a partir do filho. O componente pai ainda utiliza a sintaxe @bind para configurar a vinculação de dados com o componente filho.

O componente ChildBind a seguir tem um parâmetro de componente Year e um EventCallback<TValue>. Por convenção, o EventCallback<TValue> para o parâmetro deve ser nomeado como o nome do parâmetro do componente com um sufixo "Changed". A sintaxe de nomenclatura é {PARAMETER NAME}Changed, onde o marcador de posição {PARAMETER NAME} é o nome do parâmetro. No exemplo a seguir, o EventCallback<TValue> é chamado YearChanged.

EventCallback.InvokeAsync invoca o delegado associado à associação com o argumento fornecido e envia uma notificação de evento para a propriedade alterada.

ChildBind.razor:

<div class="card bg-light mt-3" style="width:18rem ">
    <div class="card-body">
        <h3 class="card-title">ChildBind Component</h3>
        <p class="card-text">
            Child <code>Year</code>: @Year
        </p>
        <button @onclick="UpdateYearFromChild">Update Year from Child</button>
    </div>
</div>

@code {
    [Parameter]
    public int Year { get; set; }

    [Parameter]
    public EventCallback<int> YearChanged { get; set; }

    private async Task UpdateYearFromChild() => 
        await YearChanged.InvokeAsync(Random.Shared.Next(1950, 2021));
}

Para obter mais informações sobre eventos e EventCallback<TValue>, consulte a seção EventCallback do ASP.NET Core Blazor tratamento de eventos no artigo.

No componente Parent1 seguinte, o campo year está vinculado ao parâmetro Year do componente filho. O parâmetro Year é vinculável porque tem um evento YearChanged complementar que corresponde ao tipo do parâmetro Year.

Parent1.razor:

@page "/parent-1"

<PageTitle>Parent 1</PageTitle>

<h1>Parent Example 1</h1>

<p>Parent <code>year</code>: @year</p>

<button @onclick="UpdateYear">Update Parent <code>year</code></button>

<ChildBind @bind-Year="year" />

@code {
    private int year = 1979;

    private void UpdateYear() => year = Random.Shared.Next(1950, 2021);
}

A vinculação de parâmetros de componentes também pode acionar eventos @bind:after. No exemplo a seguir, o método YearUpdated é executado de forma assíncrona após vincular o parâmetro Year componente.

<ChildBind @bind-Year="year" @bind-Year:after="YearUpdated" />

@code {
    ...

    private async Task YearUpdated()
    {
        ... = await ...;
    }
}

Por convenção, uma propriedade pode ser vinculada a um manipulador de eventos correspondente ao incluir um atributo @bind-{PROPERTY}:event atribuído ao manipulador, em que o marcador de posição {PROPERTY} é a propriedade. <ChildBind @bind-Year="year" /> equivale a escrever:

<ChildBind @bind-Year="year" @bind-Year:event="YearChanged" />

Num exemplo mais real e sofisticado, o seguinte componente PasswordEntry:

• Define o valor de um elemento <input> como um campo password.
• Expõe as alterações de uma propriedade Password a um componente pai com um EventCallback que passa o valor atual do campo password do filho como argumento.
• Usa o evento onclick para disparar o método ToggleShowPassword. Para obter mais informações, consulte Blazormanipulação de eventos .

Advertência

Não armazene segredos de aplicativos, cadeias de conexão, credenciais, senhas, números de identificação pessoal (PINs), código C#/.NET privado ou chaves/tokens privados no código do lado do cliente, que é sempre inseguro. Em ambientes de teste/preparação e produção, o código Blazor do lado do servidor e as APIs da Web devem usar fluxos de autenticação seguros que evitem a manutenção de credenciais no código do projeto ou nos arquivos de configuração. Fora dos testes de desenvolvimento local, recomendamos evitar o uso de variáveis de ambiente para armazenar dados confidenciais, pois as variáveis de ambiente não são a abordagem mais segura. Para testes de desenvolvimento local, a ferramenta Secret Manager é recomendada para proteger dados confidenciais. Para obter mais informações, consulte Manter com segurança dados confidenciais e credenciais.

PasswordEntry.razor:

<div class="card bg-light mt-3" style="width:22rem ">
    <div class="card-body">
        <h3 class="card-title">Password Component</h3>
        <p class="card-text">
            <label>
                Password:
                <input @oninput="OnPasswordChanged" required type="password"
                    value="@password" />
            </label>
        </p>
    </div>
</div>

@code {
    private string? password;

    [Parameter]
    public string? Password { get; set; }

    [Parameter]
    public EventCallback<string> PasswordChanged { get; set; }

    private async Task OnPasswordChanged(ChangeEventArgs e)
    {
        password = e?.Value?.ToString();

        await PasswordChanged.InvokeAsync(password);
    }
}

O componente PasswordEntry é usado em outro componente, como o exemplo de componente PasswordBinding a seguir.

PasswordBinding.razor:

@page "/password-binding"

<PageTitle>Password Binding</PageTitle>

<h1>Password Binding Example</h1>

<PasswordEntry @bind-Password="password" />

<p>
    <code>password</code>: @password
</p>

@code {
    private string password = "Not set";
}

Quando o componente PasswordBinding é inicialmente renderizado, o valor password de Not set é exibido na interface do usuário. Após a renderização inicial, o valor de password reflete as alterações feitas no valor do parâmetro do componente Password no componente PasswordEntry.

Observação

O exemplo anterior vincula a senha unidirecional do componente filho PasswordEntry ao componente pai PasswordBinding. A vinculação bidirecional não é um requisito neste cenário se o objetivo for que o aplicativo tenha um componente de entrada de senha compartilhada para reutilização no aplicativo que simplesmente passe a senha para o pai. Para obter uma abordagem que permite a vinculação bidirecional sem gravar diretamente no parâmetro do componente filho, consulte o exemplo de componente NestedChild na seção Vincular em mais de dois componentes deste artigo.

Efetuar verificações ou capturar erros no manipulador. O componente PasswordEntry revisado a seguir fornece feedback imediato ao usuário se um espaço for usado no valor da senha.

PasswordEntry.razor:

<div class="card bg-light mt-3" style="width:22rem ">
    <div class="card-body">
        <h3 class="card-title">Password Component</h3>
        <p class="card-text">
            <label>
                Password:
                <input @oninput="OnPasswordChanged" required type="password"
                    value="@password" />
            </label>
            <span class="text-danger">@validationMessage</span>
        </p>
    </div>
</div>

@code {
    private string? password;
    private string? validationMessage;

    [Parameter]
    public string? Password { get; set; }

    [Parameter]
    public EventCallback<string> PasswordChanged { get; set; }

    private Task OnPasswordChanged(ChangeEventArgs e)
    {
        password = e?.Value?.ToString();

        if (password != null && password.Contains(' '))
        {
            validationMessage = "Spaces not allowed!";

            return Task.CompletedTask;
        }
        else
        {
            validationMessage = string.Empty;

            return PasswordChanged.InvokeAsync(password);
        }
    }
}

Vincular entre mais de dois componentes

Você pode vincular parâmetros por meio de qualquer número de componentes aninhados, mas deve respeitar o fluxo unidirecional de dados:

• As notificações de alteração fluem pela hierarquia.
• Novos valores de parâmetro fluir para baixo na hierarquia.

Uma abordagem comum e recomendada é armazenar apenas os dados subjacentes no componente pai para evitar qualquer confusão sobre qual estado deve ser atualizado, conforme mostrado no exemplo a seguir.

Parent2.razor:

@page "/parent-2"

<PageTitle>Parent 2</PageTitle>

<h1>Parent Example 2</h1>

<p>Parent Message: <b>@parentMessage</b></p>

<p>
    <button @onclick="ChangeValue">Change from Parent</button>
</p>

<NestedChild @bind-ChildMessage="parentMessage" />

@code {
    private string parentMessage = "Initial value set in Parent";

    private void ChangeValue() => parentMessage = $"Set in Parent {DateTime.Now}";
}

No seguinte componente NestedChild, o componente NestedGrandchild:

• Atribui o valor de ChildMessage a GrandchildMessage com a sintaxe @bind:get.
• Atualiza GrandchildMessage quando ChildMessageChanged é executado com sintaxe @bind:set.

Antes do lançamento do .NET 7, a ligação bidirecional entre componentes usa acessadores get/set com uma terceira propriedade que descarta o Task retornado por EventCallback.InvokeAsync em seu setter. Para ver um exemplo dessa abordagem para o .NET 6 ou anterior antes de @bind:get/@bind:set modificadores se tornarem um recurso de estrutura, consulte o componente NestedChild desta seção na versão .NET 6 deste artigo.

A razão para evitar alterar diretamente o valor de um parâmetro de componente é que isso efetivamente altera o estado do componente pai a partir do componente filho. Isso pode interferir no Blazorprocesso de deteção de alterações do e acionar ciclos de renderização extras, porque os parâmetros devem ser entradas, não devem ser estado mutável. Em cenários encadeados em que os dados são passados entre componentes, gravar diretamente em um parâmetro de componente pode levar a efeitos não intencionais, como rerenderizações infinitas que travam o aplicativo.

@bind:get / @bind:set A sintaxe permite-lhe:

• Evite criar uma propriedade extra que só existe para encaminhar valores e retornos de chamada entre componentes encadeados, o que era necessário antes do lançamento do .NET 7.
• Intercepte e transforme valores antes de serem aplicados.
• Mantenha o parâmetro imutável na criança, enquanto ainda suporta a ligação bidirecional.

Uma analogia útil é o elemento <input> de HTML que rastreia os seguintes estados de valor:

• defaultValue: Como um parâmetro de componente recebido do pai.
• value: Como o estado atual dentro do componente.

Se você alterar defaultValue diretamente, estará quebrando o contrato. Em vez disso, esses estados são mantidos separados e somente o value é atualizado por meios controlados após a renderização inicial do elemento. O mesmo raciocínio se aplica aos parâmetros do componente, e o uso @bind:get/@bind:set da sintaxe evita possíveis efeitos de renderização não intencionais associados à gravação diretamente nos parâmetros do componente.

NestedChild.razor:

<div class="border rounded m-1 p-1">
    <h2>Child Component</h2>

    <p>Child Message: <b>@ChildMessage</b></p>

    <p>
        <button @onclick="ChangeValue">Change from Child</button>
    </p>

    <NestedGrandchild @bind-GrandchildMessage:get="ChildMessage" 
        @bind-GrandchildMessage:set="ChildMessageChanged" />
</div>

@code {
    [Parameter]
    public string? ChildMessage { get; set; }

    [Parameter]
    public EventCallback<string?> ChildMessageChanged { get; set; }

    private async Task ChangeValue() => 
        await ChildMessageChanged.InvokeAsync($"Set in Child {DateTime.Now}");
}

NestedGrandchild.razor:

<div class="border rounded m-1 p-1">
    <h3>Grandchild Component</h3>

    <p>Grandchild Message: <b>@GrandchildMessage</b></p>

    <p>
        <button @onclick="ChangeValue">Change from Grandchild</button>
    </p>
</div>

@code {
    [Parameter]
    public string? GrandchildMessage { get; set; }

    [Parameter]
    public EventCallback<string> GrandchildMessageChanged { get; set; }

    private async Task ChangeValue() => 
        await GrandchildMessageChanged.InvokeAsync(
            $"Set in Grandchild {DateTime.Now}");
}

Para obter uma abordagem alternativa adequada para compartilhar dados na memória e entre componentes que não estão necessariamente aninhados, consulte Visão geral do gerenciamento de estado no ASP.NET CoreBlazor.

Campo vinculado ou árvore de expressão de propriedade

Para facilitar interações mais aprofundadas com uma ligação, o Blazor permite a captura da árvore de expressão de um campo ou propriedade vinculada. Isso é conseguido definindo uma propriedade com o campo ou nome da propriedade sufixado com Expression. Para qualquer campo ou propriedade denominada {FIELD OR PROPERTY NAME}, a propriedade de árvore de expressão correspondente é denominada {FIELD OR PROPERTY NAME}Expression.

O componente ChildParameterExpression a seguir identifica o modelo e o nome do campo da expressão Year. Um FieldIdentifier, que é usado para obter o modelo e o nome do campo, identifica exclusivamente um único campo que pode ser editado. Isso pode corresponder a uma propriedade em um objeto de modelo ou pode ser qualquer outro valor nomeado. O uso da expressão de um parâmetro é útil ao criar componentes de validação personalizados, que não são cobertos pela documentação do Microsoft Blazor, mas são abordados por vários recursos de terceiros.

ChildParameterExpression.razor:

@using System.Linq.Expressions

<ul>
    <li>Year model: @yearField.Model</li>
    <li>Year field name: @yearField.FieldName</li>
</ul>

@code {
    private FieldIdentifier yearField;

    [Parameter]
    public int Year { get; set; }

    [Parameter]
    public EventCallback<int> YearChanged { get; set; }

    [Parameter]
    public Expression<Func<int>> YearExpression { get; set; } = default!;

    protected override void OnInitialized() => 
        yearField = FieldIdentifier.Create(YearExpression);
}

Parent3.razor:

@page "/parent-3"

<PageTitle>Parent 3</PageTitle>

<h1>Parent Example 3</h1>

<p>Parent <code>year</code>: @year</p>

<ChildParameterExpression @bind-Year="year" />

@code {
    private int year = 1979;
}

Recursos adicionais

• Razor
• Visão geral dos formulários do ASP.NET Core Blazor
• Vinculação a botões de opção em um formulário
• Vinculando opções de InputSelect a valores de null de objeto C#
• ASP.NET Tratamento de eventos de Blazor principal: EventCallback seção
• Blazor exemplos de repositório GitHub (dotnet/blazor-samples) (como fazer o download)