Início / coding / Perguntas / 79542108
Accepted
Sam
Asked: 2025-03-29 01:51:29 +0800 CST

bind:after não dispara após selecionar uma opção no aplicativo Blazor WASM

  • 772

Tenho um simples selectno meu aplicativo Blazor WASM Standalone (visando .NET 9) e quero executar alguma ação depois que o usuário seleciona uma opção. Entendo que para asyncchamadas, a Microsoft agora recomenda usar bind:after.

Estou seguindo este vídeo e fazendo exatamente o que ele faz em seu tutorial, mas no meu caso não atinjo o ponto de interrupção que coloco no DoSomething()método no meu código. O que estou fazendo errado aqui?

<div>
    <select @bind="SelectedState" @bind:after="DoSomething">
        <option value="">Please select one</option>
        <option value="AK">Alaska</option>
        <option value="MT">Montana</option>
        <option value="WY">Wyoming</option>
    </select>
</div>

@code {

    private string SelectedState;

    private async Task DoSomething()
    {
        var userSelected = SelectedState; // Have a break point here but don't hit it
    }
}
asp.net-core

1 respostas

  1. Best Answer

    A pergunta é um pouco enganosa, o que me levou ao erro na minha resposta inicial. Ler a resposta e os comentários agora deletados de @NickPattman me colocou no caminho certo.

    O problema não é que o evento não esteja disparando. Ele está. É que o breakpoint está sendo ignorado pelo depurador WASM quando o evento de alteração é acionado por um clique do mouse. O problema não existe no Server.

    O mais estranho é que funciona se você usar as setas para cima e para baixo do teclado para alterar o valor, o que é uma solução alternativa se você precisar que o ponto de interrupção seja atingido!

    Então não é um problema de código [o evento funciona e dispara], é um problema estranho de depurador. Foi relatado, como referenciado por @NickPattman, mas até agora não foi resolvido.

    https://github.com/dotnet/aspnetcore/issues/60018

    Para registro, o @bind:afternão é realmente um evento separado. O compilador Razor cria código inline anexado ao OnChangeevento assim:

        private Task OnChangeHandler(string __value)
    {
        SelectedState = __value;
        return Microsoft.AspNetCore.Components.CompilerServices.RuntimeHelpers.InvokeAsynchronousDelegate(
            callback: DoSomethingAsync);
    }

    Resposta original

    Não tenho certeza de como você configurou seu aplicativo, mas seu código deve funcionar.

    Observação: se você estiver pré-renderizando, a página ficará "estática" durante o período inicial de renderização no lado do servidor.

    Aqui está minha página de demonstração:

    @page "/"

<PageTitle>Home</PageTitle>

<h1>Hello, world!</h1>

Welcome to your new app.

<div>
    <select @bind="SelectedState" @bind:after="DoSomething">
        @if (SelectedState is null)
        {
            <option selected disabled value="">Please select one</option>
        }
        <option value="AK">Alaska</option>
        <option value="MT">Montana</option>
        <option value="WY">Wyoming</option>
    </select>
</div>

<div class="bg-dark text-white m-2 p-2">
    <pre>Value: @_message </pre>
</div>

@code {
    private string? SelectedState = null;
    private string? _message;

    private async Task DoSomething()
    {
        await Task.Yield();
        _message = SelectedState; // Have a break point here but don't hit it
    }
}

    O repositório de demonstração está aqui: https://github.com/ShaunCurtis/SO79542108

    insira a descrição da imagem aqui

    • 3

relate perguntas