Skip to content

Commit b20b382

Browse files
guardrexguardrex
authored
[11.0 P1] Remove the inline JS event handler (#36685)
1 parent e41f5bc commit b20b382

2 files changed

Lines changed: 162 additions & 22 deletions

File tree

‎aspnetcore/blazor/fundamentals/navigation.md‎

Lines changed: 18 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1354,28 +1354,24 @@ For the following demonstration, a consistent, standard naming convention is use
13541354
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:
13551355

13561356
```diff
1357-
<div class="nav-scrollable"
1358-
onclick="document.querySelector('.navbar-toggler').click()">
1359-
<nav class="flex-column">
1360-
<div class="nav-item px-3">
1361-
<NavLink class="nav-link" href="" Match="NavLinkMatch.All">
1362-
<span class="bi bi-house-door-fill-nav-menu"
1363-
aria-hidden="true"></span> Home
1364-
</NavLink>
1365-
</div>
1366-
1367-
+ @foreach (var name in GetRoutableComponents())
1368-
+ {
1369-
+ <div class="nav-item px-3">
1370-
+ <NavLink class="nav-link"
1371-
+ href="@Regex.Replace(name, @"(\B[A-Z]|\d+)", "-$1").ToLower()">
1372-
+ @Regex.Replace(name, @"(\B[A-Z]|\d+)", " $1")
1373-
+ </NavLink>
1374-
+ </div>
1375-
+ }
1376-
1377-
</nav>
1378-
</div>
1357+
<nav class="flex-column">
1358+
<div class="nav-item px-3">
1359+
<NavLink class="nav-link" href="" Match="NavLinkMatch.All">
1360+
<span class="bi bi-house-door-fill-nav-menu"
1361+
aria-hidden="true"></span> Home
1362+
</NavLink>
1363+
</div>
1364+
1365+
+ @foreach (var name in GetRoutableComponents())
1366+
+ {
1367+
+ <div class="nav-item px-3">
1368+
+ <NavLink class="nav-link"
1369+
+ href="@Regex.Replace(name, @"(\B[A-Z]|\d+)", "-$1").ToLower()">
1370+
+ @Regex.Replace(name, @"(\B[A-Z]|\d+)", " $1")
1371+
+ </NavLink>
1372+
+ </div>
1373+
+ }
1374+
</nav>
13791375
```
13801376

13811377
The `GetRoutableComponents` method in the `@code` block:

‎aspnetcore/blazor/tutorials/movie-database-app/part-3.md‎

Lines changed: 144 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -72,6 +72,70 @@ The <xref:Microsoft.AspNetCore.Components.Routing.NavLink> component is built in
7272

7373
`Components/Layout/NavMenu.razor`:
7474

75+
:::moniker range=">= aspnetcore-11.0"
76+
77+
```razor
78+
<script type="module" src="@Assets["Components/Layout/NavMenu.razor.js"]"></script>
79+
80+
<div class="top-row ps-3 navbar navbar-dark">
81+
<div class="container-fluid">
82+
<a class="navbar-brand" href="">BlazorWebAppMovies</a>
83+
</div>
84+
</div>
85+
86+
<input type="checkbox" title="Navigation menu" class="navbar-toggler" />
87+
88+
<div id="nav-scrollable" class="nav-scrollable">
89+
<nav class="nav flex-column">
90+
<div class="nav-item px-3">
91+
<NavLink class="nav-link" href="" Match="NavLinkMatch.All">
92+
<span class="bi bi-house-door-fill-nav-menu" aria-hidden="true"></span> Home
93+
</NavLink>
94+
</div>
95+
96+
<div class="nav-item px-3">
97+
<NavLink class="nav-link" href="weather">
98+
<span class="bi bi-list-nested-nav-menu" aria-hidden="true"></span> Weather
99+
</NavLink>
100+
</div>
101+
</nav>
102+
</div>
103+
```
104+
105+
:::moniker-end
106+
107+
:::moniker range=">= aspnetcore-9.0 < aspnetcore-11.0"
108+
109+
```razor
110+
<div class="top-row ps-3 navbar navbar-dark">
111+
<div class="container-fluid">
112+
<a class="navbar-brand" href="">BlazorWebAppMovies</a>
113+
</div>
114+
</div>
115+
116+
<input type="checkbox" title="Navigation menu" class="navbar-toggler" />
117+
118+
<div class="nav-scrollable" onclick="document.querySelector('.navbar-toggler').click()">
119+
<nav class="nav flex-column">
120+
<div class="nav-item px-3">
121+
<NavLink class="nav-link" href="" Match="NavLinkMatch.All">
122+
<span class="bi bi-house-door-fill-nav-menu" aria-hidden="true"></span> Home
123+
</NavLink>
124+
</div>
125+
126+
<div class="nav-item px-3">
127+
<NavLink class="nav-link" href="weather">
128+
<span class="bi bi-list-nested-nav-menu" aria-hidden="true"></span> Weather
129+
</NavLink>
130+
</div>
131+
</nav>
132+
</div>
133+
```
134+
135+
:::moniker-end
136+
137+
:::moniker range="< aspnetcore-9.0"
138+
75139
```razor
76140
<div class="top-row ps-3 navbar navbar-dark">
77141
<div class="container-fluid">
@@ -98,6 +162,8 @@ The <xref:Microsoft.AspNetCore.Components.Routing.NavLink> component is built in
98162
</div>
99163
```
100164

165+
:::moniker-end
166+
101167
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`:
102168

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

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

186+
:::moniker range=">= aspnetcore-11.0"
187+
188+
```razor
189+
<script type="module" src="@Assets["Components/Layout/NavMenu.razor.js"]"></script>
190+
191+
<div class="top-row ps-3 navbar navbar-dark">
192+
<div class="container-fluid">
193+
<a class="navbar-brand" href="">Sci-fi Movies</a>
194+
</div>
195+
</div>
196+
197+
<input type="checkbox" title="Navigation menu" class="navbar-toggler" />
198+
199+
<div id="nav-scrollable" class="nav-scrollable">
200+
<nav class="nav flex-column">
201+
<div class="nav-item px-3">
202+
<NavLink class="nav-link" href="" Match="NavLinkMatch.All">
203+
<span class="bi bi-house-door-fill-nav-menu" aria-hidden="true"></span> Home
204+
</NavLink>
205+
</div>
206+
207+
<div class="nav-item px-3">
208+
<NavLink class="nav-link" href="weather">
209+
<span class="bi bi-list-nested-nav-menu" aria-hidden="true"></span> Weather
210+
</NavLink>
211+
</div>
212+
213+
<div class="nav-item px-3">
214+
<NavLink class="nav-link" href="movies">
215+
<span class="bi bi-list-nested-nav-menu" aria-hidden="true"></span> Movies
216+
</NavLink>
217+
</div>
218+
</nav>
219+
</div>
220+
```
221+
222+
:::moniker-end
223+
224+
:::moniker range=">= aspnetcore-9.0 < aspnetcore-11.0"
225+
120226
```razor
121227
<div class="top-row ps-3 navbar navbar-dark">
122228
<div class="container-fluid">
@@ -149,6 +255,44 @@ The final `NavMenu` component after making the preceding changes:
149255
</div>
150256
```
151257

258+
:::moniker-end
259+
260+
:::moniker range="< aspnetcore-9.0"
261+
262+
```razor
263+
<div class="top-row ps-3 navbar navbar-dark">
264+
<div class="container-fluid">
265+
<a class="navbar-brand" href="">Sci-fi Movies</a>
266+
</div>
267+
</div>
268+
269+
<input type="checkbox" title="Navigation menu" class="navbar-toggler" />
270+
271+
<div class="nav-scrollable" onclick="document.querySelector('.navbar-toggler').click()">
272+
<nav class="flex-column">
273+
<div class="nav-item px-3">
274+
<NavLink class="nav-link" href="" Match="NavLinkMatch.All">
275+
<span class="bi bi-house-door-fill-nav-menu" aria-hidden="true"></span> Home
276+
</NavLink>
277+
</div>
278+
279+
<div class="nav-item px-3">
280+
<NavLink class="nav-link" href="weather">
281+
<span class="bi bi-list-nested-nav-menu" aria-hidden="true"></span> Weather
282+
</NavLink>
283+
</div>
284+
285+
<div class="nav-item px-3">
286+
<NavLink class="nav-link" href="movies">
287+
<span class="bi bi-list-nested-nav-menu" aria-hidden="true"></span> Movies
288+
</NavLink>
289+
</div>
290+
</nav>
291+
</div>
292+
```
293+
294+
:::moniker-end
295+
152296
Run the app to see the updated brand at the top of the sidebar navigation and a link to reach the movies page (**Movies**):
153297

154298
![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)

0 commit comments

Comments
 (0)