Standardization of the layout of the site is only part of the process, you also need to ensure that common elements, such as the title of the site, navigation control of the site, and so on each page appear in the same location. The key to solving this problem is to create a simple and flexible layout that can be applied to the entire site over and over again. There are 3 basic options to choose from: The user Control . User controls are a great way to standardize common page elements, but they do not solve the problem of page layouts because there is no way to ensure that the user control is placed in the same position on all pages. HTML frame . A frame is an HTML basic tool that displays multiple pages at the same time in one browser window. Its main disadvantage is that each page inside it must be retrieved by a separate request to the server, and the code of these pages has to be completely independent. This also means that a page in a frame cannot interact with pages in other frames or affect pages in other frames. (At least not through server-side code) master Page . a master page is a feature of ASP.net that is specifically designed to standardize Web page layouts . It defines fixed content and declares parts of a Web page that can be inserted into custom content. If you use the same master page throughout your site, you can make sure you get the same layout. Best of all, if you modify the definition of a master page, all pages that apply it will automatically change.
Master Page Basics
To provide an operable and flexible solution for the page template, the following conditions must be met. To be able to define a part of a page separately and reuse it across multiple pages. To be able to create a closed layout that defines an editable region. A page that reuses this template can only add or modify content within a licensed area. Pages can be customized for reusable elements. You can use declarative binding pages to reverse page templates (without code) or to dynamically bind to pages at run time. You can use tools such as VS to design a page that uses a page template.
To achieve this, ASP.net defines two new page types: Master pages and content pages.
master pages, like normal Web pages, can contain any combination of HTML, Web controls, or even code. Master pages can also contain content placeholders (defined modifiable regions).
A content page refers to a master page and obtains its layout and content. In addition, content pages can add page-specific content to any placeholder. In other words, the content page fills the master page with missing content that is not defined by the master page.
a simple master page
The difference between a master page and a general Web form is that the master page starts with the master instruction and provides the same information as the page directive. All Web forms start with the Page instruction. only the master page can use the ContentPlaceHolder control, which is the part of the content page that can be inserted into the content.
When you create a master page, you get a blank page that contains only 2 ContentPlaceHolder controls. The first is defined in the . The second and more important contentplaceholder is defined in the <body> area, which represents the content of the page display.
In addition, master pages cannot be directly requested, and to use master pages, you must create an associated content page .
The following is a simple example of a master page that has a static banner followed by a ContentPlaceHolder control and then a footer:
<%@ Master language= "C #" autoeventwireup= "true" codefile= "SiteTemplate.master.cs"
inherits= "Chapter16_sitetemplate"%>
<title></title><asp:contentplaceholder id= "Head" runat= "Server" ></asp:ContentPlaceHolder><body><form id= "Form1" runat= "Server" ><div><div style= "Background:black; height:87px; Font-weight:bold; font-size:20px;Color:white; Font-family:verdana "><br/><asp:contentplaceholder id= "titlecontent" runat= "Server" >My Site</asp:ContentPlaceHolder></div><br/><br/><asp:contentplaceholder id= "ContentPlaceHolder1" runat= "Server" ></asp:ContentPlaceHolder><br/><em>Copyright©2008.</em></div></form></body>a simple content page
To use a master page on another page, you must add the MasterPageFile attribute to the page directive:
<%@ Page title= "" Language= "C #" masterpagefile= "~/chapter16/sitetemplate.master" ...%>Setting the MasterPageFile feature is not enough to turn a normal page into a content page. The content page must define the content to insert one or more ContentPlaceHolder controls (and write the code needed for those controls). Because the master page already provides a shell, attempting to include elements such as .
To provide content for ContentPlaceHolder, you need to use another special control called content. ContentPlaceHolder and Content controls have a one-to-one relationship. For each ContentPlaceHolder in the master page, the content page provides a corresponding content control (unless you are not prepared to provide anything for that area). asp.net corresponds to the ContentPlaceHolder ID and the Content.contentplaceholderid property of the corresponding Content control.
<%@ Page title= "" Language= "C #" masterpagefile= "~/chapter16/sitetemplate.master"Autoeventwireup= "true" codefile= "Default.aspx.cs" inherits= "Chapter16_default"%><asp:content id= "Content1" contentplaceholderid= "ContentPlaceHolder1" runat= "Server" ><p class= "Code" style= "margin:0in 0.1in 0pt 0in" ><span style= "FONT-SIZE:10PT; Font-family:thesansmonoconnormal ">far out in the unchartedBackwaters of the unfashionable end of the Western spiral arm of the Galaxy liesA small unregarded yellow sun.</span></p></asp:Content><asp:content contentplaceholderid= "titlecontent" id= "Content2" runat= "Server" >Custom title</asp:content>To better understand how the master page works, it's worth looking at the content page by tracking (adding trace=true to the page directive). This way you can understand the hierarchy of controls. You'll find ASP.net first creates a control object for the master page, including ContentPlaceHolder (which acts as a container), and then it adds the control of the content page to the ContentPlaceHolder.
If you need to dynamically configure a master page or content page, you can respond to page.load events in any of the classes. Sometimes you might use initialization code in both the master page and the content page. In this case, it is important to understand the order in which each event occurs. asp.net first create the master page control, and then add the child controls for the content page. It then triggers the Page.Init event for the master page, followed by the Page.Init event for the content page. This is the same procedure for Page.load events. (If there is a conflict, the customization of the content page overrides the modifications made at the same stage of the master page)
Default Content
The master page definition ContentPlaceHolder can contain the default content that is used when the content page does not provide the corresponding content control.
Content pages cannot use only part of the master page default content or edit this part only. This is not possible because the default content is saved in the master page rather than in the content page. All, either fully, or replace it all.
Master pages with table and CSS layouts
HTML uses a flow based layout. This means that as the content increases, the page is organized and some other content is pushed aside. Such a layout makes it difficult to obtain the expected results of the master page. If you're not careful, you'll spoil the perfect layout, and a lot of information inserted into the <Content> tag will mess up the page structure.
To control these issues, most master pages use HTML tables or CSS positioning to control the layout.
When using a table, the basic principle is to decompose the entire page or part of the page into rows and column. You can then add ContentPlaceHolder to a cell to ensure that the other content is aligned as expected.
Using CSS positioning, the basic idea is to put content into <div> tags, and then use absolute coordinates to control the position of <div> or let them float on one side of the page, and finally you can put ContentPlaceHolder into <div> Label. (There are many good examples based on CSS layouts in http://www.csszengarden.com and http://www.bluerobot.com/web/layouts)
The following example demonstrates how to use a master page to create a traditional Web application that contains a header, footer, and navigation bar that are defined by a table:
<%@ Master language= "C #" autoeventwireup= "true" codefile= "TableMaster.master.cs"inherits= "Tablemaster"%><
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
