Showing data with static SSR – learn C# (K2, lesson 41)

What you learn in this lesson

load data in OnInitializedAsync through a service instead of keeping it in the component

use streaming rendering with [StreamRendering] and know why a page without script then stops at the placeholder

build search and pages through the address with [SupplyParameterFromQuery] and a GET form

treat values from the address as untrusted input

use the DbContext per request with static SSR and through IDbContextFactory in interactive islands

build the Kladde’s contact list with search and pages that also works without JavaScript

So far, the Kladde’s contact list shows four contacts that are hard-coded. The real contacts have been in SQL Server since module 2.4, and the API already reads them from there. In this lesson, the page gets its data from the database too, through a service, the way an endpoint does. On top come a search and pages, both through the address. Then you can bookmark a search result or pass it on, and everything works without JavaScript too.

Where the Kladde stands

After module 2.4, the contacts are in SQL Server. In the solutions, that means the KladdeDbContext in the project Kladde.Data with a DbSet<Contact> Contacts (lesson 2.4.6), migrations and 50 invented contacts for development (lesson 2.4.8). In Program.cs, it says something like:

// excerpt from src/Kladde.Web/Program.cs after module 2.4
builder.Services.AddDbContext<KladdeDbContext>(options =>
    options.UseSqlServer(builder.Configuration.GetConnectionString("Kladde")));

The connection string is in the user secrets, never in appsettings.json (lesson 2.3.4). If your classes have different names or your registration looks different, keep your names and transfer the steps.

What you learn in this lesson

Where the Kladde stands

This lesson belongs to course K2