代码之家 › 专栏 › 技术社区 › ca9163d9

文本框的Blazor@onkeypress在键入后不运行?

blazor-server-side blazor razor c#

ca9163d9 · 技术社区 · 6 年前

我正在创建一个服务器端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?
}

SearchChanged() 什么时候在IE?它在铬合金中工作。

0 回复 | 直到 6 年前

Tomato32 6 年前

我想您可能会错过在中注册TestViewModelStartup.ConfigureServices

https://docs.microsoft.com/en-us/aspnet/core/tutorials/build-your-first-blazor-app?view=aspnetcore-3.0 参考更多。

如果你想在IE11上运行Blazor,请添加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";            
        }
    }
}

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>

@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>

推荐文章

SpaceCowboy74 Mohammad Aghazadeh · 使用Fluent Validation比较数组中的值

8 月前