Building an ASP.NET 2.0 Master Page in Three Steps - Adding an asp:content/ control to the page
(Page 5 of 5 )
Onto the VbDotNet.aspx page insert a tag as shown inside the <Form/> tags as shown. It immediately points to the <asp: Content/> control in the drop-down menu that is spawned.
Make use of the drop-down pick list to configure the attributes of this control as shown. It has an ID which is just "ID="content1" as well as other attributes shown in the drop-down. One of the important items you must configure is the ContentPlaceHolderID.
The ContentPlaceHolderID
With the ContentPlaceHolderID being properly referred to the ContentPlaceHolderID in the Master Page, you can plug in whatever content you wish to place in the VbDotNet.aspx page. Another attribute that must be added is the runat="server" as this is a server control. Make sure you have all the values of the attributes under double quotes.
For this tutorial only some links are added inside the <asp:content/> tags as shown with a heading inside the <h3/> tags as shown here and a <ul/> list showing some links. This is the source code of this completed page.
<%@ Page Language="VB"
AutoEventWireup="false"
CodeFile="VbDotNet.aspx.vb"
Inherits="VbDotNet"
MasterPageFile="~/Tutorial.master"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>VISUALBASIC.NET</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<b><asp:Content ID="content1"
ContentPlaceHolderID="ContentPlaceHolder1"
runat="server"></b> <h3 style="color:Maroon">
Welcome to the Visual Basic .NET Tutorials</h3>
<ul>
<li><a href="/c/a/VB.NET/Exploring-the-Dialogs-Controls-in-Vb-Net/">
Exploring the Dialogs Controls in Vb.Net </a></li>
<li><a href="http://www.codeproject.com/vb/net/Migration.asp">
On Migrating a VB Project to VB.NET</a></li>
<li><a href="/c/a/VB.NET/Creating-a-VBNET-Client-for-a-ColdFusion-
Web-Service/">
VB.NET Client for a ColdFusion Web Service</a> </li>
</ul> </asp:Content>
</div>
</form>
</body>
</html>
The design view of this page is as shown in the next picture. The content that is coming from the Master has been grayed out as shown. Whatever is colored blue in the above source code is displayed.
The ContentPlaceHolder page cannot have the name space and other markup tags. If you were to browse the page as is, you will get run time server errors since the ContentPlaceHolder page, which is in this case the VbDotNet.aspx, cannot have other markups. It should have <asp:Content/> as the topmost control. The cleaned-up source code for the VbDotNet.aspx page should be as shown, with no markups and no namespace reference.
<%@ Page Language="VB"
AutoEventWireup="false"
CodeFile="VbDotNet.aspx.vb"
Inherits="VbDotNet"
MasterPageFile="~/Tutorial.master"%> <asp:Content ID="content1"
ContentPlaceHolderID="ContentPlaceHolder1"
runat="server"> <h3 style="color:Maroon">Welcome to the Visual Basic
.NET Tutorials</h3>
<ul>
<li><a href="/c/a/VB.NET/Exploring-the-Dialogs-Controls-in-Vb-Net/">
Exploring the Dialogs Controls in Vb.Net </a></li>
<li><a href="http://www.codeproject.com/vb/net/Migration.asp">
On Migrating a VB Project to VB.NET</a></li>
<li><a href="/c/a/VB.NET/Creating-a-VBNET-Client-for-a-ColdFusion-
Web-Service/">
VB.NET Client for a ColdFusion Web Service</a> </li>
</ul>
</asp:Content>
When you view this in the browser, you will see the following displayed, the top and bottom coming from the Master and the content in the middle from the VbDotNet page's content.
Adding another web page (ContentPlaceHolder)
Every other web page at this site using the Master will be a ContentPlaceHolder page. This next page, DTS.aspx was designed very rapidly following the same procedure indicated above. An image was added to the Master Page so that every page will have the logo. This displays as shown here. Compared to using Usercontrols in VS2003 this process is very rapid.
Here is the source of the Master that produced the above content. Some changes were made to the original Tutorial.master file. An image folder was created in the web site and an image was brought into the folder from the computer. An image control was added to the page and its URL was set to reference the image folder (shown in blue).
<%@ Master Language="VB"
CodeFile="Tutorial.master.vb"
Inherits="Tutorial" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Untitled Page</title>
</head>
<body>
<form id="form1" runat="server">
<div> <asp:Image ID="Image1" runat="server"
ImageUrl="~/images/Htek.jpg" />
<span style="color: #3300ff">
<span style="font-size: 32pt">
Welcome to Tutorials Haven<br />
<br />
</span></span> <asp:contentplaceholder
id="ContentPlaceHolder1"
runat="server">
</asp:contentplaceholder> </div> <h4>Copy Right©Jay 2006</h4>
</form>
</body>
</html>
This next picture shows the web site directory showing all the relevant pages used in this tutorial.
Summary
Using the Master Page technique to get a common look and feel for the web pages on a website can be easily and rapidly implemented with the VS 2005 IDE. It is vastly superior to earlier procedures used to obtain the same effect. Although a bare bones Master was used, it is possible to provide a rich user experience by using the various other objects from the vast toolbox repository and other objects.
| DISCLAIMER: The content provided in this article is not warranted or guaranteed by Developer Shed, Inc. The content provided is intended for entertainment and/or educational purposes in order to introduce to the reader key ideas, concepts, and/or product reviews. As such it is incumbent upon the reader to employ real-world tactics for security and implementation of best practices. We are not liable for any negative consequences that may result from implementing any information covered in our articles or tutorials. If this is a hardware review, it is not recommended to open and/or modify your hardware. |
/ 35 
