Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Upgrade to .NET 6 #330

Merged
merged 21 commits into from
Mar 28, 2022
Merged
Changes from 1 commit
Commits
Show all changes
21 commits
Select commit Hold shift + click to select a range
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
Added PageTitle reference
csharpfritz authored Mar 16, 2022

Verified

This commit was created on github.com and signed with GitHub’s verified signature. The key has expired.
commit b2d51649b690dded044659a782e33d3dba6f35cf
20 changes: 20 additions & 0 deletions docs/03-show-order-status.md
Original file line number Diff line number Diff line change
@@ -56,6 +56,26 @@ Now when you run the app, you'll be able to visit this page:

Also notice that this time, no full-page load occurs when you navigate, because the URL is matched entirely within the client-side SPA. As such, navigation is instantaneous.

## Adding a page title

In your browser, the title of the new page is listed as **Blazing Pizza** and it would be nice to update the title to reflect that this is the 'My Orders' page. We can use the new `PageTitle` component to update the title from the `MyOrders.razor` page:

```html
@page "/myorders"

<PageTitle>Blazing Pizza - My Orders</PageTitle>

<div class="main">
My orders will go here
</div>
```

This works because inside the `Program.cs` file is an entry that adds a `HeadOutlet` component to the HTML presenting the BlazingPizza application. Blazor uses this `HeadOutlet` to write content into the header of the HTML page.

```csharp
builder.RootComponents.Add<HeadOutlet>("head::after");
```

## Highlighting navigation position

Look closely at the top bar. Notice that when you're on "My orders", the link *isn't* highlighted in yellow. How can we highlight links when the user is on them? By using a `NavLink` component instead of a plain `<a>` tag. The only special thing a `NavLink` component does is toggle its own `active` CSS class depending on whether its `href` matches the current navigation state.