ASP. Net uses the Form Master page, asp.net form

Source: Internet
Author: User

ASP. Net uses the Form Master page, asp.net form
Background: the Basic Framework Structure of each webpage is similar:

When you browse a website, you will find that in many websites, the basic framework of each webpage is the same. For example, the top part is the website title and the middle part is the content, the following are website copyrights, development providers, and other information:

 

In these webpages, the style and content at the header and bottom are the same. The difference is only the intermediate content.

Therefore, when creating a website, you can separate these common items and place them on the Form Master page. You can nest them as needed.

 

Skillfully use the form master item:

Next we will start to take action (this article uses VisualStudio2013 as the programming environment, and may be different from other versions in some steps, please note ):

1. Add a Web form Master page test. Master to the project: Right-click the project and choose add> new project> Web form Master page;

 

?
12345678910111213141516171819 <%@ 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. Add CSS, JS, and other references to the mark of test. Master on the Form Master page (here, only the CSS file is added as an example ):

 

?
12345 <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 test. Master page of the form and add the public content of each webpage. (the layout of the webpage is used as an example. The css style of the three divs is not described at the moment ):

 

 

?
123456789101112131415 <form id="form1" runat="server">    <div id="top"> <% -- Public style of each webpage: webpage header -- %>        <H1> A certain website     </div>             <div id="main"> <% -- Different webpage styles: webpage subject content -- %>                      <% -- Here is the different content of each webpage nested with this master -- %>        </asp:contentplaceholder>    </div>          <div id="footer"> <% -- Public style of each webpage: webpage copyright information zone -- %>        <P> copyright: ****** </p>    </div></form>


4. nest the Form Master Page test in each webpage. master: Right-click the project and choose add> new project> Web form test that contains the Master page. aspx. In the select master page dialog box, select test. master, OK. The generated webpage is:

 

 

?
12345 <%@ Page Title="\" Language="C#" MasterPageFile="~/common.Master" AutoEventWireup="true" CodeBehind="test2.aspx.cs" Inherits="Web.test2" %> </asp:content> </asp:content>

In this case, the form test. aspx has the same running effect as the Master page test. Master. The next step is to add different content in each webpage.

 

 

5. In this case, the ContentPlaceHolderID = "head" and ContentPlaceHolderID = "contentPlaceHolder" in the test. aspx page are equivalent to those on the Master page test. Master. Therefore, if each web page has the same part, you can write the same part in the corresponding location of the master page, and write the different content of each web page in the ContentPlaceHolderID = "contentPlaceHolder.

For example, in step 1, this test. aspx has nested this style, and its subject content is "website content ...... ", The code in test. aspx is:

 

?
123456 <%@ Page Title="\" Language="C#" MasterPageFile="~/common.Master" AutoEventWireup="true" CodeBehind="test2.aspx.cs" Inherits="Web.test2" %> </asp:content>     <P> website content ...... </P></asp:content>

If I create another webpage named test1.aspx, except for the content of the subject in test1.aspx, which is the same as the content of the other webpage, we can let test1.aspx nest the Master page test. Master with the code:

 

 

?
123456 <%@ Page Title="\" Language="C#" MasterPageFile="~/common.Master" AutoEventWireup="true" CodeBehind="test2.aspx.cs" Inherits="Web.test2" %> </asp:content>     <P> website content1 Website content1 Website content1 Website content1…… </p></asp:content>

 

 

Extended: master page nesting master page

When all the webpages on the website are not in this style, a large website is divided into several sections, and the webpage style in each section is unified, at this time, you can use the master page to nest the master page:

 

Now create a Master page (I will name it the "Child Mother page") and use it to nest the Master page test. Master above. The code is:

 

?
1234567891011 <%@ Master Language="C#" MasterPageFile="~/test.Master" AutoEventWireup="true" CodeBehind="m_common.master.cs" Inherits="Web.admin.m_common" %>     </asp:content>                    <% -- The content of each page nested with the "parent page" -- %>    </asp:contentplaceholder></asp:content>

Note: MasterPageFile = "~ /Test. Master is the address of the Master page to be nested. Is the current directory.

 

 

Benefits of nested webpage master items:

You can use the form master page in Visual Studio to encapsulate the same part of each page. When creating a webpage with the same structure, you can directly nest this Form Master page, this avoids code duplication and improves code reusability. In addition, if you want to modify the style of a topic or even the entire website, you only need to modify the master page and the file <script> introduced in the master page to improve the maintainability of the code and fully reflect the idea of OOP.

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.