Creating Master Page in ASP.NET

Creating Master Page:

·         Open Visual Studio.

·         Create new ASP.NET Web site, enter name as MasterPagesApp.

·         Select Location as File System, and enter the path as D:\MyWebSites\MasterPagesApp (or any other path).

·         Select the Language which you are comfortable, for this I used C#.

·         After creating the new Web Site, you will find a page created for you named Default.aspx.

·         Delete this page and right click the application from solution explorer. Select Add New Item, select Master Page from installed Visual Studio templates and name it MainLayout, and check the Place code in separate file checkbox; this will create you a code-behind in the language you select, we work here using C#.

The MainLayOut.master will be open in Source view.  You will find this master page directive at the beginning:

<%@ Master AutoEventWireup="true" CodeFile="MainLayOut.master.cs" Inherits="MainLayOut" Language="C#" >

As you see, the attributes of the Master directive is common to the ones of the Page directive, and they are self-descriptive.

·         CodeFile is the path of the code behind file and it can be VB or C#, note that in one Web Site you can mix between both languages.

·         Inherits decides the class within the code file to be used.

·         Language is the language of the code behind file.

·         AutoEventWireup is so important; for any page there is an automatic way to bind the events to methods in the same aspx file or in code behind.  If this attribute is true, Page events are automatically bound to methods that are using naming convention as Page_event.  For example Page_Load, Page_Init, and Page_PreInit (this is the event fired before creating the controls of the page).  This is one disadvantage that the standard events of the page should adhere to this naming convention, but if you set it to false, it will give you more flexibility to use any names for the event handlers. in VB.NET.

See ContentPlaceHolder section:

<asp:contentplaceholder id="ContentPlaceHolder1" runat="server"> </asp:contentplaceholder>

This server control is the most important for the master pages as this is the zone in which the content pages will be rendered.

Next, do the following:

·         Switch to the Design of the master page, you will get the ContentPlaceHolder1 shown, now you can design the master page just as any aspx page, so for this practice we'll do a simple master page.

·         From Layout menu select Insert Table, Select Template option, then select Header, footer and side, then drag the ContentPlaceHolder1 control into the right middle cell of the table you have just added.

·         Add one label into the left middle cell, and the logo of CodeProject to the upper cell of the table, you should have the same as in the following figure

·         Double click anywhere at the master page. This will open the code behind and will add the Page_Load event handler and write the following code:

Label1.Text = "The Time of Server is: " + DateTime.Now.TimeOfDay;

The above code will show the time of the server at the label.

Creating Content Page:

You should know that the content page is just one aspx page, but you bind this page to one master page while you are creating it.  To do this, right click your web application from solution explorer and select Add New Item, select Web Form from the installed templates and check Select Maser Page, enter the name of the new page as myContentPage.aspx.

The page you have just added will open in source view and you will find one entry.  Add the MasterPageFile attribute set to the value of the master page file you have selected before.  You will also find one Content server control added by default and the attribute ContentPlaceHolderID assigned to ContentPlaceHolder1.  This is the default value which refers to the ContentPlaceHolder control at the master page and if you have renamed this control at the master page, you should change it now to the correct ID.  This sets the zone in which this content page will be shown as we said before.

Switch to the design view of MyContentPage.aspx.  You will get all the master page contents added by all the contents of the master page is dim because they are not editable, only the Content1 will be enabled if you click the white area, and you can now add any controls just as you do for any aspx page.

Double click the white area of Content1, you will get the event handler of Page_Load, add the following code:

Label1.Text = this.MasterPageFile;

The above code will show the path of the Master Page file in the label.

Saving Master Page path in web.config:

There is one technique by which we can make all the pages comprising our web application as content pages and we can bind all the pages to one master page, this master page that will be a template to our entire application.  It is advisable to save the path of this master page in web.config that we can do as following:

<configuration>

<pages masterpagefile="~/sitetemplate.master">

