Master Page in Asp.Net

This asp.net tutorial, we will discuss what is a master page in asp.net? what is a content placeholder in asp.net master page?

Also, we will see how to access master page controls from a content page in asp.net? And how to get control value using JavaScript with master page in Asp.Net.

What is Master Page in Asp.Net?

To create web pages with a consistent layout you need a way to define these relatively static regions in a single template file. Versions of ASP.NET prior to 2.0 did not have a template solution so you were forced to duplicate your page layout on every single page in the website. Fortunately, this is no longer the case due to master pages.

The biggest benefit of master pages is that they enable you to define the look and feel of all the pages on your site in a single location.

This means that if you want to change the layout of your site i.e, if you want to move the menu from the left to the right, you only need to modify the master page and the pages based on this master will pick up the changes automatically.

To some extent, a master page looks like a normal ASPX page. It contains static HTML such as the , , and elements, and it can also contain other HTML and ASP.NET server controls.

A master page uses an @ Master directive that identifies the file as a master page.

VB.NET
<%@ Master Language="VB" %>

C#.NET
<%@ Master Language="C#" %>

The content pages, which are essentially normal ASPX files, but without the usual code you find in them like the <html>, <head>, <body> and <form> elements, are connected to a master page using the MasterPageFile attribute of the Page directive:

VB.NET
<%@ Page Title="" Language="VB" MasterPageFile="~/MasterPages/Test.master" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="_Default">

C#.NET
<%@ Page Title="" Language="C#" MasterPageFile="~/MasterPages/Test.master" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default">

The page-specific content is then put inside a Content control that points to the relevant ContentPlaceHolder:

<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
</asp:Content>

A master page is useless without a content page that uses it. Generally, you’ll only have a few master pages, whereas you can have many content pages in asp.net.

What is ContentPlaceHolder in Masterpage in asp.net?

In ASP.NET Website development master page is frequently used. A master page defines a common structure, layout, navigation and default content for all of the web pages of a web application including headers, footers, style definitions, or navigation bars.

The master page can be shared by any of the pages in the Web site, called the Content page. A content page is a web page that is connected to the master page and that displays its own individual content along with the content of the master page.

The ContentPlaceHolder is used by the content page to display its own content.

Below is the ContentPlaceHolder tag:

<head runat="server">
<title>Untitled Page</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</div>
</form>
</body>

Get control value using JavaScript with master page in Asp.Net

Now, we will see how to get control values using JavaScript with master page in Asp.Net.

If you are trying to get a control value using JavaScript with Master page associated with it like below, then you will face some issue while rendering the page.

<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">
<script type="text/jscript">
function GetName() {
var name = document.getElementById(‘ContentPlaceHolder1_txtSequenceNumber’).value;
}
</script>

<asp:TextBox ID="txtName" runat="server"></asp:TextBox>

if you try to retrieve value by giving it id like:

txtName

or

ContentPlaceHolder1_txtName

Then while rendering sometimes the control id changed to ctl00_ContentPlaceHolder1_txtName. So you will not get the proper value.

Actually when MasterPages are used they tend to rename all the controls in the content pages which have runat=”server” attribute.

The best way to overcome this issue is to use ClientID property of the controls like below:

<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">
<script type="text/jscript">
function GetName() {
var name = document.getElementById(“<%=txtName.ClientID%>").value;
}
</script>

<asp:TextBox ID="txtName" runat="server"></asp:TextBox>

Access master page controls from content page in asp.net

Now, we will see how to access master page controls in content pages in Asp.Net.

In this example, we have a Label control in the master page and in the content page we are going to retrieve the Label and we will write something to the control through the content page.

We can retrieve the master page control in the content page by using the FindControl method of Master class.

Master Page Code:

<%@ Master Language="C#" AutoEventWireup="true" CodeFile="MasterPage.master.cs" Inherits="MasterPage" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Get Master Page control in content page</title>
    <asp:ContentPlaceHolder id="head" runat="server">
    </asp:ContentPlaceHolder>
</head>
<body>
    <form id="form1" runat="server">
    <div>
       Master Page: <asp:Label ID="lblMaster" runat="server" Text=""></asp:Label>
        <asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server">
        </asp:ContentPlaceHolder>
    </div>
    </form>
</body>
</html>

Content Page Code:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
public partial class Default12 : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            Label lbl = ((Label)Master.FindControl(“lblMaster"));
            lbl.Text = “We are writting in the master page label !!!";
        }
    }
}

Similarly if you want to retrieve textbox, we can write like below:

TextBox lbl = ((TextBox)Master.FindControl(“txtMaster"));

You may like following asp.net tutorials:

Hope this asp.net tutorial explains, what is a master page in asp.net? What is ContentPlaceHolder in Master page in asp.net? How to get control value using JavaScript with master page in Asp.Net? And how to access master page controls from a content page in asp.net.

Donwload Hub site pdf

Download SharePoint Online Tutorial PDF FREE!

Get update on Webinars, video tutorials, training courses etc.

>