[Sample of Mar 27th] Basic ASP.NET master page demo
 |
 |
|
 |
 |
|
Sample Downloads
C# version: https://code.msdn.microsoft.com/CSASPNETMasterPage-a6efa686
VB version: https://code.msdn.microsoft.com/VBASPNETMasterPage-83651eeb
Today’s code sample illustrates how to use Master Page. ASP.NET defines two new specialized types of pages: Master Page and Content Page. A Master page is a page template. Like an ordinary ASP.NET web page, it can contain any combination of HTML. In addition, Master Page includes a special control called ContentPlaceHolder which works as a holder of Content Page. On the other hand, each Content Page references a single Master Page and acquires its content. Both Master Page and Content Page work together can allow developers easier to build websites with a standard appearance.
You can find more code samples that demonstrate the most typical programming scenarios by using Microsoft All-In-One Code Framework Sample Browser or Sample Browser Visual Studio extension. They give you the flexibility to search samples, download samples on demand, manage the downloaded samples in a centralized place, and automatically be notified about sample updates. If it is the first time that you hear about Microsoft All-In-One Code Framework, please watch the introduction video on Microsoft Showcase, or read the introduction on our homepage https://1code.codeplex.com/.
Introduction
The project illustrates how to use Master Page. ASP.NET defines two new specialized types of pages: Master Page and Content Page. A Master page is a page template. Like an ordinary ASP.NET web page, it can contain any combination of HTML. In addition, Master Page includes a special control called ContentPlaceHolder which works as a holder of Content Page. On the other hand, each Content Page references a single Master Page and acquires its content. Both Master Page and Content Page work together can allow developers easier to build websites with a standard appearance.
Running the Sample
Please follow these demonstration steps below.
Step 1: Open the CSASPNETMasterPage.sln. Expand the CSASPNETMasterPage web application and press Ctrl + F5 to show the ContentPage.aspx.
Step 2: We can find a little complex web page in browser, the page includes a master page and a content page, we can input some text in content page’s TextBox control and it will display in master page, the content page is embedded in master page.
Step 3: Click gotoNestedContentPage link, we can see the content page is changed. There is another master page as follows, and this master page includes two content pages, you can change the page by clicking the links in left.
Using the Code
Step 1. Create a C# "ASP.NET Empty Web Application" in Visual Studio 2010. Name it as “CSASPNETMasterPage". Create three web form pages and two master pages, the “Master.master” page is the main master page, it includes all content pages and child master pages inside, the “ContentPage.aspx” page is the content page with some server controls, the “NestedMaster.master”, “NestedContentPageA.aspx”, “NestedContentPageB.aspx” pages are nested in Master.master page.
Step 2. The Master page includes a ContentPlaceHolder control for nesting in content page; the two Hyperlinks will redirect you to different content pages with ContentPage.aspx and NestedMasterPage.master.
The following code showing the Master.master page HTML markup and use ContentPlaceHolder to embed content page:
<html xmlns="https://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body style="background-color:#F7F6F3">
<form id="form1" runat="server">
Master Page
<asp:Label ID="lbHello" runat="server"></asp:Label>
<asp:HyperLink ID="linkToContentPage" runat="server"
NavigateUrl="~/ContentPage.aspx"
Text="gotoContentPage"></asp:HyperLink>
<asp:HyperLink ID="linkToNestedContentPage" runat="server"
NavigateUrl="~/NestedContentPageA.aspx"
Text="gotoNestedContentPage"></asp:HyperLink>
<%--Content Page Begin--%>
<asp:ContentPlaceHolder ID="MainContentHolder" runat="server">
</asp:ContentPlaceHolder>
<%--Content Page End--%>
</form>
</body>
</html>
Step 3. The NestedMaster page is similar to Master page, you need to change Hyperlink’s NavigateUrl property and write different message in content pages. The another thing we need to handle is that we have to pass the massage in ContentPage to Master page, here we use Master.FindControl("lbHello") method to find master page’s controls.
The following code is used to find master page’s control and assign value to Label control.
protected void Button1_Click(object sender, EventArgs e)
{
Label lbMasterPageHello = Master.FindControl("lbHello") as Label;
if (lbMasterPageHello != null)
{
lbMasterPageHello.Text = "Hello, " + txtName.Text + "!";
}
}
Step 4. Build the application and you can debug it.