</configuration>

If you specify a MasterPageFile for your page, it will override your web.config value but the importance of the value of web.config is that it guarantees that all the pages added to your application are bound to this master page file.  So, if you have more than one master page, you can just change the web.config value, and this will update the whole application pages with no need of recompilation.

ASP.NET Master Pages

Master Pages in Asp.Net

Definition:

ASP.NET master pages allow us to create a consistent layout for the pages in our application.  A single master page defines the look and feel and standard behavior that we want for all of the pages or a group of pages in our application.  We can then create individual content pages that contain the content we want to display.  When we request the content pages, they merge with the master page to produce output that combines the layout of the master page with the content from the content page.

Working of Master Page:

Master pages actually consists two pieces, one is the master page itself and other is one or more content pages.

Master Pages – A master page is an ASP.NET file with the extension .master (eg:  Example.master) with a predefined layout that can include static text, HTML elements, and server controls.  The master page is identified by a special directive, “@Master” that replaces the “@Page” directive that is used for ordinary .aspx pages.  See the below how the directive looks like.

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

The “@Master” directive can contain most of the same directives that a “@Control” directive can contain.  For example, see the following master-page directive which includes the name of a code-behind file, and assigns a class name to the master page.

<%@ Master Language="C#" CodeFile="MasterPage.master.cs" Inherits="MasterPage" %>

In addition to the “@Master” directive, the master page also contains all of the top-level HTML elements for a page, such as html, head, and form.  For example, in a master page we might use an HTML table for the layout, an img element for our company logo, static text for the copyright notice, and server controls to create standard navigation for our site.  We can use any HTML and any ASP.NET elements as part of our master page.

Replaceable Content Placeholders:

The master page also includes one or more “ContentPlaceHolder” controls in addition to static text and controls that will appear on all pages.  These placeholder controls define regions where the replaceable content will appear.  In turn, the replaceable content is defined in content pages.  After we defined the ContentPlaceHolder controls, a master page might look like the following.

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 

    1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >

<head runat="server" >

    <title>Master page title</title>

</head>

<body>

    <form id="form1" runat="server">

        <table>

           <tr>

               <td><asp:contentplaceholder id="Main" runat="server" /></td>

               <td><asp:contentplaceholder id="Footer" runat="server" /></td>

           </tr>

        </table>

    </form>

</body>

</html>

Content Pages:

We can define the content for the master page's placeholder controls by creating individual content pages, which are ASP.NET pages (.aspx files and, optionally, code-behind files) that are bound to a specific master page.  The binding is established in the content page's @Page directive by including a “MasterPageFile” attribute which points to the master page to be used.

For example, a content page might have the following @Page directive, which binds it to the Master1.master page.

<%@ Page Language="C#" MasterPageFile="~/MasterPages/Master1.master" Title="Content Page"%>

In the content page, we can create the content by adding Content controls and mapping them to ContentPlaceHolder controls on the master page.

For example, the master page might have content placeholders called Main and Footer.  In the content page, we can create two Content controls, one that is mapped to the ContentPlaceHolder control, “Main” and the other mapped to the ContentPlaceHolder control “Footer”, as shown in the following figure.

After creating Content controls, we can add text and controls to them.  In a content page, anything that is not inside the Content controls except script blocks for server code results in an error.  We can perform any tasks in a content page that we do in an ASP.NET page.

For example, we can generate content for a Content control using server controls and database queries or other dynamic mechanisms.

See below for how the content page might look like.

<% @ Page Language="C#" MasterPageFile="~/Master.master" Title="Content Page 1" %>

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

    Main content.

</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="Footer" Runat="Server" >

    Footer content.

</asp:content>

