文本框的 Blazor @onkeypress 在 IE 中不起作用？答案

【问题标题】：Blazor @onkeypress of a text box doesn't work in IE?文本框的 Blazor @onkeypress 在 IE 中不起作用？
【发布时间】：2020-02-08 10:10:13
【问题描述】：

我正在创建一个服务器端的 blazor 应用程序并拥有以下 razor 文件。

@page "/test"
@using BlazorApp2.Data
@inject ViewModels.TestViewModel VM

<div>
    Search:
    <input id="search" type="text" @bind="VM.Search" @onkeypress="@VM.SearchChanged" />
    <span>@VM.Search</span>
</div>

ViewModels.TestViewModel：

public string Search { get; set; }

public async void SearchChanged()
{
    // Break point set but not hit?
}

在 IE 中输入文本框“搜索”没有达到SearchChanged() 中设置的断点？它适用于 Chrome。

【问题讨论】：

我为此做了一个fiddle，效果很好
事实证明它只在IE中不起作用。
服务器端 Blazor 可以使用 polyfill 在 IE11 中工作。阅读更多here.

标签： c# razor blazor blazor-server-side

【解决方案1】：

我认为您可能会错过在 Startup.ConfigureServices 中注册 TestViewModel

您可以访问此链接：https://docs.microsoft.com/en-us/aspnet/core/tutorials/build-your-first-blazor-app?view=aspnetcore-3.0 以了解更多信息。

如果您希望 Blazor 在 IE11 上运行，请添加 Polyfills。访问此链接：https://github.com/Daddoon/Blazor.Polyfill 以了解更多信息。

你可以在这里下载 Polyfills：https://github.com/Daddoon/Blazor.Polyfill/releases

以下是您提出问题后的示例。希望能帮到你，我的朋友:))

1) 模型

namespace BlazorApp.Models
{
    public class TestViewModel
    {
        public string Search { get; set; }

        public async void SearchChanged()
        {
            // Break point set but not hit?
            Search = "Hello world";            
        }
    }
}

2) 在启动类中

public void ConfigureServices(IServiceCollection services)
        {
            services.AddRazorPages();
            services.AddServerSideBlazor();
            services.AddSingleton<WeatherForecastService>();
            services.AddSingleton<Models.TestViewModel>();
        }

3)查看

@page "/testview"
@inject Models.TestViewModel VM

<h1>Test Blazor</h1>
<div>
    Search:
    <input id="search" type="text" @bind="VM.Search" @onkeypress="@VM.SearchChanged" />
    <span>@VM.Search</span>
</div>

4) 在 _Host 视图中

@page "/"
@namespace BlazorApp.Pages
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>BlazorApp</title>
    <base href="~/" />
    <link rel="stylesheet" href="css/bootstrap/bootstrap.min.css" />
    <link href="css/site.css" rel="stylesheet" />
</head>
<body>
    <app>
        @(await Html.RenderComponentAsync<App>(RenderMode.ServerPrerendered))
    </app>

    <script src="~/scripts/blazor.polyfill.min.js"></script>
    <script src="_framework/blazor.server.js"></script>
</body>
</html>

【讨论】：

@inject Models.TestViewModel VM 会在运行时破坏组件，如果他忘记注册它，组件将不会渲染。所以这不可能。
@Tewr，是的，VM 已注册。
事实证明它不能在 IE 中运行。它适用于 Chrome。
@ca9163d9：抱歉我的朋友回复晚了。按照 Tewr 的建议，您需要添加 polyfill 才能在 IE (11) 上运行 Blazor。我更新了我的解决方案。请检查一下。