In all the previous examples we discussed, we have done the complete View coding in a single file. This will result in a lack of flexibility and reduced reusability.
Consider the following web page structure where the Top Section contains the company logo or banner and the Side Section contains the links to various sections of the site. The Content Section changes for every page.
If we code the complete content in a single view, we may have to duplicate the Top Section and Side Section in every page. If we want to change anything in the Side Section, we will have to change all the files. This clearly shows that a single View file is not the best solution.
The layout comes to the rescue in this scenario. The layout defines the site structure that can be reused across all the web pages. The layout does not even need to have something like the top section or side section; it can contain even a simple HTML structure where you can have common content and the body content will be rendered from individual view.
Let's build our first layout. In order to use the layout, you will need to have the following three things:
- Inform the name of the layout file—this information should be made available in
_ViewStart.cshtml. By convention, the names of all the shared files will start with an underscore and this file is located directly under theViewsfolder. - Create the Layout file—by convention, the name of the file is
_Layout.cshtmland it will be located in theSharedfolder. All the shared content, such as partial views, will also be available here. Partial Views will be discussed later in this chapter. - Create the content View file—this View file is almost same as the earlier View files that we created so far with only one difference; only page-specific content will be available in this file, and this means that you'll not have any
html,head, ortitletags here.
After the creation of _ViewStart.cshtml, _Layout.cshtml, and page-specific View files, the folder structure will be like the preceding snapshot.
Right-click on the Views folder and select Add New Item from the Context menu. Then, select MVC View Start Page from the Add New Item dialog box as shown in the following screenshot:
When you click the Add button, it will create a file with the following content:
@{
Layout = "_Layout";
}Create a folder called Shared within the Views folder. Then, right-click on the Shared folder and select Add New Item from the Context menu as shown in the following screenshot:
When you click the Add button, it will create _Layout.cshtml with the following content:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>@ViewBag.Title</title>
</head>
<body>
<div>
@RenderBody()
</div>
</body>
</html>The preceding layout file is a simple HTML content with a couple of Razor expressions. @ViewBag. The title is used to display the title information passed from the Controller and @RenderBody is the Razor expression that calls the page specific View and merges that content over there.
Before adding the View, we will need to add an action method in our HomeController file from which we will be calling our page-specific view.
Let's add an action method named Index2 as follows:
public IActionResult Index2()
{
ViewBag.Title = "This is Index2";
return View();
}The ViewBag is used to pass information from the Controller to the View. Here, we are passing the Title information from the action method to the View.
Now, right-click on the Views folder, select Add | New Item, select MVC View Page, and save the file as Index2.cshtml.
In the generated view, I have added simple Hello text. This text will be rendered in the body of the layout page. The complete code of the View file is as follows:
@*
For more information on enabling MVC for empty projects, visit http://go.microsoft.com/fwlink/?LinkID=397860
*@
@{
…
}
Hello. This text will be rendered in body of the layout page
Everything is set now. Run the application and type the URL http://localhost:50132/Home/Index2 in the browser. Please note that the port number after the local host may vary when you run the application from your PC.
As expected, you'll see the text seen in the preceding picture. However, our point is not about the text. It's about the structure of the generated HTML content.
View the source by pressing Ctrl + U (on the Chrome browser in Windows). You'll see the following HTML content:
The top content (the html, head, body, and div opening tags) and bottom content (the html, head, body, and div closing tags) come from the layout file and the text comes from the View specific to the page.