Post
Ask Question

Creating Master Page In ASP.NET

Introduction

Master page allows you to create a consistent look and behavior for all the pages in your web applications. Master Page Design is common for all the pages. Master page actually consists of two pieces, the master page itself and one or more content pages. A master page is an ASP.NET file with the extension .master.  ContentPlaceholder control, which defines a region on the master page, is where the content pages can plug in page specific content.

Important points about master pages
  • The @ Master directive defines it as a master page.
  • ContentPlaceHolder control is only available for master pages.
  • ASP.NET page that uses master pages is called content pages.
  • Master page - Content page relationship, let's look at the picture given below.
pages

pages

Step 1
 
Create new project in Visual Studio 2015

Go to File-> New-> Web Site-> Visual C#->ASP.NET Empty Website-> Entry Application Name-> OK.

pages

pages

Step 2
 
Create Master Page

Project name-> Add-> Add New Item->Visual C#-> Master Page->Write Master Page Name-> Add.

pages

pages

HomePage.master master page is created.

pages

Add HTML code in Homepage.master page, as shown below.

Note

Here, we used contentplaceholder control.
  1. <%@ Master Language="C#" AutoEventWireup="true" CodeFile="HomePage.master.cs" Inherits="HomePage" %>  
  2.     <!DOCTYPE html>  
  3.     <html xmlns="http://www.w3.org/1999/xhtml"> head runat="server">  
  4.     <title></title>  
  5.     </head>  
  6.   
  7.     <body>  
  8.         <form id="form1" runat="server">  
  9.             <div>  
  10.                 <table border="1">  
  11.                     <tr>  
  12.                         <td colspan="2" style="text-align: center">  
  13.                             <h1>Header</h1>  
  14.                         </td>  
  15.                     </tr>  
  16.                     <tr>  
  17.                         <td style="text-align: center; height: 480px; width: 250px">  
  18.                             <h1>Menu</h1>  
  19.                         </td>  
  20.                         <td style="text-align: center; height: 480px; width: 700px">  
  21.                             <asp:ContentPlaceHolder ID="MainContentPlaceHolder1" runat="server">  
  22.                                 <h1>you can change Content here</h1>  
  23.                             </asp:ContentPlaceHolder>  
  24.                         </td>  
  25.                     </tr>  
  26.                     <tr>  
  27.                         <td colspan="2" style="text-align: center">  
  28.                             <h1>Footer</h1>  
  29.                         </td>  
  30.                     </tr>  
  31.                 </table>  
  32.             </div>  
  33.         </form>  
  34.     </body>  
  35.   
  36.     </html>  
Go to the design mode and you will see the image, as shown below. 

pages

Step 3
 
Adding the Content Pages to Master Page

Master Page -> Add Content Page.

pages

pages

Note
  1. write your code inside Content Placeholder.See the below code.  
  2. <%@ Page Title="" Language="C#" MasterPageFile="~/HomePage.master" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %> < asp: Content ID = "Content1"  
  3. ContentPlaceHolderID = "MainContentPlaceHolder1"  
  4. runat = "Server" > < table > < tr > < th > < h1 > Student Information < /h1> < /th> < /tr> < tr > < td > < b > Name: Chetan Nargund < /b> </td > < /tr> < tr > < td > < b > College: AIT < /b> </td > < /tr> < tr > < td > < b > City: Bangalore < /b></td > < /tr> < /table> < /asp:Content>  
Output

pages

I hope you liked this. Thanks.