Get best of the week

Blazor WebAssembly 3.2.0 Preview 1现在可用

今天，我们发布了Blazor WebAssembly的新预览更新，其中包含许多出色的新功能和增强功能。

这是此版本中的新增功能：

  • 版本更新为3.2。
  • 简化发布
  • 下载大小改进
  • .NET SignalR客户端支持



开始


要开始使用Blazor WebAssembly 3.2.0 Preview 1，  请安装.NET Core 3.1 SDK  ，然后运行以下命令：

dotnet new -i Microsoft.AspNetCore.Blazor.Templates::3.2.0-preview1.20073.1

就这样！您可以在https://blazor.net上找到其他文档和示例  。

更新现有项目


要将现有的Blazor WebAssembly应用程序从3.1.0预览版4升级到3.2.0预览版1：

  • 将所有指向Microsoft.AspNetCore.Blazor *包的链接更新为3.2.0-preview1.20073.1。
  • 在   Blazor WebAssembly客户端项目的Program.cs中，替换  BlazorWebAssemblyHost.CreateDefaultBuilder() 为  WebAssemblyHostBuilder.CreateDefault()。
  • 通过  调用  将Blazor WebAssembly客户端项目中的根组件注册从  Startup.Configure 移到  Program.csbuilder.RootComponents.Add<TComponent>( )。
  • Blazor WebAssembly  Startup.ConfigureServices  Program.cs   builder.Services.
  •  Startup.cs  Blazor WebAssembly client project.
  • Blazor WebAssembly ASP.NET Core,  Server   app.UseClientSideBlazorFiles<Client.Startup>(...)  app.UseClientSideBlazorFiles<Client.Program>(...).

3.2


在此版本中，我们将Blazor WebAssembly软件包版本升级到3.2，以使其与最近发布的.NET Core 3.1长期支持（LTS）有所区别。没有相应的.NET Core 3.2版本-新版本3.2仅适用于Blazor WebAssembly。 Blazor WebAssembly当前基于.NET Core 3.1，但不继承.NET Core 3.1 LTS的状态。取而代之的是，计划于今年5月发布的Blazor WebAssembly的初始版本将是Current，如“ .NET Core支持策略 ”中所述，“将在下一版本的Current或LTS之后保持三个月” 。 5月的3.2版之后的Blazor WebAssembly的下一个即将发布的版本将是.NET 5。。这意味着在发布.NET 5之后，您将需要将Blazor WebAssembly应用程序升级到.NET 5以支持它。

简化发布


在此版本中，我们简化了Blazor WebAssembly的启动和托管API。最初，Blazor WebAssembly的启动和部署API旨在反映ASP.NET Core中使用的模式，但并非所有概念都相关。更新的API还允许使用一些新方案。

这是新的启动代码在Program.cs中的样子：

public class Program
{
    public static async Task Main(string[] args)
    {
        var builder = WebAssemblyHostBuilder.CreateDefault(args);
        builder.RootComponents.Add<App>("app");

        await builder.Build().RunAsync();
    }
}

Blazor WebAssembly应用程序现在支持Main该应用程序入口点的异步方法。

要创建默认主机，请致电WebAssemblyHostBuilder.CreateDefault()。使用链接器配置根组件和服务；Startup不再需要单独的类。添加了以下示例WeatherService，因此可以通过依赖项注入（DI）使用它：

public class Program
{
    public static async Task Main(string[] args)
    {
        var builder = WebAssemblyHostBuilder.CreateDefault(args);
        builder.Services.AddSingleton<WeatherService>();
        builder.RootComponents.Add<App>("app");

        await builder.Build().RunAsync();
    }
}

创建主机后，您可以在显示任何组件之前从根DI访问服务。如果您需要在显示任何内容之前运行一些初始化逻辑，这将很有用：

public class Program
{
    public static async Task Main(string[] args)
    {
        var builder = WebAssemblyHostBuilder.CreateDefault(args);
        builder.Services.AddSingleton<WeatherService>();
        builder.RootComponents.Add<App>("app");

        var host = builder.Build();

        var weatherService = host.Services.GetRequiredService<WeatherService>();
        await weatherService.InitializeWeatherAsync();

        await host.RunAsync();
    }
}

主机现在还为应用程序提供了中央配置的实例。该配置未填充任何默认数据，但是您可以根据需要在应用程序中填充它。

