主页 / coding / 问题 / 78912369
Accepted
Picard78
Asked: 2024-08-26 06:10:27 +0800 CST

onkeyup 事件不会在 Blazor Web 应用程序中触发，但会在 Blazor 服务器应用程序中触发

  • 772

当我在 Blazor Server App 中运行以下代码时，代码按预期执行。但是，当我在 Blazor Web App 中运行相同的代码时，执行永远不会进入 ReverseText 方法。在 Blazor Web App 中，我选择了交互式渲染模式 => 服务器，以确保这不是原因。

是否可以解释为什么代码在 Blazor Server App 中执行，但不在 Blazor Web App 中执行？

谢谢

 @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);
    }
}

Blazor 项目

blazor

2 个回答

  1. Best Answer

    经过我的测试，我也创建了一个Blazor web app，并server在Interactive Render Mode选择中选择了模式，项目创建完成后需要配置对应的渲染模式即可InteractiveServer。

    如果您在创建每页时选择为页面渲染，则组件将使用静态服务器端渲染（静态 SSR）。组件被渲染到响应流，并且不启用交互性。因此，您可以使用@rendermode InteractiveServer将渲染模式配置为 InteractiveServer。

    例如：

    在此处输入图片描述

    @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);
    }
}

    在此处输入图片描述

    如果使用全局渲染的话，则不需要额外配置，默认会将渲染模式配置为InteractiveServer，在app.razor的配置中可以看到， <Routes @rendermode="InteractiveServer" />这<HeadOutlet @rendermode="InteractiveServer" /> 会将整个应用程序的渲染模式指定为InteractiveServer。

    例子：

    在此处输入图片描述

    成分：

    @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);
    }
}

    在此处输入图片描述

    关于渲染模式配置的更多信息，可以参考这篇文档。

    • 1

  2. 我猜您所选的交互位置是按页面/组件。

    如果您想要完整的 Blazor Server 功能，请使用Blazor Web App模板创建解决方案并选择

    • 交互性 => InteractiveServer
    • 互动地点 =>全球
    • 0

相关问题