The @Page directive binds the content page to a specific master page, and it defines a title for the page that will be merged into the master page.  Note that the content page contains no other markup outside of the Content controls.  (The master page must contain a “head” element with the attribute runat="server" so that the title setting can be merged at run time.

Note:  We can create multiple master pages to define different layouts for different parts of our site, and a different set of content pages for each master page.

Advantages:

·         They allow us to centralize the common functionality of our pages so that we can make updates in just one place.

·         They make it easy to create one set of controls and code and apply the results to a set of pages.  For example, we can use controls on the master page to create a menu that applies to all pages.

·         They give us fine-grained control over the layout of the final page by allowing us to control how the placeholder controls are rendered.

·         They provide an object model that allows us to customize the master page from individual content pages.

Run-time Behavior of Master Pages:

At run time, master pages are handled in the following sequence:

1.       Users request a page by typing the URL of the content page.

2.       When the page is fetched, the @Page directive is read.  If the directive references a master page, the master page is read as well.  If this is the first time the pages have been requested, both pages are compiled.

3.       The master page with the updated content is merged into the control tree of the content page.

4.       The content of individual Content controls is merged into the corresponding ContentPlaceHolder control in the master page.

5.       The resulting merged page is rendered to the browser.

Master Page and Content Page Paths:

When a content page is requested, its content is merged with the master page, and the page runs in the context of the content page.

For example, if you get the CurrentExecutionFilePath property of the HttpRequest object, whether in content page code or in master page code, the path represents the location of the content page.

The master page and content page do not have to be in the same folder.  As long as the MasterPageFile attribute in the content page's @Page directive resolves to a .master page, ASP.NET can merge the content and master pages into a single rendered page.

Referencing External Resources:

Both the content page and master page can contain controls and elements that reference external resources.

For example, both might contain image controls that reference image files, or they might contain anchors that reference other pages.

The context for the merged content and master pages is that of the content page.  This can affect how you specify URLs for resources, such as image files and target pages, in anchors.

Server Controls:

In server controls on master pages, ASP.NET dynamically modifies the URLs of properties that reference external resources.

For example, we might put an Image control on a master page and set its ImageUrl property to be relative to the master page.  At run time, ASP.NET will modify the URL so that it resolves correctly in the context of the content page.

ASP.NET can modify URLs in the following cases:

·         The URL is a property of an ASP.NET server control.

·         The property is marked internally in the control as being a URL. (The property is marked with the attribute UrlPropertyAttribute.) In practical terms, ASP.NET server control properties that are commonly used to reference external resources are marked in this way.

Other Elements:

ASP.NET cannot modify URLs on elements that are not server controls.

For example, if we use an img element on a master page and set its src attribute to a URL, ASP.NET will not modify the URL.  In that case, the URL will be resolved in the context of the content page and create the URL accordingly.

In general, when working with elements on master pages, it is recommended that we use a server control, even for elements that do not require server code.

For example, instead of using an img element, use an Image server control.  In that way, ASP.NET can resolve URLs correctly and you can avoid maintenance issues that might arise if we move the master or content page.

Master Pages and Themes:

We cannot directly apply an ASP.NET theme to a master page.  If we add a theme attribute to the @Master directive, the page will raise an error when it runs.

However, themes are applied to master pages under these circumstances:

·         If a theme is defined in the content page.  Master pages are resolved in the context of content pages, so the content page's theme is applied to the master page as well.

·         If the whole site is configured to use a theme by including a theme definition in the pages Element (ASP.NET Settings Schema) element.

Scoping Master Pages:

We can attach content pages to a master page at three levels:

At the page level:  We can use a page directive in each content page to bind it to a master page, as following.

<%@ Page Language="C#" MasterPageFile="Example.Master" %>

At the application level:  By making a setting in the pages element of the application's configuration file (Web.config), we can specify that all ASP.NET pages (.aspx files) in the application automatically bind to a master page, as following.

<pages masterPageFile="Example.Master" />

At the folder level:  This strategy is like binding at the application level, except that we make the setting in a Web.config file in one folder only. The master-page bindings then apply to the ASP.NET pages in that folder.