Ads 468x60px

Thursday, July 28, 2011

How To create Master page in Asp.Net?


How To create Master page in Asp.Net?
Master Pages
One of the main issues in putting together a Web site with multiple pages is coordinating the overall look and feel of the site. Normally, you wish for the site to be visually consistent from page to page and to operate navigationally in a consistent manner. This usually means that you must take great care to duplicate common elements on each page, using identical layout tags, titles, banners, menus, and the like. Although this effort produces the required consistency, it doesn't go unpunished. Any time a change is made to common elements on one page it must be propogated to the remaining pages, a pesky and sometimes error-prone task.
Relief from the tedium of creating and updating the look and behavior of common page elements is at hand with ASP.NET master pages. A master page is a template page that defines the standard visual elements and behaviors that you want for all the pages at your site. Then, during site navigation, individual content pages are merged automatically with this master page to deliver changing content within the framework of the master page. A master page is created one time, and changes to common elements occur in one place.
Creating a Master Page
A master page is an ASP.NET page with the extension .master. It is given a layout to be followed on all pages that use this master page as their design template. It includes XHTML elements, static text, and server controls to be shared by all pages. The master page is identified by a special <%@ Master %> directive that replaces the <%@ Page %> directive used for ordinary .aspx pages.
<%@ Master Language="vb" %>
Listing 12-1. Directive for master page.
The page itself looks pretty much like an ordinary Web page. It includes <html>, <head>, <body>, and <form> elements, usually along with <table> tags to structure its contents.
A master page also includes one or more <asp:ContentPlaceHolder> controls that define areas on the page where replaceable content appears. These are the areas where individual content pages are displayed when the master page is merged with them to create the final Web page. The general format for a ContentPlaceHolder is shown below.
<asp:ContentPlaceHolder id="id" Runat="Server"/>
Figure 12-1. General format for <asp:ContentPlaceHolder> control.
Once a ContentPlaceHolder is defined for the master page, it becomes the target area for displaying content pages that take on characteristics of the surrounding master page. In the following illustration, a master page named Site.master gives the overall layout of a Web page. Page content is organized inside a table layout with embedded coding for a common title across the top and a common menu of navigation links down the side. These elements appear on all Web pages. There is also a ContentPlaceHolder appearing in one of the layout cells. It is here where content from other pages is displayed when they are merged with the master page.

Figure 12-2. Merging content pages with a master page.
The above illustration shows a master page with a ContentPlaceHolder (id="CONTENT"). Individual content pages are merged with the master page to take on its common appearance when they are displayed. Although this illustration shows a single ContentPlaceHolder, any number of placeholder controls can be coded on the master page for displaying any number of separate content sections of content pages.
It is important to realize that site navigation, still, is among the content pages. In the above illustration, the common menu on the master page includes links to Page1.aspx, Page2.aspx, and Page3.aspx. When any one of these pages is loaded into the browser, it embeds itself inside the ContentPlaceHolder of the master page, and is surrounded by master page content. The content page—the .aspx page—takes on the trappings of its associated master page.
Creating Content Pages
Content pages are .aspx pages specially coded to work with master pages. A content page is identified with a page directive that links it to a master page.
<%@ Page MasterPageFile="file.master" %>
Listing 12-2. Directive for content page.
The name of the master page with which a content page is associated is given by the MasterPageFile specification. Content for the page is enclosed inside <asp:Content> controls whose general format is shown below.
<asp:Content id="id" ContentPlaceHolderID="id" Runat="Server">
 
  ...page content
 
</asp:Content>
Figure 12-3. General format for <asp:Content> control.
ContentPlaceHolderID gives the id of a ContentPlaceHolder control on the master page. It identifies where on the master page this content section should appear. All content—XHTML, text, and server controls—must appear inside the <asp:Content> control. Importantly, <html>, <head>, and <body> tags are not coded on the content page. All that appears inside the Content control is the actual content to be displayed in the associated section of the master page.
Neither is a <form> tag coded on a content page. The <form Runat="Server"> tag is coded on the master page and serves to encompass all content, coded and merged, appearing on the page. This practice is in keeping with the requirement that a Web page can have only one <form Runat="Server"> tag; it is on the master page.
A content page can have any number of <asp:Content> sections. Each section targets a different ContentPlaceHolder control on the master page.
Merging Master and Content Pages
The following example demonstates use of the master page and content pages shown in the illustration in Figure 12-2. The visual sense is that the application works like XHTML frames. It is true that it functions like a frameset, but the underlying technology is very different.
Figure 12-4. Example display of master and content pages.
Again, keep in mind that a master page is a "wrapper" surrounding content pages. Therefore, navigation links are always to content pages, not to the master page. Initial loading of the above example is through the Page1.aspx content page, not through the Site.master page. Likewise, menu links are to other content pages. When a content page is accessed, it is merged with the master page to display its content surrounded by master elements.
Using Multiple ContentPlaceHolders
As mentioned, a master page can contain one or more ContentPlaceHolders to be filled with changing content. This does not mean that multiple content pages are needed to fill the multiple placeholders. Rather, all ContentPlaceHolders on the master page require a like number of <asp:Content> sections on all content pages. Below is a simple example to illustrate this point.
Figure 12-5. Example display of master pages with multiple content sections.
The following code is for the above Site.master master page. It includes two <asp:ContentPlaceHolder> controls to be filled with content from each of the content pages that use this master template.
<%@ Master %>
 
<html>
<head>
  <title>Web Site</title>
</head>
 
<body>
<form Runat="Server">
 
<table border="1">
<tr>
  <td colspan="3">
    <div>Site Title</div>
  </td>
<tr>
  <td>
    <b>Menu</b><br/>
    <br/>
    <a href="Page1.aspx">Page 1</a><br/>
    <a href="Page2.aspx">Page 2</a><br/>
    <a href="Page3.aspx">Page 3</a><br/>
  </td>
  <td>
    <asp:ContentPlaceHolder id="CONTENT1" Runat="Server"/>
  </td>
  <td>
    <asp:ContentPlaceHolder id="CONTENT2" Runat="Server"/>
  </td>
</tr>
</table>
 
</form>
</body>
</html>
Listing 12-3. Code for a master page with two content placeholders.
Below is code for one such content page. It contains two <asp:Content> controls to match the two placeholders on the master page.
<%@ Page MasterPageFile="Site.master" %>
 
<asp:Content ContentPlaceHolderID="CONTENT1" Runat="Server">
 
<b>Page 1</b>
<br/><br/>
 
Content 1 from Page1.aspx
 
</asp:Content>
 
 
<asp:Content ContentPlaceHolderID="CONTENT2" Runat="Server">
 
<b>Page 1</b>
<br/><br/>
 
Content 2 from Page1.aspx
 
</asp:Content>
Listing 12-4. Code for a content page with content for two master placeholders.
The above examples are rather simple illustrations of the idea behind master pages. Remember, though, that the content sections of master pages can contain a full complement of XHTML formatting codes, text, graphics, server controls, and scripts. All of this code is contained inside <asp:Content> sections of the content pages that are integrated with a master page. Master pages are very easy to set up and use, and they reduce the amount of duplicating coding traditionally needed to maintain a consistent look and feel for a Web site.


Posted by at
Labels:

0 comments:

Post a Comment

Subscribe to: Post Comments (Atom)