Master Page Concept In MVC

Ankur Mistry
8y
12.2k
0
4

Article

Earlier in the ASP.NET Web Form there is a concept called master page, so that everything that is common for the website you can put into the master page, or in some cases you can create a Custom User Control for Header, Footer and Left Menu.

Let us create a Web Page app first to understand Master page concept.

Open your Solution Explorer and check for Site.Master, Open the file.

In the Site.Master we will write all the common things that we want throughout the project pages, like top navigation menu etc.

Code

And for footer check below image, in the footer we have common links, social media links and copyright text, which is common for all the page, so no need to write on all the pages instead only make the changes in Site.Master page.

For Displaying the content we need container, for that we have ContentPlaceHolder.

Footer

Basically we have a design something similar as per below screen, a page that has top navigation Header, footer and a Container.

Now open your Home, About, contact pages and check top line - MasterPageFile="~/Site.Master" that means you have included the master page in your current page.

Run your application and check all pages, like Home, About, and Contact it will display Top Menu and Footer links along with the page content in the container.

Now, I have created one MVC Project, we will find out how this master page concept works in MVC, Check below Screen.

Open your Solution Explorer, and go to Views Folder, open Home Folder, there are About.cshtml , Contact.cshtml and Index.cshtml files.

which is same as our WebForms pages About.aspx, Contact.aspxand Index.aspx.

There is one more folder called Shared, Which contains shared views just like our Site.Master.

In the Views folder, there is _ViewStart.cshtml file, in that file we can set the default layout, for example here its '_Layout.cshtml'

@{
Layout = "~/Views/Shared/_Layout.cshtml";
//Layout = "~/Views/Shared/LeftPanel.cshtml";
}

Now, check your _Layout.cshtml file. Its contents has two parts, in 1st div we have html links for Header and 2nd div have footer and in between there is

@RenderBody()

That means this is our container, All the contents of our About.cshtml , Contact.cshtml and Index.cshtml render here.

Now let's Create a left panel as shown in the next screen.

Right click on Shared Folder and add new View, give a name LeftPanel.cshtml

Create as a Partial View. Make sure you have ticked Create as a partial view.

And add below tag in LeftPanel.cshtml

<hgroup>
<h1 class="text-danger">Left Panel</h1>
<h2 class="text-danger">This is Left Panel</h2>
</hgroup>

Now, suppose in a real time scenario you want to display this panel on only selected pages, say only on the about page.

For that open the 'about.cshtml' page and add

@Html.Partial("LeftPanel")

That means this Partial View will only display on About page.

Now run your application and go to About page, it displays the left panel here, but not on home page.

Now, one more important part, let's assume you want to display some static content in View which is not a part of RenderBody(),

Say here we want to display content on contact.cshtml view that is not a part of RenderBody() and you want to display the text below the footer.

For that I have added the below code after the footer part in _Layout.cshtml.

<div style="text-align:right"> @RenderSection("Bottom", required: false)</div>

Now, open contact.cshtml and add Section named-> Bottom which we have created in _Layout.cshtml.

This @Section will decide where to render this section on Layout page. Whatever the content written in the Bottom section will be displayed after the footer part in contact.cshtml.

@section Bottom{<h3>This is Bottom section</h3>}

@RenderSection("Bottom", required: false) Has parameter required: true/false

That means if it's false that means we don’t need to use the Bottom section in all pages.

Hope you like the article, don't forget to give your feedback and comments.