Suggested Videos
Part 1 - ASP.NET Core razor pages introduction | Text | Slides
Part 2 - ASP.NET core 3.0 project file | Text | Slides
The common sections of a web application like Header, Footer and Navigation menu are defined in the layout view. Each razor page will then inject it's page specific content in the layout view.
We discussed the basics of a layout view in Part 28 of ASP.NET Core MVC tutorial for beginners.
Both, ASP.NET Core MVC project and Razor pages project support layout views. The differences are very minor.
Layout View or Layout Page
The first question that comes to our mind is should we call it layout view or layout page. Technically a razor page is a .cshtml file that has @page directive. This directive makes the .cshtml file a razor page. A razor view on the other hand does not have @page directive. Similarly, a layout view also does not have @page directive, so technically, it should be called a layout view and not a layout page.
Razor pages project layout view example
The following is the code from the layout view, generated by the ASP.NET Core Web Application template.
Bootstrap in Razor Pages Project
ASP.NET Core razor project uses Bootstrap 4 for styling. You can see the reference to Bootstrap css file in the head section of the layout view.
Static files in razor pages
By default, an asp.net core mvc or razor pages application will not serve static files. To be able to serve static files like JavaScript, CSS and Images
We discussed static files middleware in detail in Part 12 of ASP.NET Core MVC tutorial.
Razor page specific title
<title> element in the <head> section sets the page title. The <head> section is defined in the layout view. So, it is the layout view that has to set the page specific title. How will the layout view know the title of each specific razor page.
Well, a razor page can pass it's specific title using ViewData
The layout retrieves the title from ViewData and sets it as the page title.
Navigation menu in asp.net core razor pages project
The following section in the layout view defines the navigation menu. This is a Bootstrap 4 responsive navigation menu. On a large screen device like a Desktop the menu is fully expanded. On a small screen device like a mobile the menu is collapsed into a hamburger menu.
asp-page tag helper
As far as razor pages are concerned, the piece of HTML that stands out is the asp-page tag helper. This tag helper sets an anchor element's href attribute value to a specific page.
In the following example, asp-page points to Index.cshtml razor page
Generated HTML
We discussed Tag Helpers from Parts 35 to 40 in ASP.NET Core MVC tutorial.
asp-append-version tag helper
This tag helper can be used as an attribute to provide cache-busting behavior for static files. For example, we could use it on an <img> or <script> element to provide cache-busting behavior for images and JavaScript files.
We discussed asp-append-version tag helper in Part 37 of ASP.NET Core Tutorial.
Razor layout page RenderBody
Each razor page plugs-in it's page specific content at the location where we have @RenderBody() method call.
Sections in a Layout View
A layout view in ASP.NET Core can also include one or more sections. A section can be optional or mandatory. It provides a way to organise where certain page elements should be placed.
For example, an individual razor page can plug-in custom JavaScript files using the following Scripts section. The JavaScript files will then be rendered just before the closing </body> tag.
We discussed Sections in Layout View in Part 29 of ASP.NET Core MVC Tutorial.
Add new razor page
We want a new razor page that displays a list of employees. We want all razor pages related to Employees in the Employees folder. So add a new folder with name Employees in the Pages folder. Next add a new razor page withe name Index.cshtml.
The following list item on the Layout view, displays Employees menu item.
Navigating to /Employees/Index serves Index.cshtml razor page in the Employees folder. Since, Index.cshtml is the default, navigating to /Employees will also serve Index.cshtml razor page.
Part 1 - ASP.NET Core razor pages introduction | Text | Slides
Part 2 - ASP.NET core 3.0 project file | Text | Slides
The common sections of a web application like Header, Footer and Navigation menu are defined in the layout view. Each razor page will then inject it's page specific content in the layout view.
We discussed the basics of a layout view in Part 28 of ASP.NET Core MVC tutorial for beginners.
Both, ASP.NET Core MVC project and Razor pages project support layout views. The differences are very minor.
Layout View or Layout Page
The first question that comes to our mind is should we call it layout view or layout page. Technically a razor page is a .cshtml file that has @page directive. This directive makes the .cshtml file a razor page. A razor view on the other hand does not have @page directive. Similarly, a layout view also does not have @page directive, so technically, it should be called a layout view and not a layout page.
Razor pages project layout view example
The following is the code from the layout view, generated by the ASP.NET Core Web Application template.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,
initial-scale=1.0" />
<title>@ViewData["Title"] - RazorPagesTutorial</title>
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
<link rel="stylesheet" href="~/css/site.css" />
</head>
<body>
<header>
<nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-light
bg-white border-bottom
box-shadow mb-3">
<div class="container">
<a class="navbar-brand" asp-area="" asp-page="/Index">
RazorPagesTutorial
</a>
<button class="navbar-toggler" type="button"
data-toggle="collapse" data-target=".navbar-collapse"
aria-controls="navbarSupportedContent"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse collapse d-sm-inline-flex
flex-sm-row-reverse">
<ul class="navbar-nav flex-grow-1">
<li class="nav-item">
<a class="nav-link text-dark" asp-area=""
asp-page="/Index">Home</a>
</li>
<li class="nav-item">
<a class="nav-link text-dark" asp-area=""
asp-page="/Privacy">Privacy</a>
</li>
</ul>
</div>
</div>
</nav>
</header>
<div class="container">
<main role="main" class="pb-3">
@RenderBody()
</main>
</div>
<footer class="border-top footer text-muted">
<div class="container">
© 2019 - RazorPagesTutorial -
<a asp-area="" asp-page="/Privacy">Privacy</a>
</div>
</footer>
<script src="~/lib/jquery/dist/jquery.min.js"></script>
<script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<script src="~/js/site.js" asp-append-version="true"></script>
@RenderSection("Scripts", required: false)
</body>
</html>
Bootstrap in Razor Pages Project
ASP.NET Core razor project uses Bootstrap 4 for styling. You can see the reference to Bootstrap css file in the head section of the layout view.
<head>
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
</head>
Static files in razor pages
By default, an asp.net core mvc or razor pages application will not serve static files. To be able to serve static files like JavaScript, CSS and Images
- These files must be present in wwwroot folder and this folder must be in the root project folder
- UseStaticFiles() middleware must be added to the Http request processing pipeline. This is the middleware that can serve static files.
public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
if (env.IsDevelopment())
{
app.UseDeveloperExceptionPage();
}
else
{
app.UseExceptionHandler("/Error");
app.UseHsts();
}
app.UseHttpsRedirection();
app.UseStaticFiles();
app.UseRouting();
app.UseAuthorization();
app.UseEndpoints(endpoints =>
{
endpoints.MapRazorPages();
});
}
{
if (env.IsDevelopment())
{
app.UseDeveloperExceptionPage();
}
else
{
app.UseExceptionHandler("/Error");
app.UseHsts();
}
app.UseHttpsRedirection();
app.UseStaticFiles();
app.UseRouting();
app.UseAuthorization();
app.UseEndpoints(endpoints =>
{
endpoints.MapRazorPages();
});
}
We discussed static files middleware in detail in Part 12 of ASP.NET Core MVC tutorial.
Razor page specific title
<title> element in the <head> section sets the page title. The <head> section is defined in the layout view. So, it is the layout view that has to set the page specific title. How will the layout view know the title of each specific razor page.
Well, a razor page can pass it's specific title using ViewData
@{
ViewData["Title"] = "Home page";
}
ViewData["Title"] = "Home page";
}
The layout retrieves the title from ViewData and sets it as the page title.
<head>
<title>@ViewData["Title"] - RazorPagesTutorial</title>
</head>
Navigation menu in asp.net core razor pages project
The following section in the layout view defines the navigation menu. This is a Bootstrap 4 responsive navigation menu. On a large screen device like a Desktop the menu is fully expanded. On a small screen device like a mobile the menu is collapsed into a hamburger menu.
<div class="navbar-collapse collapse d-sm-inline-flex
flex-sm-row-reverse">
<ul class="navbar-nav flex-grow-1">
<li class="nav-item">
<a class="nav-link text-dark" asp-area="" asp-page="/Index">
Home
</a>
</li>
<li class="nav-item">
<a class="nav-link text-dark" asp-area="" asp-page="/Privacy">
Privacy
</a>
</li>
</ul>
</div>
asp-page tag helper
As far as razor pages are concerned, the piece of HTML that stands out is the asp-page tag helper. This tag helper sets an anchor element's href attribute value to a specific page.
In the following example, asp-page points to Index.cshtml razor page
<a class="nav-link text-dark" asp-page="/Index">
Home
</a>
Generated HTML
<a class="nav-link
text-dark" href="/">Home</a>
We discussed Tag Helpers from Parts 35 to 40 in ASP.NET Core MVC tutorial.
asp-append-version tag helper
This tag helper can be used as an attribute to provide cache-busting behavior for static files. For example, we could use it on an <img> or <script> element to provide cache-busting behavior for images and JavaScript files.
<script src="~/js/site.js" asp-append-version="true">
</script>
We discussed asp-append-version tag helper in Part 37 of ASP.NET Core Tutorial.
Razor layout page RenderBody
Each razor page plugs-in it's page specific content at the location where we have @RenderBody() method call.
<div class="container">
<main role="main" class="pb-3">
@RenderBody()
</main>
</div>
Sections in a Layout View
A layout view in ASP.NET Core can also include one or more sections. A section can be optional or mandatory. It provides a way to organise where certain page elements should be placed.
For example, an individual razor page can plug-in custom JavaScript files using the following Scripts section. The JavaScript files will then be rendered just before the closing </body> tag.
<html>
<body>
@*Rest of the the HTML*@
@RenderSection("Scripts", required: false)
</body>
</html>
We discussed Sections in Layout View in Part 29 of ASP.NET Core MVC Tutorial.
Add new razor page
We want a new razor page that displays a list of employees. We want all razor pages related to Employees in the Employees folder. So add a new folder with name Employees in the Pages folder. Next add a new razor page withe name Index.cshtml.
The following list item on the Layout view, displays Employees menu item.
<li class="nav-item">
<a class="nav-link text-dark" asp-page="/Employees/Index">
Employees
</a>
</li>
Navigating to /Employees/Index serves Index.cshtml razor page in the Employees folder. Since, Index.cshtml is the default, navigating to /Employees will also serve Index.cshtml razor page.
Hello Venkat sir, you are an amazing online teacher.
ReplyDeleteI can't describe in words!! Thank you very much
Please create core API tutorials
aww the way of your teaching is proving off to a real good start for me.
ReplyDeletekeep making tutorials for us. you're doing a great job and providing us an immense help in the world of programming.