The Need for Master Pages

In this lesson, you will learn about the need for and evolution of master pages in ASP.NET in Visual Studio IDE. Master pages are created in a website to enhance modularity and user-friendliness. They help standardize the designing elements like header, footer, navigation menus, and other parts, which are common to the entire web site and present on every single page of the web application.

Introduction

Websites always use some elements repeatedly, like menu logos, headers, footers, and sidebars. Some developers simply copy and paste the code for the common elements to every page. This works, but the process is very cumbersome. Every change to any of the elements needs to be done to each page manually. Formerly, this was the only way to duplicate the change.

Another more sophisticated way was to include all the common elements into a so-called ‘include file’. Then a link to this page would be included whereever needed. Like at the top, the ‘header.aspx’ would be included, and at the bottom, ‘footer.aspx’ would be included. But, closing of the HTML tags was difficult. Web pages sometimes displayed strange results because of inappropriate, non-existent tag openings or closings. This made web developers unable to see the whole web page.

Then, web developers tried using user controls to encapsulate common sections of their web pages. The Drag-and-Drop technique was used, but the common areas were displayed only as gray boxes, and visualizing the webpage was not possible. The issue of matching tags remained the same.

Master pages

Then, the ASP.NET team developed the idea of master pages: a unique way to apply templates to web applications. User controls are embedded within the page and are doomed to duplication. But master pages live outside the aspx page. The master pages draw distinct lines between the common areas and unique content areas of each page.

Master pages provide an easy template that is used by any number of ASP.NET pages in the web application. A master file with a .master extension is created, which is referenced by the subpage or the content page.

While deploying a master page, you can see the template in the IDE and the design of the content page in the Design part of the IDE.

Benefits of master pages

Many people and enterprises find using master pages ideal, as the technology models their typical business requirements. Since most companies want to apply a common look and feel across the intranet, they can provide the divisions of the company with a .master file to use while creating a department’s section of the intranet.

Once a master page has been defined, it can be bound to new ASP.NET pages through the tick of a checkbox. These content pages include content placeholder controls. When the web page is opened in a browser, ASP.NET’s engine creates the master page’s control hierarchy and injects the control pages hierarchy at the proper places. This combined control hierarchy is rendered and the resulting HTML is rendered to the end user’s browser.

  • HTML
html
Master page with height 900 px
Press + to interact
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"> head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<table border="1">
<tr>
<td colspan="2" style="text-align: center">
<h1>Header</h1>
</td>
</tr>
<tr>
<td style="text-align: center; height: 480px; width: 250px">
<h1>Menu</h1>
</td>
<td style="text-align: center; height: 480px; width: 700px">
<asp:ContentPlaceHolder ID="MainContentPlaceHolder1" runat="server">
<h1>you can change Content here</h1>
</asp:ContentPlaceHolder>
</td>
</tr>
<tr>
<td colspan="2" style="text-align: center">
<h1>Footer</h1>
</td>
</tr>
</table>
</div>
</form>
</body>
</html>