adding-navigation-to-the-site-slides
adding-navigation-to-the-site-slides
Gill Cleeren
CTO XPIRIT BELGIUM
@gillcleeren www.snowball.be
Overview
Understanding routing in ASP.NET Core
MVC
Configuring the routing system
Navigating with tag helpers
Understanding Routing
in ASP.NET Core MVC
Serving Files
File
1
File
Request 2
/File1
File
3
Handing Requests in ASP.NET Core MVC
Controller 1
Controller 2
Request
Controller 3
Routing
Routing
http://www.bethanyspieshop.com/Pie/List
Controller
Action
{Controller}/{Action}
Routing to the Action Method
http://www.bethanyspieshop.com/Pie/Details/1
Controller
Action
Value
{Controller}/{Action}/{id}
Passing a Value
Configuration in Startup
app.UseMvc(routes =>
{
routes.MapRoute(
name: "default",
template: "{controller}/{action}");
});
Route Defaults
- Will match www.bethanyspieshop.com
app.UseEndpoints(endpoints =>
{
endpoints.MapControllerRoute(
name: "default",
pattern: "{controller=Home}/{action=Index}/{id}");
});
Passing Values
Receiving the Value
Optional Segments
- Will match
• www.bethanyspieshop.com/Pie/List
• www.bethanyspieshop.com/Pie/Details/1
app.UseEndpoints(endpoints =>
{
endpoints.MapControllerRoute(
name: "default",
pattern: "{controller=Home}/{action=Index}/{id:int?}");
});
Adding Constraints
Navigating with Tag Helpers
We need to generate correct
links in the resulting HTML
@Html.ActionLink t HTML Helpers
("View Pie List","List",
"Pie")
Server-side
Trigger code execution
Built-in or custom
Replace HTML Helpers
<a asp-controller="Pie" asp-action="List">
View Pie List
</a>
Tag Helpers
<a href="/Pie/List">View Pie List</a>
Resulting HTML
Registering Your Tag Helpers
@using BethanysPieShop.Models
@using BethanysPieShop.ViewModels
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
asp-controller
asp-action
Tag Helpers
asp-route-*
asp-route
Demo
Adding Navigation
Summary
Routing matches incoming request URI
with pattern
Tag Helpers help to create clean code
- Also for links
Up next:
Adding more View features