Blazor movie dB tutorial updates (#34136)

pull/34137/head
Luke Latham 2024-11-15 07:32:10 -05:00 committed by GitHub
parent c830a92c5c
commit 1254ceb9b2
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 6 additions and 5 deletions

View File

@ -229,7 +229,7 @@ The `@page` directive's route template indicates the URL for the page is `/movie
* `BlazorWebAppMovies.Models`
* `BlazorWebAppMovies.Data`
The database context factory (`IDbContextFactory<BlazorWebAppMoviesContext>`) is injected into the component with the `@inject` directive. The factory approach requires that a database context be disposed, so the component implements the <xref:System.IAsyncDisposable> interface with the `@implements` directive.
The database context factory (`IDbContextFactory<T>`, where the type (`T`) is a `BlazorWebAppMoviesContext`) is injected into the component with the `@inject` directive. The factory approach requires that a database context be disposed, so the component implements the <xref:System.IAsyncDisposable> interface with the `@implements` directive.
The page title is set via the Blazor framework's <xref:Microsoft.AspNetCore.Components.Web.PageTitle> component, and an H1 section heading is the first rendered element:
@ -316,8 +316,9 @@ For the movie example from the last part of the tutorial series, *The Matrix*&co
The column names are taken from the `Movie` model properties, so the release date doesn't have a space between the words. Add a <xref:Microsoft.AspNetCore.Components.QuickGrid.ColumnBase%601.Title> to the <xref:Microsoft.AspNetCore.Components.QuickGrid.PropertyColumn%602> with a value that includes a space between the words:
```razor
<PropertyColumn Property="movie => movie.ReleaseDate" Title="Release Date" />
```diff
- <PropertyColumn Property="movie => movie.ReleaseDate" />
+ <PropertyColumn Property="movie => movie.ReleaseDate" Title="Release Date" />
```
Run the app to see that the column displays two words for the release date.

View File

@ -71,12 +71,12 @@ Append a query string to the URL in the address bar: `?titleFilter=road+warrior`
Next, give users a way to provide the `titleFilter` filter string via the component's UI. Add the following HTML under the H1 heading (`<h1>Index</h1>`). The following HTML reloads the page with the contents of the textbox as a query string value:
```html
<p>
<div>
<form action="/movies" data-enhance>
<input type="search" name="titleFilter" />
<input type="submit" value="Search" />
</form>
</p>
</div>
```
The `data-enhance` attribute applies *enhanced navigation* to the component, where Blazor intercepts the GET request and performs a fetch request instead. Blazor then patches the response content into the page, which avoids a full-page reload and preserves more of the page state. The page loads faster, usually without losing the user's scroll position.