Skip to content

[11.0 P1] Remove the inline JS event handler #36685

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.

Sign up for GitHub

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

Open
guardrex wants to merge 2 commits into
base: main
Choose a base branch
from
Open

[11.0 P1] Remove the inline JS event handler #36685

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
a4731d3
[11.0 P1] Remove the inline JS event handler
guardrex Jan 26, 2026
200e084
Updates
guardrex Jan 26, 2026
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
40 changes: 18 additions & 22 deletions aspnetcore/blazor/fundamentals/navigation.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1354,28 +1354,24 @@ For the following demonstration, a consistent, standard naming convention is use
In the Razor markup of the `NavMenu` component (`NavMenu.razor`) under the default `Home` page, <xref:Microsoft.AspNetCore.Components.Routing.NavLink> components are added from a collection:

```diff
<div class="nav-scrollable"
onclick="document.querySelector('.navbar-toggler').click()">
<nav class="flex-column">
<div class="nav-item px-3">
<NavLink class="nav-link" href="" Match="NavLinkMatch.All">
<span class="bi bi-house-door-fill-nav-menu"
aria-hidden="true"></span> Home
</NavLink>
</div>

+ @foreach (var name in GetRoutableComponents())
+ {
+ <div class="nav-item px-3">
+ <NavLink class="nav-link"
+ href="@Regex.Replace(name, @"(\B[A-Z]|\d+)", "-$1").ToLower()">
+ @Regex.Replace(name, @"(\B[A-Z]|\d+)", " $1")
+ </NavLink>
+ </div>
+ }

</nav>
</div>
<nav class="flex-column">
<div class="nav-item px-3">
<NavLink class="nav-link" href="" Match="NavLinkMatch.All">
<span class="bi bi-house-door-fill-nav-menu"
aria-hidden="true"></span> Home
</NavLink>
</div>

+ @foreach (var name in GetRoutableComponents())
+ {
+ <div class="nav-item px-3">
+ <NavLink class="nav-link"
+ href="@Regex.Replace(name, @"(\B[A-Z]|\d+)", "-$1").ToLower()">
+ @Regex.Replace(name, @"(\B[A-Z]|\d+)", " $1")
+ </NavLink>
+ </div>
+ }
</nav>
```

The `GetRoutableComponents` method in the `@code` block:
Expand Down
144 changes: 144 additions & 0 deletions aspnetcore/blazor/tutorials/movie-database-app/part-3.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -72,6 +72,70 @@ The <xref:Microsoft.AspNetCore.Components.Routing.NavLink> component is built in

`Components/Layout/NavMenu.razor`:

:::moniker range=">= aspnetcore-11.0"

```razor
<script type="module" src="@Assets["Components/Layout/NavMenu.razor.js"]"></script>

<div class="top-row ps-3 navbar navbar-dark">
<div class="container-fluid">
<a class="navbar-brand" href="">BlazorWebAppMovies</a>
</div>
</div>

<input type="checkbox" title="Navigation menu" class="navbar-toggler" />

<div id="nav-scrollable" class="nav-scrollable">
<nav class="nav flex-column">
<div class="nav-item px-3">
<NavLink class="nav-link" href="" Match="NavLinkMatch.All">
<span class="bi bi-house-door-fill-nav-menu" aria-hidden="true"></span> Home
</NavLink>
</div>

<div class="nav-item px-3">
<NavLink class="nav-link" href="weather">
<span class="bi bi-list-nested-nav-menu" aria-hidden="true"></span> Weather
</NavLink>
</div>
</nav>
</div>
```

:::moniker-end

:::moniker range=">= aspnetcore-9.0 < aspnetcore-11.0"

