Home>Network programming tutorial>ASP.NET tutorial

Detailed explanation of master page in ASP.NET 2.0

Author：Eve Cole Update Time：2009-06-30 16:37:05
In order to reduce the problem of changing the entire site when changing one page during web design, the concept of master was added after vs2003 was upgraded to vs2005.

You can think of it as a "web page template". The difference is that you no longer need to update every page. Once you modify it, all web pages will be changed, once and for all.

Let's start with a simple master usage demonstration:

1. First open visual studio 2005, create a new asp.net website, file system, C#.

2. In the Solution Explorer, right-click to create a new item:



3. Select the master page:



4. Open MasterPage.master, there is a contentplaceholder control inside, be careful not to write anything in the control.

We go to the design view and add header and footer text outside this control.



5. After saving, we can use it to create other pages. There are two methods. 1. Right-click anywhere on the master page and click Add Content Page; 2. Create a new item in the Solution Explorer and check "Select Master Page" when generating the aspx page.



6. Select the corresponding master page



7. There are only these few sentences in the newly generated page source code:


  1. ＜%@PageLanguage="C#"MasterPageFile="~/MasterPage.master"AutoEventWireup="true"
    CodeFile="Default2.aspx.cs"Inherits="Default2"Title="UntitledPage"%＞
  2. ＜asp:ContentID="Content1"ContentPlaceHolderID="ContentPlaceHolder1"Runat="Server"＞
  3. ＜/asp:Content＞

We can see a content control, which corresponds to the ContentPlaceHolder1 control of the master page and is converted to the view page:



8. The text in the header and footer is gray, and we can only edit it in the content.

After saving, visit the default2.aspx page, F5., we see the page:


9. As expected, let’s take a look at the source code:


  1. ＜!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"＞
  2. ＜htmlxmlns="http://www .w3.org/1999/xhtml"＞
  3. ＜head＞＜title＞
  4. UntitledPage
  5. ＜/title＞＜/head＞
  6. ＜body＞
  7. ＜formname="aspnetForm"method="post"action="Default2.aspx"id="aspnetForm "＞
  8. ＜div＞
  9. ＜inputtype="hidden"name="__VIEWSTATE"id="__VIEWSTATE"
    value="/wEPDwULLTEwMDUyNjYzMjhkZASHJAhe9XmxUHPbOeONMX2y6XYi"/＞
  10. ＜/div＞
  11. ＜div＞
  12. thisisthepage'sheader＜br/＞
  13. thispage'scontent:hello,world!＜br/＞
  14. thisisthepage'sfooter ＜/div＞
  15. ＜/form＞
  16. ＜/body＞
  17. ＜/html＞

The master content is placed in a div, but the content page is not placed in a separate div, which means that no redundant code will be added to the sub-pages in the master. This brings us great flexibility in programming and web page layout. We can make full use of CSS+DIV positioning, and we can also use table positioning. It is not necessary to modify every page when modifying.

10. For a master that is not a piece of fixed content, we can use multiple ContentPlaceHolder1 for layout. The following example uses table for positioning:



11. There will be two contents in the corresponding sub-page:



Generated code:


  1. ＜!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"＞
  2. ＜htmlxmlns="http://www .w3.org/1999/xhtml"＞
  3. ＜head＞＜title＞
  4. UntitledPage
  5. ＜/title＞＜/head＞
  6. ＜body＞
  7. ＜formname="aspnetForm"method="post"action="Default3.aspx"id="aspnetForm "＞
  8. ＜div＞
  9. ＜inputtype="hidden"name="__VIEWSTATE"id="__VIEWSTATE"
    value="/wEPDwUKMTY1NDU2MTA1MmRkPjWLPyqA5JXcW5ivHc0NiYajQTU="/＞
  10. ＜/div＞
  11. ＜div＞
  12. thisisthepage'sheader＜br/＞
  13. ＜table＞
  14. ＜tr＞
  15. ＜td＞
  16. ohmyContent1
  17. ＜/td＞
  18. ＜td＞
  19. himyContent2
  20. ＜/td＞
  21. ＜/tr＞
  22. ＜ /table＞
  23. thisisthepage'sfooter 
  24. ＜/div＞
  25. ＜/form＞
  26. ＜/body＞
  27. ＜/html＞

12. Use it flexibly. Although CSS can also use DIV to solve this problem, the appearance of some non-standard controls is difficult to control with CSS. If you make another set of masters, MasterPage2.master, you can Medium dynamic settings:

protected void Page_PreInit(object sender, EventArgs e)
{
MasterPageFile = "~/MasterPage2.master";
}

Let’s go here first. It is said that nested applications can also be used, but it is enough for now. Let’s use it in conjunction with the theme. Let’s talk about it next time.
Related Articles