Master Page and Content Page

Ganeshji
Posted by in ASP.NET category on for Beginner level | Points: 250 | Views : 51530 red flag
Rating: 4 out of 5  
 3 vote(s)

Here i have tried to discuss Master Page handling concept in details.

Introduction


Using Master page we can create a consistent layout for the pages in our application.  The look and feel of all the pages in our application can be defined using a single master page. Individual content pages are created which contain the content which we want to display.


Master Page


Extension of Master page is .master. The master page is identified by a special @Master directive that replaces the @Page that is used for ordinary .aspx . The @Master directive can contain most of the same directives that an @Page directive can. In addition to the @Master directive, the master page also contains all the top-level HTML elements for a page, such as <html>, <head> and <form>. On the master page we can include one or more ContentPlaceHolder controls that define regions where replaceable content will appear. We can also use HTML and ASP.NET elements as part of our master page.




Content Page


Content for the placeholders can be defined by creating individual content pages(.aspx). Such Content Pages are bound to the specific master page.The binding of the content page with the master page is possible, using @Page directive and MasterPageFile attribute. Extension of Content page is .aspx




Run-Time Behavior of Master Pages



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

1. Content Page is requested in the browser.
2. ASP.NET processes the request.
    a. ASP.NET fetches the page.
    b. @Page directive is read.
    c. If the directive references a master page, the master page is read as well.
    d. ASP.NET fetches the master page.
    e. The master page with the updated content is merged.
    f. At last the resulting merged page is rendered to the browser.

The process is described in the following diagram:




How to create a Master Page


1. Right Click the web site present on the Solution Explorer.
2. Add New Item.
3. Click Master Page.
4. In the name box, by default MasterPage.master appears. But we can change its name also. Only extension should be .master.
5. Select C# language in the Language list.
6. Now click Add.

Designing the Master Page


When a new master page is created,  two ContentPlaceHolder controls are available in it. We can add additional ContentPlaceHolder controls on the master page. This control provides a location where content from referencing pages will be merged at run time.






Creating a Content Page


1. Right Click the website present in the Solution Explorer.
2. Add New Item.
3. Choose Web Form.
4. Enter the name in the Name box.
5. Check the Select Master Page check box.
6. Click Add Button.




7. Select the master page.
8. Click at OK Button.




Designing  Content Pages


Following are two snap shots of Home.aspx and ContactUs.aspx. Both of these are child pages/ content pages. The common portion of both the pages are mentioned in the master page and the distinct items of the pages are present in the respective content page itself.


Home.aspx




ContactUs.aspx





How to specify which Master Page we want to use


1. At the Application Level.
We can specify the master page in the Web.config file. On specifying the master page in the config file, all ASP.NET pages(.aspx files) in the application automatically bind to the master page. Here we have to mention the name of the master page in the <pages> element in the web.config file.
 


In this case, we need not mention MasterPageFile="~/MasterPage.master"  in the Home.aspx page.

Home.aspx



2. At the Page Level.

In this case, we must mention MasterPageFile="~/MasterPage.master"  in the Home.aspx page.

Home.aspx


3.At the Folder Level.

If we want to apply master page template to certain pages only, then we can use the <location> element within the web.config file. Suppose i want to add a master page to a content page which is present in the mp folder. The the path is to be mentioned in the <location> element in the web.config file.





We can also override the application-wide master page specification by declaring a different master page. The MasterPageFile attribute in the content page must show a different master page name in that case.



Configuring an Existing Web Form as a Content Page


To configure an existing web form into a content page we have to:

1. Add a MasterPageFile attribute in its @Page directive. This attribute will mention which master page it is   referencing.
2. Must add the appropriate Content controls manually.
3. All the existing elements must be moved inside the Content controls.

Using the Page Title


Usually the title of the master page is visible when we run any of our Content page. In the following figure, "Happy New Year 2011" is the title, which i had set in the master page. And is visible when the Home.aspx(content page) is executed.




But if like to have some different title for a different content page, then we can set it in two ways:
1. Set the Title attribute in the @Page directive of the content page.
2. Write code in the .cs file, i.e., in the Page_LoadComplete event.

Home.aspx.cs



On clicking the Home hyperlink the output will be:





Accessing controls of the Master Page from the Content Page


In my master page, i have a Label1 control. In the Page_Load event and if the page is not gone for postback event, in that situation, this Label1 is initialized with the day of the week. In this example, i have set the visibility of Label1 as false.

Master.master





Now i want to access the Label1 control of the Master page from the Home.aspx.cs page. For that FindControl method is being used.

Page_Load event of the Content Page occurs before the Page_Load event of the Master Page. So if we write the following code in the Page_Load event of the Content page, it cannot access the control of the Master page, because by this time, Master Page_Load event hasn't occurred. So it is better to write this code in Page_LoadComplete event of the Content Page, which comes just after the Page_Load event of the Master Page.
I mean:
a. Page_Load Event of the Content Page
b. Pae_Load Event of the Master Page
c. Page_LoadComplete Event of the Content Page.

Home.aspx.cs



On running the Home.aspx page, the following output comes, which shows that the Label1 control of the Master Page, has been accessed from the Content Page(Home.aspx).

Home.aspx



Events


Master Page Child Control Initialization
Content Page Child Control Initialization
Master Page Initialization
Content Page Initialization
Content Page Load
Master Page Load
Master Page Child Controls Load
Content Page Child Controls Load


Conclusion

Happy Reading!

Page copy protected against web site content infringement by Copyscape

About the Author

Ganeshji
Full Name: Zinnia Sarkar
Member Level:
Member Status: Member
Member Since: 7/24/2010 12:50:40 PM
Country: India
Regards, Ganeshji


Login to vote for this post.

Comments or Responses

Posted by: Hassan008 on: 1/31/2011 | Points: 25
Thanks for sharing a wonderful article.
Posted by: Ganeshji on: 1/31/2011 | Points: 25
Thnx! Keep reading and suggesting in this way.
Posted by: Akiii on: 8/16/2011 | Points: 25
Good tutorial.....

Thanks and Regards
Akiii
Posted by: Ganeshji on: 8/17/2011 | Points: 25
Thnx Akii for reading this article!

Login to post response

Comment using Facebook(Author doesn't get notification)