Master Page in ASP.NET

100

Article

MasterPagesDemoApp.rar

MasterPage

The extension of MasterPage is '.master'.
MasterPage cannot be directly accessed from the client because it just acts as a template for the other Content Pages.
In a MasterPage we can have content either inside ContentPlaceHolder or outside it. Only content inside the ContentPlaceHolder can be customized in the Content Page.
We can have multiple masters in one web application.
A MasterPage can have another MasterPage as Master to it.
The content page content can be placed only inside the content tag.
Controls of MasterPage can be programmed in the MasterPage and content page but a content page control will never be programmed in MasterPage.
A master page of one web application cannot be used in another web application.
The MasterPageFile property of a webform can be set dynamically and it should be done either in or before the Page_PreInit event of the WebForm. Page.MasterPageFile = "MasterPage.master". The dynamically set Master Page must have the ContentPlaceHolder whose content has been customized in the WebForm.
The order in which events are raised: Load (Page) a Load (Master) a LoadComplete (Page) i.e. if we want to overwrite something already done in Load event handler of Master then it should be coded in the LoadComplete event of the page.
Page_Load is the name of method for event handler for Load event of Master. (it's not Master_Load).

Example:

Adding a MasterPage to the Project

Add a new MasterPage file (MainMaster.master) to the Web Application.
Change the Id of ContentPlaceHolder in <Head> to "cphHead" and the Id "ContentPlaceHolder1" to "cphFirst"
Add one more ContentPlaceHolder (cphSecond) to Master page.
To the master page add some header, footer and some default content for both the content place holders.

<form id="form1" runat="server">
Header...<br />
<asp:ContentPlaceHolder id="cphFirst" runat="server">
This is First Content Place Holder (Default)
</asp: ContentPlaceHolder>
<br />
<asp:ContentPlaceHolder ID="cphSecond" runat="server">
This is Second Content Place Holder (Default)
</asp:ContentPlaceHolder>
<br /> Footer...
</form>
To the web application add a WebForm (Default.aspx) a Check (Select Master Page) in New Item Dialog
Note the attribute "MasterPageFile" in @Page directive of the WebForm.
Delete the <content tag for the ContentPlaceHolderId="cphSecond".
Run the WebForm - The output rendered includes the Header, Footer, Contentof cphSecond in Master and the content of <content tag for ContentPlaceHolderId="cphFirst" in webform.
Here we understood the importance of ContentPlaceHolder in Master and Content in WebForm.
Add a Label in the master page (outside ContentPlaceHolder)

<asp:Label ID="lblMaster" runat="server" Text="In Master"/>
Add a Button to WebForm (inside content tag)

<asp:Button ID="btnDemo" runat="server" onclick="btnDemo_Click" Text="Set Label of Master" />
Handle the Click event of above button and add to it the code as mentioned below.

protected void btnDemo_Click(object sender, EventArgs e)
{
//Get reference to Label control (lblMaster) in the master page.
Label lbl = (Label)Master.FindControl("lblMaster");
lbl.Text = "From WebForm Page...";
}
Run the WebForm and Click on Button to see that the text in master page Label has changed.
To the class in MainMaster.master.cs add the following property.

public Label MasterLabel
{
get { return lblMaster; }
}
To the Default.aspx add the following

<%@ MasterType VirtualPath="~/MainMaster.master" %>
Replace the existing code in btnDemo_Click with the following.

//To set Text of Label in master page using the public property MasterLabel
Master.MasterLabel.Text = "From WebForm";
//The above line would work only if <%@MasterType Directive is added to current page

Importance of UniqueID and ClientId

Add a TextBox and HTML Button to webform / content page which has master page.
<asp:TextBox runat="server" ID="txtWebForm"/>
<input type="button" value="ClientButton" onclick="ShowAlert()" />
Add the follwing to the webform (cphHead is Id of ContentPlaceHolder added to Head section of Master Page)

<asp:Content ID="cntHead" ContentPlaceHolderID="cphHead" runat="server">
    <script language="javascript" type="text/javascript">
        function ShowAlert()
        {
            txt = document.<%=Page.Form.Name%>.<%=txtWebForm.UniqueID%>
            alert(txt.value);
           }
    </script>
</asp:Content>

Up Next

Ebook Download

View all

Display a Bootstrap bar chart according to the database data values using master page in ASP.NET C#.

Read by 2 people

Download Now!

Learn

View all