Blazor in Razor oder MVC View

Wenn ich Blazor demonstriere ist häufig eine der ersten Fragen, kann man das in Webforms oder ASP.NET MVC integrieren? Praktisch gar nicht. Erst wenn deine ASP.NET Web Anwendung auf asp.net core basiert, klappt das reibungslos. Dabei ist es egal ob man Blazor in Razor cshtml Views oder MVC einbetten will.

Wir gehen von einem existierenden Visual Studio ASP.NET Core 3.1 Projekt aus. Um dieses auf ein Server Rendered Blazor Projekt zu erweitern wird zuerst die startup.cs an zwei Stellen erweitert.

   1:  public void ConfigureServices(IServiceCollection services)
   2:   {
   3:    services.AddServerSideBlazor(); 
   4:    services.AddRazorPages();
   5:  }

Neben dem Service in der  ServiceCollection des Dependency Injection Containers auch noch den Endpunkt für den SignalR Hub auf dem Blazor aufsetzt.

   1:  app.UseEndpoints(endpoints =>
   2:  {
   3:    endpoints.MapRazorPages();
   4:    endpoints.MapBlazorHub(); 
   5:   });
   6:              

In der Razor Seite (cshtml) wird die JavaScript Library für Blazor benötigt. In Zeile 1 wird die Blazor Komponente gerendert, die hier den Standard Namen Component nutzt.

   1:  @(await Html.RenderComponentAsync<Component>(RenderMode.ServerPrerendered ))
   2:   
   3:   
   4:  <script src="_framework/blazor.server.js"></script>

So eine Component wird mit Visual Studio in der Regel im Pages Verzeichnis erzeugt. Erst wenn das entsprechende Using aus Zeile 1 definiert ist, wird auch das Event des Buttons sauber funktionieren. Hier wird eine Wert hochgezählt und in der Page @inc ausgegeben.

   1:  @using Microsoft.AspNetCore.Components.Web 
   2:   
   3:  <h3>Component</h3>@inc
   4:  <br />
   5:  <button @onclick="incfunc">inc</button>
   6:  @code {
   7:      int inc;
   8:      public void incfunc()
   9:      {
  10:          inc++;
  11:      }
  12:  }

Mit Blazor 3.1 bekommt man auch einen etwas eleganteren Tag Helper <component> zur Seite gestellt um die Blazor Component namens Component (sorry für den Namen) in die Razor Page zu bringen.  In der Praxis einer Web Page wird man vom HTML View Daten in die Blazor Komponente übergeben müssen. Ein Artikel wird angezeigt und man möchte Lagerbestände aktuell einblenden oder kaufen. Der Parameter kann ein komplexes Objekt sein oder ein einfacher Datentyp wie string. Folgende beide  Varianten mit HTML Helper und Tag Helper.

   1:  @(await Html.RenderComponentAsync<Component>(RenderMode.ServerPrerendered,new { Start = 10 } ))
   2:   
   3:  <component type="typeof(Component)" render-mode="ServerPrerendered" param-Start="10" />

Fehlt noch die Blazor Komponente mit Parameter. Dazu muss ein Property mit dem Parameter Attribut maskiert werden. In diesem Fall rein optional, wird beim rendern noch der Startwert initalisiert.

   1:  [Parameter]
   2:  public int Start { get; set; }
   3:  int inc;
   4:  protected async override Task OnInitializedAsync()
   5:  {
   6:    inc = Start;
   7:  }
Kommentare sind geschlossen