The order list is the page Ms. Aydin opens most often. That is why it is the first one to appear in the browser, and it is seam N5 from lesson M1.4. What Blazor is and how components, parameters, and forms work is covered in K2, module 2.5 (Blazor). This lesson is about what matters when you move an existing page: that it shows the same thing as the old window, that it handles state differently, and that you can prove it.

The page does no calculating and does not ask the database. It calls the client from lesson M4.2, and the client calls the API. A rule therefore changes in exactly one place, and the page always shows what the library says.

Two projects

The user interface goes into a Razor class library, and the web app into a project of its own. There is a reason for this that only becomes visible in lesson M4.4: Microsoft's documentation advises, for Blazor Hybrid, putting as much code and static content as possible into Razor class libraries; each hosting model and each platform then references the library and supplies only what it alone can do. The same component then runs in the browser and in the Windows program.

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

The options of the command: -int Server selects interactive server components, and --empty leaves out the sample pages. According to the template's help, -ai false means: pages use static server rendering by default and can be marked as interactive per page or per component. That is the default we want: interactivity has a price (section "State"), and you pay it only where it buys something. In the class library, delete the sample files (Component1.razor, Component1.razor.css, ExampleJsInterop.cs, and the wwwroot folder).

The library's project file:

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.OrderBook.Client\Brandt.OrderBook.Client.csproj" />
  </ItemGroup>

</Project>

And its imports, so that the client, the contract, and the logic are known in every component:

Razor
@using System.ComponentModel.DataAnnotations
@using Microsoft.AspNetCore.Components.Forms
@using Microsoft.AspNetCore.Components.Web
@using Brandt.OrderBook.Client
@using Brandt.OrderBook.Logic
@using Brandt.OrderBook.Contracts
@using Microsoft.JSInterop
@using System.Globalization