Why Use Layout?
Tags: tutorial, dotnet, beginners, backend
Published: 2024-06-18 22:10:40

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.

![Layout in CodeBehind Framework](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/37p0tba1b3mh3vaizfd2.jpg)

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](https://github.com/elanatframework/Code_behind) 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)
```html
@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)
```html
@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 `ViewData` is case sensitive.

Result in hello-world.aspx path
```html
<!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](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)
```diff
@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
```html
@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)
```diff
@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
```html
@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)
```html
@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