21 February 2014

Master page in Asp.net



When we want the same layout for different web pages in a applicaiton, then we can use the asp.net master page. Instead of creating the same layout in all pages we can simple add an master page in the application and create the layout in the master page. So that the layout will be applied to all the content pages (web pages that uses the master page).
Advantages of master page :
  • Reduces the re-work, i.e. common layout that we give in master page will applied to all the web pages, no need to write it in individual pages.
  • Easy maintenace, i.e. Any changes need to be done in the layout if we update in the master page automatically applied to all the web pages
  • Common controls placed in master page will be applicable to all the pages. ex: menu bar, search, ..
Sample master page :
<%@ Master Language="C#" AutoEventWireup="true" CodeFile="MasterPage.master.cs"Inherits="MasterPage" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <asp:ContentPlaceHolder id="head" runat="server">
    </asp:ContentPlaceHolder>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server">
       
        </asp:ContentPlaceHolder>
    </div>
    </form>
</body>
</html>
asp:ContentPlaceHolder between head tag
The asp:ContentPlaceHolder which is written in between head tag will be used to apply the styles, css files and javascript files which are common to all the web pages.
asp:ContentPlaceHolder between body tag
The content pages (web pages that are using the master page) will be renderd as child controls for the asp:ContentPlaceHolder which is written in between body tag. i.e. After the common layout created, the individual page controls design will be rendered under ContentPlaceHolder mentioned in body tag.
Sample content Page :
<%@ Page Title="" Language="C#" MasterPageFile="~/MasterPage.master" AutoEventWireup="true"
    CodeFile="ForgotPassword.aspx.cs" Inherits="ForgotPassword" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="Server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">
    <asp:TextBox ID="txtEmailID" runat="server"></asp:TextBox><br />
    <asp:Button ID="btnSubmit" runat="server" Text="Submit" />
</asp:Content>
Applying master page :
We can apply master page in 3 levels.
  • Page Level : 
    In page directive of content page we can define the master page
<%@ Page Title="" Language="C#" MasterPageFile="~/MasterPage.master" %>
  • Application level : 
    In web.config file by setting the masterPageFile attribute of the pages element
<pages masterPageFile="MasterPage.master">
  • Folder level : 
    Add web.config file In Folder level and set the masterPageFile attribute of the pages element

No comments:

Post a Comment