Create a master page in ASP. NET 2.0

Source: Internet
Author: User

Although master pages and content pages are powerful, their creation and application processes are not complex. This and next sections take the example shown in "create 1" as an example to describe how to use visual stuido 2005 to create a master page and content page. This section focuses on how to create a master page.

The master page contains the public part of the page, that is, the webpage template. Therefore, before creating an example, you must determine which content is the public part of the page, starting with analyzing the page structure. Figure 1 shows a page. In the following section, the page is named index. aspx and assumed to be a page in a website. The analysis shows that the structure of the page is 5.

Figure 5 page Structure

Page index. aspx consists of four parts: page header, page end, content 1, and content 2. In this example, the header and footer of a page are public parts of the page where index. aspx is located. Many pages of a website contain the same header and footer. Content 1 and content 2 are non-public parts of the page and are unique to the index. ASPX page. Based on the knowledge of the master page and content page, we can see that if you use the master page and content page to create the page index. aspx, you must create a master page masterpage. master and a content page index. aspx. The master page contains content such as the header and end of the page, and the content page contains content 1 and content 2.

Use Visual Studio 2005 to create a common web site, and then create a master page named masterpage. Master under the root directory of the site. Because this is a process of adding a new file, you can click the "Add new project..." option in the "website" command menu to open the window shown in 6.

Figure 6 Add a master page

In this example, the master page is created. Therefore, you must select the master page icon and set the file name to masterpage. master. Note that there is also a check box in the windowCodePut it in a separate file ". By default, this check box is selected. Indicates that Visual Studio 2005 will be masterpage. the application code hiding model of the master file is created in masterpage. automatically create a masterpage related to the master file. master. CS file. If this option is not selected, only one masterpage. master file will be created. We recommend that you select this option.

After creating the masterpage. master file, you can edit the file. According to the previous instructions, the master page only contains the public part of the page. Therefore, masterpage. Master mainly contains the code of the page header and the end of the page. DetailsSource codeAs follows:

Master page masterpage. Master File Source Code
<% @ Master language = "C #" autoeventwireup = "true" codefile = "masterpage. master. cs" inherits = "masterpage" %>

<! Doctype HTML public "-// W3C // dtd xhtml 1.0 transitional // en" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<HTML xmlns = "http://www.w3.org/1999/xhtml">
<Head id = "head1" runat = "server">
<Title> </title>
<Link href = "CSS/myfreetemplates.css" rel = "stylesheet" type = "text/CSS"/>
</Head>

<Body background = "http://www.68design.net/art/images/pixi_lime.gif" leftmargin = "0" topmargin = "0">
<Form ID = "form1" runat = "server">
<Div align = "center">
<Table width = "763" Height = "100%" border = "0" cellpadding = "0" cellspacing = "0" bgcolor = "# ffffff">
<Tr>
<TD width = "763" Height = "86" align = "right" valign = "TOP">
</TD>
</Tr>
<Tr>
<TD width = "763" Height = "53" align = "right" valign = "bottom" background = "images/nav_bg.gif"> </TD>
</Tr>
<Tr>
<TD width = "763" Height = "22" align = "right" valign = "TOP"> </TD>
</Tr>
<Tr>
& Lt; TD width = "763" valign = "TOP" & gt;
<Table width = "100%" border = "0" cellspacing = "0" cellpadding = "0">
<Tr>
& Lt; TD width = "244" valign = "TOP" & gt;
<Asp: contentplaceholder id = "contentplaceholder1" runat = "server"> </ASP: contentplaceholder>
</TD>
<TD valign = "TOP" align = "Left">
<Asp: contentplaceholder id = "contentplaceholder2" runat = "server"> </ASP: contentplaceholder>
</TD>
</Tr>
</Table>
</TD>
</Tr>
<Tr>
<TD width = "763" Height = "1" background = "http://www.68design.net/art/images/pixi_lime.gif"> </TD>
</Tr>
<Tr>
<TD width = "763" Height = "35" align = "center" class = "baseline"> copyright study. COM 2006 </TD>
</Tr>
</Table>
</Div>
</Form>
</Body>

The above is the master page masterpage. the source code of the master. the source code of aspx is very similar, for example, web elements such as <HTML>, <body>, and <form>. However, there are still differences with normal pages. There are two main differences (shown in bold ). The first difference is that the Code header is different. The master page uses the master, while the common. aspx file uses the page. In addition, the two are the same in terms of code headers. The second difference is that the contentplaceholder control is declared on the master page, and this control is not allowed in common. aspx files. In the masterpage. Master source code, two contentplaceholder controls are declared for occupying content 1 and content 2 in the page template. The contentplaceholder control does not contain specific content settings. It is only a control declaration.

Figure 7 shows the design-Time View of the masterpage. master file.


Figure 7 view the master page during design

You can use Visual Studio 2005 to edit the master page, and it fully supports the "WYSIWYG" function. Whether in code or design mode, you can use Visual Studio 2005 to edit the master page, which is the same as editing a common. aspx file. The two rectangular boxes in the figure represent the contentplaceholder control. Developers can add content directly in the rectangle box. The code of the set content will be included in the contentplaceholder control declaration code. Note that this method is not standard. Therefore, this method is not recommended.

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.