Blazor WebAssembly 3.2.0 Preview 1 sekarang tersedia

• Versi diperbarui menjadi 3,2.
• Peluncuran yang disederhanakan
• Unduh Peningkatan Ukuran
• Dukungan Klien .NET SignalR

Mulailah

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

Perbarui proyek yang ada

• Perbarui semua tautan ke paket Microsoft.AspNetCore.Blazor * ke 3.2.0-preview1.20073.1.
• Dalam  Program.cs  di proyek klien Blazor WebAssembly, ganti  BlazorWebAssemblyHost.CreateDefaultBuilder() dengan  WebAssemblyHostBuilder.CreateDefault().
• Pindahkan pendaftaran komponen root di proyek klien Blazor WebAssembly dari  Startup.Configure ke  Program.cs dengan  menelepon  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

Peluncuran yang disederhanakan

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

Unduh Peningkatan Ukuran

Dukungan Klien .NET SignalR

1. Buat aplikasi Blazor WebAssembly yang dihosting di ASP.NET Core.
   
   

   dotnet new blazorwasm -ho -o BlazorSignalRApp

2. Tambahkan paket klien ASP.NET Core SignalR ke proyek Klien .
   
   

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

3. Dalam proyek Server , tambahkan kelas Hub / ChatHub.cs berikut .
   
   

   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. Dalam proyek Server , tambahkan layanan SignalR dalam metode Startup.ConfigureServices.
   
   

   services.AddSignalR();
   

5. Tambahkan juga titik akhir untuk ChatHubdi Startup.Configure.
   
   

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

6. Perbarui Halaman / Index.razor dalam proyek Klien dengan markup berikut.
   
   

   @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. Buat dan jalankan proyek Server
   
   

   cd Server
   dotnet run
   

8. Buka aplikasi dalam dua tab browser terpisah untuk berkomunikasi secara real time melalui SignalR.
   

Masalah Dikenal

• Memulai aplikasi WebAssembly Blazor baru yang dihosting di ASP.NET Core dari baris perintah menghasilkan peringatan:
  
  

  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.
  

  • Solusi: Peringatan ini dapat diabaikan atau dihapus menggunakan properti  <DisableImplicitComponentsAnalyzers>true</DisableImplicitComponentsAnalyzers> MSBuild.

Ulasan