Início / coding / Perguntas / 78912369
Accepted
Picard78
Asked: 2024-08-26 06:10:27 +0800 CST

O evento onkeyup não é acionado em um aplicativo Web Blazor, mas é acionado em um aplicativo Blazor Server

  • 772

Quando executo o código abaixo em um aplicativo Blazor Server, o código é executado conforme o esperado. No entanto, quando executo o mesmo código em um Blazor Web App, a execução nunca entra no método ReverseText. No Blazor Web App selecionei Interactive Render Mode => Server apenas para garantir que essa não era a causa.

Existe uma explicação de por que o código é executado no Blazor Server App, mas não no Blazor Web App?

Obrigado

 @page "/"

<div class="form-group row">
    <label for="name">Contact: </label>
    <input type="text" @bind="strInput" @onkeyup="ReverseText" />
</div>

<p>Reversed: @strRevInput</p>

@code {
    private string strInput = "";
    private string strRevInput = "Rev";

    private void ReverseText()
    {
        strRevInput = ReverseString(strInput);
    }

    private string ReverseString(string input)
    {
        char[] charArray = input.ToCharArray();
        Array.Reverse(charArray);
        return new string(charArray);
    }
}

Projetos Blazor

blazor

2 respostas

  1. Best Answer

    Após meu teste, também criei um aplicativo da web Blazor e selecionei servero modo na seleção Modo de renderização interativo. Após a criação do projeto, você precisa configurar o modo de renderização correspondente para InteractiveServer.

    Se você optar por renderizar a página ao criar por página, o componente usará a renderização estática do lado do servidor (SSR estático). O componente é renderizado no fluxo de resposta e a interatividade não está habilitada. Então você pode usar @rendermode InteractiveServerpara configurar o modo de renderização para InteractiveServer.

    Por exemplo:

    insira a descrição da imagem aqui

    @page "/"
@rendermode InteractiveServer
<div class="form-group row">
    <label for="name">Contact: </label>
    <input type="text" @bind="strInput" @onkeyup="ReverseText" />
</div>

<p>Reversed: @strRevInput</p>

@code {
    private string strInput = "";
    private string strRevInput = "Rev";

    private void ReverseText()
    {
        strRevInput = ReverseString(strInput);
    }

    private string ReverseString(string input)
    {
        char[] charArray = input.ToCharArray();
        Array.Reverse(charArray);
        return new string(charArray);
    }
}

    insira a descrição da imagem aqui

    Se você usar a renderização global, não precisará de configuração adicional. Por padrão, o modo de renderização será configurado para InteractiveServer. Na configuração do app.razor, você pode ver <Routes @rendermode="InteractiveServer" />e <HeadOutlet @rendermode="InteractiveServer" /> Isso será atribuído ao modo de renderização InteractiveServer de todo o aplicativo.

    Exemplo:

    insira a descrição da imagem aqui

    Componentes:

    @page "/"

<div class="form-group row">
    <label for="name">Contact: </label>
    <input type="text" @bind="strInput" @onkeyup="ReverseText" />
</div>

<p>Reversed: @strRevInput</p>

@code {
    private string strInput = "";
    private string strRevInput = "Rev";

    private void ReverseText()
    {
        strRevInput = ReverseString(strInput);
    }

    private string ReverseString(string input)
    {
        char[] charArray = input.ToCharArray();
        Array.Reverse(charArray);
        return new string(charArray);
    }
}

    insira a descrição da imagem aqui

    Para obter mais informações sobre a configuração do modo de renderização, você pode consultar este documento .

    • 1

  2. Suponho que você selecionou o local de interatividade como Per Page/Component .

    Se você deseja funcionalidade completa do Blazor Server, crie uma solução usando o modelo Blazor Web App e selecione

    • Interatividade => Servidor Interativo
    • Localização de interatividade => Global
    • 0

relate perguntas