Die Auftragsliste ist die Seite, die Frau Aydin am häufigsten öffnet. Sie ist deshalb die erste, die im Browser erscheint, und die Naht N5 aus Lektion M1.4. Was Blazor ist und wie Komponenten, Parameter und Formulare funktionieren, steht in K2, Modul 2.5 (Blazor). Hier geht es um das, was beim Umzug einer vorhandenen Seite zählt: dass sie dasselbe zeigt wie das alte Fenster, dass sie mit dem Zustand anders umgeht, und dass man das nachweisen kann.

Die Seite rechnet nichts und fragt die Datenbank nicht. Sie ruft den Client aus Lektion M4.2, und der ruft die API. Eine Regel ändert sich damit an genau einer Stelle, und die Seite zeigt immer, was die Bibliothek sagt.

Zwei Projekte

Die Oberfläche kommt in eine Razor-Klassenbibliothek, die Web-App in ein eigenes Projekt. Das hat einen Grund, der erst in Lektion M4.4 sichtbar wird: Microsofts Dokumentation rät für Blazor Hybrid, so viel Code und statische Inhalte wie möglich in Razor-Klassenbibliotheken zu legen; jedes Hosting-Modell und jede Plattform verweist dann auf die Bibliothek und liefert nur das, was sie allein kann. Dieselbe Komponente läuft dann im Browser und im Windows-Programm.

PowerShell
dotnet new razorclasslib -n Brandt.Auftragsbuch.Komponenten -f net10.0
dotnet new blazor -n Brandt.Auftragsbuch.Web -int Server -ai false --empty -f net10.0
dotnet sln Brandt.Auftragsbuch.sln add Brandt.Auftragsbuch.Komponenten/Brandt.Auftragsbuch.Komponenten.csproj
dotnet sln Brandt.Auftragsbuch.sln add Brandt.Auftragsbuch.Web/Brandt.Auftragsbuch.Web.csproj
dotnet add Brandt.Auftragsbuch.Komponenten/Brandt.Auftragsbuch.Komponenten.csproj reference Brandt.Auftragsbuch.Client/Brandt.Auftragsbuch.Client.csproj
dotnet add Brandt.Auftragsbuch.Web/Brandt.Auftragsbuch.Web.csproj reference Brandt.Auftragsbuch.Komponenten/Brandt.Auftragsbuch.Komponenten.csproj
dotnet add Brandt.Auftragsbuch.Web/Brandt.Auftragsbuch.Web.csproj reference Brandt.Auftragsbuch.Client/Brandt.Auftragsbuch.Client.csproj

Die Optionen des Befehls: -int Server wählt interaktive Server-Komponenten, --empty lässt die Beispielseiten weg. -ai false heißt nach der Hilfe der Vorlage: Seiten verwenden standardmäßig statisches Serverrendering und lassen sich auf Seiten- oder Komponentenbasis als interaktiv markieren. Das ist die Voreinstellung, die wir wollen: Interaktivität ist ein Preis (Abschnitt „Zustand“), und man zahlt ihn nur dort, wo er etwas bringt. Löschen Sie in der Klassenbibliothek die Beispieldateien (Component1.razor, Component1.razor.css, ExampleJsInterop.cs und den Ordner wwwroot).

Die Projektdatei der Bibliothek:

XML
<Project Sdk="Microsoft.NET.Sdk.Razor">

  <PropertyGroup>
    <TargetFramework>net10.0</TargetFramework>
    <Nullable>enable</Nullable>
    <ImplicitUsings>enable</ImplicitUsings>
    <TreatWarningsAsErrors>true</TreatWarningsAsErrors>
  </PropertyGroup>

  <ItemGroup>
    <SupportedPlatform Include="browser" />
  </ItemGroup>

  <ItemGroup>
    <PackageReference Include="Microsoft.AspNetCore.Components.Web" Version="10.0.*" />
  </ItemGroup>

  <ItemGroup>
    <ProjectReference Include="..\Brandt.Auftragsbuch.Client\Brandt.Auftragsbuch.Client.csproj" />
  </ItemGroup>

</Project>

Und ihre Importe, damit in jeder Komponente Client, Vertrag und Logik bekannt sind:

Razor
@using System.ComponentModel.DataAnnotations
@using Microsoft.AspNetCore.Components.Forms
@using Microsoft.AspNetCore.Components.Web
@using Brandt.Auftragsbuch.Client
@using Brandt.Auftragsbuch.Logik
@using Brandt.Auftragsbuch.Vertraege
@using Microsoft.JSInterop
@using System.Globalization