Asp. NET skillfully use Form Master Page Instance _ practical skills

The example of this article tells the ASP.net method of using the form Master page skillfully. Share to everyone for your reference. The specific analysis is as follows:

Background: Each page has a similar basic frame structure:

Browsing the site will find that many sites, the basic framework of each page is the same, for example, the top is the title of the site, the middle is content, the bottom is the site's copyright, development providers and other information:

In these pages, the table header, the bottom of the style and content are the same, the difference is only the middle content.

So when making a Web site, you can separate these things and put them in the "Form Master Page" and nest when you need them.

Skillfully use form Master items:

The following is the action (this article is based on VisualStudio2013 as a programming environment, may be in some steps with other versions, please note):

1. Add a Web Forms master page to the project Test.master: Right Key item-add-new Item-web form master page;

Copy Code code as follows:

<%@ Master language= "C #" autoeventwireup= "true" codebehind= "Test.master.cs" inherits= "Web.test1"%>
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 ">
<title></title>
<asp:contentplaceholder id= "Head" runat= "Server" >

<form id= "Form1" runat= "Server" >
<div>

</asp:contentplaceholder>
</div>
</form>
<!--html>

2, in the form Master page test. Master's tags to add css, JS, and other references (here first only add CSS file as an example):

Copy Code code as follows:

<link href= "Css/common.css" rel= "stylesheet" > <%--Add Reference CSS file--%>
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 ">
<title></title>
</asp:contentplaceholder>

3, edit the form Master page test. Master, add the public content of each page (here, for example, the layout of the page as shown above, the CSS style of the three Div is temporarily not described):

Copy Code code as follows:

<form id= "Form1" runat= "Server" >
<div id= "Top" > <%--common Style for each page: page head--%>
</div>
<div id= "main" > <%--different styles of each page: page body content--%>
<%--here for each page that is nested in this master different content--%>
</asp:contentplaceholder>
</div>
<div id= "Footer" > <%--common Style for each page: Web page copyright Information Area--%>
<p> All rights reserved:******</p>
</div>
</form>

4, in each page nested form master page test. Master: Right Key item-add-New Item-Web Forms Test.aspx that contains master pages, select Test.master in the Select Master Page dialog box, and make sure that the resulting web page is:

Copy Code code as follows:

<%@ Page title= "\ language=" C # "masterpagefile=" ~/common. Master "autoeventwireup=" true "codebehind=" Test2.aspx.cs "inherits=" Web.test2 "%>
</asp:content>
</asp:content>

At this point the form test.aspx and the master page Test.master the same effect, followed by the addition of different content in each page.

5, at this point, the page test.aspx contentplaceholderid= "head" and contentplaceholderid= "ContentPlaceHolder" is equivalent to the master page test. Master in the corresponding. So if each page will have the same part, you can write the same part in the corresponding location of the master page, and the different content of each page is written in the contentplaceholderid= "ContentPlaceHolder".

For example, in step 4th, this test.aspx has been nested in this style, and its theme is "Site content site content website content site contents of the site ... ", the code in Test.aspx is:

Copy Code code as follows:

<%@ Page title= "\ language=" C # "masterpagefile=" ~/common. Master "autoeventwireup=" true "codebehind=" Test2.aspx.cs "inherits=" Web.test2 "%>
</asp:content>
<p> Site content Site content site content site content ... </p>
</asp:content>

If I had built a Web page called test1.aspx, except that it was the same as the main content in test1.aspx, you could have test1.aspx nested master pages test.master the code:

Copy Code code as follows:

<%@ Page title= "\ language=" C # "masterpagefile=" ~/common. Master "autoeventwireup=" true "codebehind=" Test2.aspx.cs "inherits=" Web.test2 "%>
</asp:content>
<p> Content 1 Site content 1 content 1 site content 1 ... </p>
</asp:content>

Expanding: Master Page nesting master Pages

When all the pages within the site is not this one style, but a large site is divided into several columns, each column in the style of the Web page unity, this time you can use the master page to nest master page:

Now create a master page (I'm naming it here "Child Master Pages") and use it to nest the previous master page test. Master, the code is:

Copy Code code as follows:

<%@ Master language= "C # masterpagefile=" ~/test. Master "autoeventwireup=" true "codebehind=" M_common.master.cs "inherits=" Web.admin.m_common "%>
</asp:content>
<%--the different contents of each page that is nested "child master Pages"--%>
</asp:contentplaceholder>
</asp:content>

Note that the first line of code masterpagefile= "~/test." Master is the address of the master page that you want to nest, and "~" is the current directory.

The benefits of nesting Web Master items:

You can use the form master pages in Visual Studio to encapsulate the same parts of each page. When you create a Web page of the same structure, you can nest the form master page directly, avoiding duplication of code, and increasing the reusability of your code; and if you want to change the style of a column or even the entire site, You can simply modify the master page and the <script> files introduced in the master page to improve the maintainability of the Code and fully embody the idea of OOP.

I hope this article will help you with the ASP.net program design.