Learn Blazor Routing and Navigation by building fishcard | .NET fullstack dev - 002
🍿 2nd video on Blazor Web Assembly (WASM). We are going to learn the basics of Blazor Routing and Navigation.
See the live site at: https://fishcard.codewithsaar.net.
🍔 Takeaways
SPA updates DOMs than sending requests to the server for different pages.
To create a new page by using the @page directive.
Router manipulates the DOM, updates the Url, and rewrites browsing histories.
Blazor supports 2 types of parameters: Route parameter & query parameter.
Parameters could be constrained and, in some cases, optional.
For more videos like this:
💡Subscribe to my channel - https://www.youtube.com/c/CodewithSaa....
🧩 Resources
Blazor official tutorial: https://dotnet.microsoft.com/en-us/ap...
Parameter constraint document: https://docs.microsoft.com/en-us/aspn...
📺 Demo code:
Fishcard source code: https://github.com/xiaomi7732/CodeWit...
💬 Discord server for Code w/ Saar: / discord
➡️ Reach me on Twitter @CodeWithSaar.
🏠 My home page: https://www.codewithsaar.net
☕ If you want to buy me a coffee: https://www.buymeacoffee.com/codewith... and thank you!
🔖 Chapters
00:00 Traditional routing
02:02 SPA routing
03:00 Client routers' responsibilities
04:02 Create fishcard page with the directive
06:00 Use a NavLink component for the NavMenu
07:00 Use the NavigationManager by C# code
09:14 The deep link demo of Fishcard website
09:52 Add route parameter to the routing template
11:50 Add optional, constrained weight parameter
13:35 Introduce query parameter
14:34 Write the code to form a URL with query parameters
17:00 Quick recap