Layout pages are a special type of page that can be used as a template for other pages. They are used to define a common Layout that can be shared across multiple pages.
Why should we use Layouts?
It is not mandatory to use Layout, but the need for Layout pages arises when you want to define a common layout for multiple pages, such as a header, footer, or navigation menu. By using a Layout page, you can decouple the Layout from each individual page and make it easier to maintain and update.
Usually, in web development, we have several HTML pages that use the same header and footer format, and their head section is somewhat the same. Layout is a page where we can add the header, footer and head section so that there is no need to repeat them on pages.
The image above shows the position of a page in orange, which is placed inside a Layout. Layout parts include header and footer and an aside on the right side, all of which are marked with green color.
Use Layout in CodeBehind Framework
The Layout page is a View that is not particularly different from other Views. To specify that this is a Layout page, we need to add the @islayout attribute to the View page.
To set the layout on the page, it is enough to add the @layout attribute in the View page and write the Layout path in front of it inside two double quotes (").
Example:
Layout page (layout.aspx)
@page
@islayout
<!DOCTYPE html>
<html>
<head>
<title>@ViewData.GetValue("title")</title>
</head>
<body>
@PageReturnValue
</body>
</html>
In the example above, an aspx file (layout.aspx) has been added to the project in the wwwroot path.
Here we have specified that this page is a Layout by adding the @islayout variable to the page attributes section. PageReturnValue variable will add final values from aspx files in which this layout is introduced. Between the title tags, there is a NameValueCollection attribute (ViewData) that all aspx files have access to.
Note: Layout pages are not available when user path request by default.
View (hello-world.aspx)
@page
@layout "/layout.aspx"
@{
string HelloWorld = "Hello CodeBehind framework!";
ViewData.Add("title", "Hello World!");
}
<div>
<h1>Text value is: @HelloWorld</h1>
</div>
The above example shows an aspx file (hello-world.aspx) in which a layout is introduced.
On this page, @layout and the text inside the double quotes indicate that the page has a Layout in the path wwwroot/layout.aspx. According to the above codes, a NameValue is added to the ViewData attribute with the name title and the value Hello World!.
Note: The name value in
ViewDatais case sensitive.
Result in hello-world.aspx path
<!DOCTYPE html>
<html>
<head>
<title>Hello World!</title>
</head>
<body>
<div>
<h1>Text value is: Hello CodeBehind framework!</h1>
</div>
</body>
</html>
As you can see, the above result is obtained by calling the hello-world.aspx path.
Add Layout in series project
The following link is related to the series project that we taught in the previous tutorial:
https://dev.to/elanatframework/mvc-example-display-information-based-on-url-2309
Please run the series project in Visual Studio Code. Open the main.aspx file located in wwwroot/series_page and modify it as follows.
Main View (main.aspx)
@page
@model {SeriesModelList}
@break
+@layout "layout.aspx"
-<!DOCTYPE html>
-<html>
- <head>
- <title>Series information</title>
- <link rel="stylesheet" type="text/css" href="/style/series.css" />
- </head>
- <body>
<h1>Series information</h1>
<hr>
@foreach(SeriesModel TmpModel in @model.SeriesModels)
{
<div class="series_item">
<a href="/series/@TmpModel.SeriesUrlValue">
<h2>@TmpModel.SeriesTitle</h2>
<img src="/image/@TmpModel.SeriesImage" alt="@TmpModel.SeriesTitle">
</a>
<p>Genre: @TmpModel.SeriesGenre</p>
<p>Rating: @TmpModel.SeriesRating</p>
<p>Year: @TmpModel.SeriesYear</p>
</div>
}
- </body>
-</html>
According to the above codes, we added the layout.aspx page as the Layout of this page and we keep only the tags in the body tag and delete the rest.
The main view after separating Layout
@page
@model {SeriesModelList}
@break
@layout "layout.aspx"
<h1>Series information</h1>
<hr>
@foreach(SeriesModel TmpModel in @model.SeriesModels)
{
<div class="series_item">
<a href="/series/@TmpModel.SeriesUrlValue">
<h2>@TmpModel.SeriesTitle</h2>
<img src="/image/@TmpModel.SeriesImage" alt="@TmpModel.SeriesTitle">
</a>
<p>Genre: @TmpModel.SeriesGenre</p>
<p>Rating: @TmpModel.SeriesRating</p>
<p>Year: @TmpModel.SeriesYear</p>
</div>
}
After editing, the main.aspx file will be according to the above codes.
Then open the content.aspx file located in the wwwroot/series_page path and modify it as follows.
Content View (content.aspx)
@page
@model {SeriesModel}
@break
+@layout "layout.aspx"
-<!DOCTYPE html>
-<html>
- <head>
- <title>@model.SeriesTitle</title>
- <link rel="stylesheet" type="text/css" href="/style/series.css" />
- </head>
- <body>
<div class="series_content">
<h2>Series name: @model.SeriesTitle</h2>
<img src="/image/@model.SeriesImage" alt="@model.SeriesTitle">
<p>Genre: @model.SeriesGenre</p>
<p>Rating: @model.SeriesRating</p>
<p>Year: @model.SeriesYear</p>
<p>About: @model.SeriesAbout</p>
</div>
- </body>
-</html>
As you can see, we repeat the previous steps for the content.aspx page.
The content view after separating Layout
@page
@model {SeriesModel}
@break
@layout "layout.aspx"
<div class="series_content">
<h2>Series name: @model.SeriesTitle</h2>
<img src="/image/@model.SeriesImage" alt="@model.SeriesTitle">
<p>Genre: @model.SeriesGenre</p>
<p>Rating: @model.SeriesRating</p>
<p>Year: @model.SeriesYear</p>
<p>About: @model.SeriesAbout</p>
</div>
After editing, the content.aspx file will be according to the codes above.
In the wwwroot directory, we create a new View named layout.aspx and store the following codes in it.
Layout file (layout.aspx)
@page
@islayout
<!DOCTYPE html>
<html>
<head>
<title>@ViewData.GetValue("title")</title>
<link rel="stylesheet" type="text/css" href="/style/series.css" />
</head>
<body>
@PageReturnValue
</body>
</html>
As it is clear, the codes above are the same tags that we removed from the main.aspx and content.aspx files.
Run the project (F5 key) and then prompt for the /series path. As you can see, despite removing the HTML tags, the result is still the same as before.
If you notice, we did not set the title. For more practice, you can set ViewData in the Controller class as below:
- For main page:
ViewData.SetValue("title", "Series information") - For content page:
ViewData.SetValue("title", model.SeriesTitle)
Related links
CodeBehind on GitHub:
https://github.com/elanatframework/Code_behind
Get CodeBehind from NuGet:
https://www.nuget.org/packages/CodeBehind/
CodeBehind page:
https://elanat.net/page_content/code_behind
Top comments (0)