```razor
<div class="top-row ps-3 navbar navbar-dark">
<div class="container-fluid">
<a class="navbar-brand" href="">BlazorWebAppMovies</a>
</div>
</div>

<input type="checkbox" title="Navigation menu" class="navbar-toggler" />

<div class="nav-scrollable" onclick="document.querySelector('.navbar-toggler').click()">
<nav class="nav flex-column">
<div class="nav-item px-3">
<NavLink class="nav-link" href="" Match="NavLinkMatch.All">
<span class="bi bi-house-door-fill-nav-menu" aria-hidden="true"></span> Home
</NavLink>
</div>

<div class="nav-item px-3">
<NavLink class="nav-link" href="weather">
<span class="bi bi-list-nested-nav-menu" aria-hidden="true"></span> Weather
</NavLink>
</div>
</nav>
</div>
```

:::moniker-end

:::moniker range="< aspnetcore-9.0"

```razor
<div class="top-row ps-3 navbar navbar-dark">
<div class="container-fluid">
Expand All @@ -98,6 +162,8 @@ The <xref:Microsoft.AspNetCore.Components.Routing.NavLink> component is built in
</div>
```

:::moniker-end

Notice in the `NavMenu` component's first `<div>` element the brand link text (`<a>` element content). Change the brand from `BlazorWebAppMovies` to `Sci-fi Movies`:

```diff
Expand All @@ -117,6 +183,46 @@ To allow users to reach the movies `Index` page, add a navigation menu entry to

The final `NavMenu` component after making the preceding changes:

:::moniker range=">= aspnetcore-11.0"

```razor
<script type="module" src="@Assets["Components/Layout/NavMenu.razor.js"]"></script>

<div class="top-row ps-3 navbar navbar-dark">
<div class="container-fluid">
<a class="navbar-brand" href="">Sci-fi Movies</a>
</div>
</div>

<input type="checkbox" title="Navigation menu" class="navbar-toggler" />

<div id="nav-scrollable" class="nav-scrollable">
<nav class="nav flex-column">
<div class="nav-item px-3">
<NavLink class="nav-link" href="" Match="NavLinkMatch.All">
<span class="bi bi-house-door-fill-nav-menu" aria-hidden="true"></span> Home
</NavLink>
</div>

<div class="nav-item px-3">
<NavLink class="nav-link" href="weather">
<span class="bi bi-list-nested-nav-menu" aria-hidden="true"></span> Weather
</NavLink>
</div>

<div class="nav-item px-3">
<NavLink class="nav-link" href="movies">
<span class="bi bi-list-nested-nav-menu" aria-hidden="true"></span> Movies
</NavLink>
</div>
</nav>
</div>
```

:::moniker-end

:::moniker range=">= aspnetcore-9.0 < aspnetcore-11.0"

```razor
<div class="top-row ps-3 navbar navbar-dark">
<div class="container-fluid">
Expand Down Expand Up @@ -149,6 +255,44 @@ The final `NavMenu` component after making the preceding changes:
</div>
```

:::moniker-end

:::moniker range="< aspnetcore-9.0"

```razor
<div class="top-row ps-3 navbar navbar-dark">
<div class="container-fluid">
<a class="navbar-brand" href="">Sci-fi Movies</a>
</div>
</div>

<input type="checkbox" title="Navigation menu" class="navbar-toggler" />

<div class="nav-scrollable" onclick="document.querySelector('.navbar-toggler').click()">
<nav class="flex-column">
<div class="nav-item px-3">
<NavLink class="nav-link" href="" Match="NavLinkMatch.All">
<span class="bi bi-house-door-fill-nav-menu" aria-hidden="true"></span> Home
</NavLink>
</div>

<div class="nav-item px-3">
<NavLink class="nav-link" href="weather">
<span class="bi bi-list-nested-nav-menu" aria-hidden="true"></span> Weather
</NavLink>
</div>

<div class="nav-item px-3">
<NavLink class="nav-link" href="movies">
<span class="bi bi-list-nested-nav-menu" aria-hidden="true"></span> Movies
</NavLink>
</div>
</nav>
</div>
```

:::moniker-end

Run the app to see the updated brand at the top of the sidebar navigation and a link to reach the movies page (**Movies**):

![App running in a browser showing the brand at the top of the sidebar navigation as 'Sci-fi Movies' and a 'Movie' link in the sidebar](~/blazor/tutorials/movie-database-app/part-3/_static/updated-brand-and-added-link.png)
Expand Down