public class Program
{
    public static async Task Main(string[] args)
    {
        var builder = WebAssemblyHostBuilder.CreateDefault(args);
        builder.Services.AddSingleton<WeatherService>();
        builder.RootComponents.Add<App>("app");

        var host = builder.Build();

        var weatherService = host.Services.GetRequiredService<WeatherService>();
        await weatherService.InitializeWeatherAsync(host.Configuration["WeatherServiceUrl"]);

        await host.RunAsync();
    }
}

下载大小改进


Blazor WebAssembly应用程序在每个程序集中运行.NET IL链接器，以从应用程序中删除未使用的代码。在以前的版本中，仅主框架库被切断。从此版本开始，还修剪了Blazor组件，从而略微减小了大小-大约100 KB。和以前一样，如果您需要禁用绑定，请<BlazorLinkOnBuild>false</BlazorLinkOnBuild> 在项目文件中添加自己的绑定。

.NET SignalR客户端支持


现在，您可以使用.NET SignalR客户端从Blazor WebAssembly应用程序中使用SignalR。

要在Blazor WebAssembly应用程序中尝试SignalR，请执行以下操作：

  1. 创建一个在ASP.NET Core上托管的Blazor WebAssembly应用程序。

    dotnet new blazorwasm -ho -o BlazorSignalRApp
  2. 将ASP.NET Core SignalR客户端软件包添加到Client项目。

    cd BlazorSignalRApp
dotnet add Client package Microsoft.AspNetCore.SignalR.Client
  3. 在Server项目中，添加以下Hub / ChatHub.cs类。

    using System.Threading.Tasks;
using Microsoft.AspNetCore.SignalR;

namespace BlazorSignalRApp.Server.Hubs
{
    public class ChatHub : Hub
    {
        public async Task SendMessage(string user, string message)
        {
            await Clients.All.SendAsync("ReceiveMessage", user, message);
        }
    }
}
  4. 在Server项目中，在方法中添加SignalR服务Startup.ConfigureServices。

    services.AddSignalR();
  5. 还要添加端点ChatHub处Startup.Configure。

    .UseEndpoints(endpoints =>
{
    endpoints.MapDefaultControllerRoute();
    endpoints.MapHub<ChatHub>("/chatHub");
    endpoints.MapFallbackToClientSideBlazor<Client.Program>("index.html");
});
  6. 使用以下标记更新Client项目中的Pages / Index.razor。

    @using Microsoft.AspNetCore.SignalR.Client
@page "/"
@inject NavigationManager NavigationManager

<div>
    <label for="userInput">User:</label>
    <input id="userInput" @bind="userInput" />
</div>
<div class="form-group">
    <label for="messageInput">Message:</label>
    <input id="messageInput" @bind="messageInput" />
</div>
<button @onclick="Send" disabled="@(!IsConnected)">Send Message</button>

<hr />

<ul id="messagesList">
    @foreach (var message in messages)
    {
        <li>@message</li>
    }
</ul>

@code {
    HubConnection hubConnection;
    List<string> messages = new List<string>();
    string userInput;
    string messageInput;

    protected override async Task OnInitializedAsync()
    {
        hubConnection = new HubConnectionBuilder()
            .WithUrl(NavigationManager.ToAbsoluteUri("/chatHub"))
            .Build();

        hubConnection.On<string, string>("ReceiveMessage", (user, message) =>
        {
            var encodedMsg = user + " says " + message;
            messages.Add(encodedMsg);
            StateHasChanged();
        });

        await hubConnection.StartAsync();
    }

    Task Send() => hubConnection.SendAsync("SendMessage", userInput, messageInput);

    public bool IsConnected => hubConnection.State == HubConnectionState.Connected;
}
  7. 创建并运行服务器项目

    cd Server
dotnet run
  8. 在两个单独的浏览器选项卡中打开应用程序，以通过SignalR实时通信。

已知的问题


以下是此版本中的已知问题的列表，这些问题将在以后的更新中修复。

  • 从命令行启动在ASP.NET Core上托管的新Blazor WebAssembly应用程序会生成警告：

    CSC : warning CS8034: Unable to load Analyzer assembly C:\Users\user\.nuget\packages\microsoft.aspnetcore.components.analyzers\3.1.0\analyzers\dotnet\cs\Microsoft.AspNetCore.Components.Analyzers.dll : Assembly with same name is already loaded.
    • 解决方案：可以使用<DisableImplicitComponentsAnalyzers>true</DisableImplicitComponentsAnalyzers> MSBuild 属性忽略或删除此警告  。

评论


我们希望您喜欢此Blazor WebAssembly预览版中的新功能！在GitHub上报告问题时，请告诉我们您的想法。

感谢您使用Blazor。

Source: https://habr.com/ru/post/undefined/

More articles:


All Articles