Day 29: ASP.NET Master Pages

HTML5 Validation

To turn HTML5 validation on: Tools | Options | Text Editor | HTML | Validationand set the validation to HTML5 or the HTML5 validation won’t work (HTML5's new tags will be flagged as errors).

Master Pages

A master page is a page that provides a framework within which the content from other pages can be displayed. Master pages make it easy to include banners, navigation menus, and other elements on all of the pages in an application.

A master page provides the content that is common to all of the pages on a site. A content page provides the content that is unique to a specific page.

A master page must provide a content placeholder that specifies where the content for a given page will be located.

Create the project

Create a new ASP.NET empty web site project (File | New | Project | Visual C# Web | ASP.NET Empty Web Application). Click on OK.

Create the Images folder

Add an Images folder to the web site (Right-click on the project name | Add | New Folder. Rename the folder Images).

Add the banner.jpg file from a previous project to the Images folder.

Create the App_Data folder

Add an App_Data folder to the web site (Right-click on the project name | Add | New Folder. Rename the folder App_Data).

Add the Halloween.mdb file from a previous project to the App_Data folder.

Create the master page

Add a master page (Right-click on project name | Add | New item | Visual C# Web | Master Page). Click on OK. This will create a master page called Site1.Master.

Go to Source View and examine the code. There are two Content Placeholders, one in the head of the HTML page and one in the body.

And, at the top, instead of a Page directive, there is a Master directive:

<%@MasterLanguage="C#"AutoEventWireup="true"CodeBehind="Site1.master.cs"Inherits="ASP_MasterPage.Site1"%>

Add anything that you want to appear on every page in your site. But make sure to put it outside of the content placeholders. Do not put anything in the content placeholders!

HTML for the master page

body

formid="form1"runat="server">

divid="page">

header

asp:ImageID="Image1"runat="server"ImageUrl="~/Images/banner.jpg"</asp:Image

</header

asideid="sidebar">

pclass="link">

asp:HyperLinkID="HyperLink1"runat="server"NavigateUrl="~/Default.aspx">Home</asp:HyperLink

</p

pclass="link">

asp:HyperLinkID="HyperLink2"runat="server"NavigateUrl="

</p

pclass="link">

asp:HyperLinkID="HyperLink3"runat="server"NavigateUrl="

</p

pclass="link">

asp:HyperLinkID="HyperLink4"runat="server"NavigateUrl="

</p

</aside

divid="main">

asp:ContentPlaceHolderID="ContentPlaceHolder1"runat="server">

</asp:ContentPlaceHolder

</div

pid="message">

asp:LabelID="lblMessage"runat="server">Label</asp:Label

</p

pid="message">

asp:LabelID="lblMessage2"runat="server">Label</asp:Label

</p

</div

</form

</body

The code-behind file for the master page

Master pages have events just like regular ASP.NET pages. Most of these events are raised after the corresponding events for the content page are raised.

Add the following code to the Master Page's Page Load event procedure:

protectedvoidPage_Load(object sender, EventArgs e)

{

intdaysUntil = DaysUntilHalloween();

if (daysUntil == 0)

lblMessage.Text = "Happy Halloween!";

elseif (daysUntil == 1)

lblMessage.Text = "Tomorrow is Halloween!";

else

lblMessage.Text = daysUntil + " days until Halloween!";

}

The first line of the above code is a call to a DaysUntilHalloween function. This is the function:

intDaysUntilHalloween()

{

DateTimehalloweenDate = newDateTime(DateTime.Today.Year, 10, 31);

if (DateTime.TodayhalloweenDate)

halloweenDate = halloweenDate.AddYears(1);

TimeSpantimeUntil = halloweenDate - DateTime.Today;

returntimeUntil.Days;

}

Creating a content page

When the Select a Master Page dialog box appears, click on Site1.Master. Click on OK.

Go to the Source view and examine the code. The Page directive has a MasterPageFile property.

<%@PageTitle=""Language="C#"MasterPageFile="~/Site1.Master"AutoEventWireup="true"CodeBehind="Default.aspx.cs"Inherits="ASP_MasterPage.Default" %>

The rest of the page looks like this:

asp:ContentID="Content1"ContentPlaceHolderID="head"runat="server">

</asp:Content

asp:ContentID="Content2"ContentPlaceHolderID="ContentPlaceHolder1"runat="server">

</asp:Content

Content pages don't include a DocType directive or an <html>, <head>, or <body> element, because these are already in the Master page.

Instead, you get one ASP Content element for each placeholder in the Master page.

The content of your page goes between the start and end tags of the Content elements.

The advantage of using master pages is that you can easily give the same look to all of the pages in a web site.

Switch to Design view for your Default page. The Master page will be visible with ContentPlaceHolder1 in the middle.

Making master page elements available to content pages

The easiest way to access a control on a master page from a content page is to create a public property that provides access to the control.

Add the following code to your Master page code-behind file:

publicLabelMessageLabel

{

get { return lblMessage2;}

set { lblMessage2 = value; }

}

This code is a property (we know it's a property because there are no parentheses following the name (MessageLabel).

Accessing master page elements from a content page

After the element on the master page has been exposed with a public property, it can be accessed from a content page. The following sets the value of the label on the master page from the Page Load event procedure of the Default content page:

protectedvoidPage_Load(object sender, EventArgs e)

{

Site1 master = (Site1)this.Master;

master.MessageLabel.Text = "You are now on the Default page.";

}

In the above code, this.Master is a built-in property. It always returns the object for the master page. However, you can't do this:

this.Master.MessageLabel.Text = "You are now on the Default page.";

The reason for this has to do with inheritance. The type of this.Master is the base class MasterPage (see the Site1.Master.cs file and look at the partial class line).

The MessageLabel property is a member of the Site1 class, but not of the MasterPage class. Therefore, we need to cast this.Master to convert it to a Site1 data type.

Day29-ASP-MasterPages.docx111/1/2018