In any professional application there are some common UI parts of the application which does not change throughout the application or we can say these portions remain the same throughout the application, Which actually gives the application a common look and feel.
For any application a common look and feel are very important for their branding. For example, whenever we remember Facebook, our mind only thinks about two colors Blue and white. This is because all the common portions of Facebook like its Header, Footer, and Logo are Blue and White in color which gives the user a sweet experience. Actually, a human mind can only remember the things that repeat themselves frequently, the same concept is applied in website or web application development, the more used parts are kept the same throughout the application so that the user became used to it.
Now, you got the point why common look and feel is important. Now the question arises of how to give our application a common look and feel. There are two ways.
1. Copy Header, Footer, and all other common UI parts on each page of your application. Or
2. Create a single page with the common UI parts and refer the same page to other pages of your application.
Obviously, the first sloution is more time consuming and increases duplicate codes so it is not efficient. While the second solution is time saving and increases reusability and supports faster development.
Asp.Net MVC Layout is just an implementation of second solution. Meaning all the common UI portion will go to Layout page and all other pages of your application which changes dynamically will be inherited from your Layout page. Refer the below diagram for better understanding.
It should be very clear from the above figure that all the child pages (view pages) will be merged with the Layout page at run time. Now, it is time to learn ,how to create Layout in MVC and how the child pages will inherit from Layout page.
To create a Layout page Right click in the shared folder of your application and Add Layout as shown below. As Layout page is meant for reusability shared folder is the best place to keep any Layout page.
Two important question that needs to be answered are.
1. How Layout page is inherit from view pages.
2. What is RenderBody and RenderSection.
Let's try to answer one by one.
• The view page can be inherited from the Layout page in any of the following ways.
1. Defining Layout's path in the _ViewStart page.
2. Defining Layout's path in the View page.
3. Defining Layout's path in the Action Method.
i).Defining Layout path in the _ViewStart.
In Asp.Net MVC life cycle ViewStart runs each time before rendering the actual view on the screen, and checks whether the path for Layout is specified or not, if it finds the path for the Layout ,then that Layout becomes the Layout for the executing view and merges with the view.
The ViewStart can be used in two ways.
i)Global Level:- The ViewStart which resides at the bottom in the view folder is considered as the global VewStart and the Layout specified there ,becomes the default Layout for every view in your application .Meaning ,If no Layout is specified at the page level or Action level then this Layout will be used by default.
ii)Folder level:- One can also create ViewStart at the folder level meaning if you create ViewStart in the Supplier folder (Auto generated to keep all views of Supplier controller ) ,then the specified Layout becomes the default Layout for all views within Supplier folder.
While adding view for any Action Method if you have specified Layout in the _ViewStart then leave the Layout option as it is meaning blank like shown in the below figure.
ii)Defining Layout path in the View Page.
You can specify the Layout's path in view page ,which will override the Layout specified in the _ViewStart at run time with the syntax specified below.
@{
Layout = "~/Views/Shared/_MyLayout.cshtml";
}
iii)Defining Layout in the Action Method
You can also specify Layout in the Action Method like given below.
public ActionResult Index()
{
return View("Index","_MyLayout");
}
What does @RenderBody and @RenderSection do
RenderBody
RenderBody
RenderBody can be considered as a placeholder for dynamic content (the child Views) inside a Layout View. Meaning,Wherever you will specify @RenderBody() in your Layout page the dynamic content(View) will be merged at that very place at run time. Refer the below picture if you are unable to understand.
RenderSection
There are some section of view which should be in Layout but are dynamic in nature and changes per view meaning are different for different view ,so they can't be kept in Layout page directly for example Title of a site changes for every navigation that is for each view we have different Title, but Title of Page should always be defined in the Head Section similarly each view may contain different CSS and Script which are placed in the Head and bottom of the body tag of an Html file respectively .For such situations we can create Sections with specific name in the Layout Page and each child page are bound to define those sections if its required property is set to true. At the run time the Sections will be merged at the appropriate place in the Layout where we have specified the Section while the other part of the view will be merged at the place where RenderBody is defined.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
@RenderSection("Title",true)
@RenderSection("Style", false)
</head>
<body>
<div>
@RenderBody()
</div>
@RenderSection("Script", false)
</body>
</html>
It has two overloaded versions one that only accepts the section name and in that case each view be bounds to define that section otherwise it will give run time error.
@RenderSection("Title")
The other overloaded version accepts the Name and Required boolean parameter which specifies whether the section is manidotry or not.
@RenderSection("Style", false)
To define section in the view page we use below syntax.
@section Title{
MyTitle
}
Difference between @RenderBody and @RenderSection
1. A Layout can have only one RenderBody() but multiple RenderSection().
2. RenderBody() doesn't have any parameter but RenderSection() have parameters.
3. RenderBody() is compulsory in a Layout but RenderSection() is not.
4. RenderBody() renders all the content of view except those specified in the named section but RenderSection() only renders its own content.