Master Pages create multi-content Pages (Master Pages Series II)

Source: Internet
Author: User

After <use Master Pages to create a unified Site> we have learned how to create Master Pages. next we will learn how to create multiple content pages on the Master Page. how to display the page.

Step 1: add multiple ContentPlaceHolder

 

In the previous article, we created a content page in form. however, we know that a complete and complete page may also contain many areas for display content. Therefore, we will add a Content Page Based on the file created in the previous article, the location is placed under the course and News (figure 1). We only need to drag a ContentPlaceHolder to the site. master. and set the IDLeftColumnContent. In this way, we can add our own content in this area on each page.

 

 

Figure 1

Step 2: add custom content,

We are adding a new page MultipleContentPlaceHolders. aspx for our site. In this way, another Content is added to our new page.ContentPlaceHolderID is "LeftColumnContent". This is what we add in step 1. All we need to do is add the desired content on this content. The following code is displayed. Preview effect 2

1 <% @ Page Language = "C #" MasterPageFile = "~ /Site. master "AutoEventWireup =" true "CodeFile =" MultipleContentPlaceHolders. aspx. cs "Inherits =" MultipleContentPlaceHolders "Title =" Untitled Page "%>
2 <asp: Content ID = "Content1" ContentPlaceHolderID = "MainContent" Runat = "Server">
3 </asp: Content>
4 <asp: Content ID = "Content2" ContentPlaceHolderID = "LeftColumnContent" Runat = "Server">
5 & nbsp; 6 Master Pages series 7 <ul>
8 <li> lecture 1. </li>
9 <li> Lecture 2 </li>
10 </ul>
11 </asp: Content>
12
13

 

Figure 2

We just created a new page.LeftColumnContent is automatically addedMultipleContentPlaceHolders. aspx page, how can we add the newly added control to an existing page (such as the about. aspx page we created in the previous article ).

Method 1: manually add <asp: Content ID = "Content2" runat = "server" ContentPlaceHolderID = "LeftColumnContent"> </asp: Content>

Method 2: In the design status of about. aspx, we can see the addedLeftColumnContent, clickIn the upper-right corner of LeftColumnContent, select create custom content. 3:

Figure 3

We just added the new control to the new page. however, sometimes our pages do not need all sites. on the Master node, how do we omit some widgets that we don't want to see on a specific page? In fact, the method is as simple as that. You can manually delete the corresponding content in the source code.

Step 3: Create content for the template page and set it to the default page

Most websites have the same page. for example, Login, Footer, head. the same and unchanged parts can be made on the Master Page. next I will use the Login control to demonstrate it.

We add a new ContentPlaceHolder on Site. Master.

<Asp: ContentPlaceHolder ID = "QuickLoginUI" runat = "server">

<Asp: Login ID = "QuickLogin" runat = "server"

TitleText = "

 

After creating Login on Site. Master, we create a Login page and add a Login control to Maincontent on the Login page.

Add any content in other regions. Make sure that the QuickLoginUI is empty. In this way, we can ensure that the Login on the left is not displayed on the Login page. 4

 

Figure 4

We browsed the Login page through Browser and found that only login in MainContent is displayed.

However, the Login on the left is not displayed on the Login page. We want to display it on all other pages. How can this effect be achieved ?? Like our default. aspx, about. aspx, there is no Login area, because the Login on Site. master is added later. How can we make them also display the Login Area? You only need to click the black triangle on the Login Area on these pages and select the content on the template page by default.

Summary: This article mainly explains how to create an additional content Page and control whether the Area on the Master Page is displayed or not.

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.