Blazor WebAssembly 3.2.0 معاينة 1 متاحة الآن

• تم تحديث الإصدار إلى 3.2.
• إطلاق مبسط
• تحسينات حجم التحميل
• دعم عميل .NET SignalR

بداية

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

تحديث المشروع الحالي

• قم بتحديث كافة الارتباطات لحزم Microsoft.AspNetCore.Blazor * إلى 3.2.0 معاينة 1.20073.1.
• في  Program.cs  في مشروع عميل Blazor WebAssembly ، استبدل  BlazorWebAssemblyHost.CreateDefaultBuilder() بـ  WebAssemblyHostBuilder.CreateDefault().
• انقل تسجيلات المكون الجذر في مشروع عميل Blazor WebAssembly من  Startup.Configure إلى  Program.cs عن طريق  الاتصال  builder.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

إطلاق مبسط

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

        await builder.Build().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");

        await builder.Build().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();

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

تحسينات حجم التحميل

دعم عميل .NET SignalR

1. إنشاء تطبيق Blazor WebAssembly مستضاف على ASP.NET Core.
   
   

   dotnet new blazorwasm -ho -o BlazorSignalRApp

2. إضافة حزمة عميل ASP.NET Core SignalR إلى مشروع العميل .
   
   

   cd BlazorSignalRApp
   dotnet add Client package Microsoft.AspNetCore.SignalR.Client

3. في مشروع الخادم ، أضف فئة 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. في مشروع الخادم ، أضف خدمات SignalR في الطريقة Startup.ConfigureServices.
   
   

   services.AddSignalR();
   

5. أضف أيضًا نقطة النهاية لـ ChatHubat Startup.Configure.
   
   

   .UseEndpoints(endpoints =>
   {
       endpoints.MapDefaultControllerRoute();
       endpoints.MapHub<ChatHub>("/chatHub");
       endpoints.MapFallbackToClientSideBlazor<Client.Program>("index.html");
   });
   

6. قم بتحديث 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.
   

مشاكل معروفة

• يؤدي بدء تطبيق Blazor WebAssembly المستضاف على ASP.NET Core من سطر الأوامر إلى إنشاء تحذير:
  
  

  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.

المراجعات