You can perform a number of common tasks programmatically with master pages, including the following:

• Accessing members that are defined on the master page, which can consist of public properties and methods or controls.
  
• Attaching master pages to a content page dynamically.
  

 Accessing Members on the Master Page

To provide access to members of the master page, the Page class exposes a Master property. To access members of a specific master page from a content page, you can create a strongly typed reference to the master page by creating a @ MasterType directive. The directive allows you to point to a specific master page. When the page creates its Master property, the property is typed to the referenced master page.

For example, you might have a master page named MasterPage.master that is the class name MasterPage_master. You might create @ Page and @ MasterType directives that look like the following:

<%@ Page  masterPageFile="~/MasterPage.master"%>

<%@ MasterType  virtualPath="~/MasterPage.master"%>

When you use a @ MasterType directive, such as the one in the example, you can reference members on the master page as in the following example:

Visual Basic

Copy Code

CompanyName.Text = Master.CompanyName

C#

Copy Code

CompanyName.Text = Master.CompanyName;

The Master property of the page is already typed to MasterPage_master.

Getting the Values of Controls on the Master Page

At run time, the master page is merged with the content page, so the controls on the master page are accessible to content page code. (If the master page contains controls in a ContentPlaceHolder control, those controls are not accessible if overridden by a Content control from the content page.) The controls are not directly accessible as master-page members because they are protected. However, you can use the FindControl method to locate specific controls on the master page. If the control that you want to access is inside a ContentPlaceHolder control on the master page, you must first get a reference to the ContentPlaceHolder control, and then call its FindControl method to get a reference to the control.

The following example shows how you can get a reference to controls on the master page. One of the controls being referenced is in a ContentPlaceHolder control and the other is not.

Visual Basic

Copy Code

' Gets a reference to a TextBox control inside a ContentPlaceHolder

Dim mpContentPlaceHolder As ContentPlaceHolder

Dim mpTextBox As TextBox

mpContentPlaceHolder = _

CType(Master.FindControl("ContentPlaceHolder1"), _

ContentPlaceHolder)

If
Not mpContentPlaceHolder Is
Nothing
Then

mpTextBox = CType(mpContentPlaceHolder.FindControl("TextBox1"), _

TextBox)

If
Not mpTextBox Is
Nothing
Then

mpTextBox.Text = "TextBox found!"

End
If

End
If

 

' Gets a reference to a Label control that is not in a

' ContentPlaceHolder control

Dim mpLabel As Label

mpLabel = CType(Master.FindControl("masterPageLabel"), Label)

If
Not mpLabel Is
Nothing
Then

Label1.Text = "Master page label = " + mpLabel.Text

End
If

C#

Copy Code

// Gets a reference to a TextBox control inside a ContentPlaceHolder

ContentPlaceHolder mpContentPlaceHolder;

TextBox mpTextBox;

mpContentPlaceHolder =

(ContentPlaceHolder)Master.FindControl("ContentPlaceHolder1");

if(mpContentPlaceHolder != null)

{

mpTextBox = (TextBox) mpContentPlaceHolder.FindControl("TextBox1");

if(mpTextBox != null)

{

mpTextBox.Text = "TextBox found!";

}

}

 

// Gets a reference to a Label control that is not in a

// ContentPlaceHolder control

Label mpLabel = (Label) Master.FindControl("masterPageLabel");

if(mpLabel != null)

{

Label1.Text = "Master page label = " + mpLabel.Text;

}

 

You can access the contents of the master page's ContentPlaceHolder controls by using the FindControl method, as shown above. If the ContentPlaceHolder control has been merged with content from a Content control, the ContentPlaceHolder control will not contain its default content. Instead, it will contain the text and controls that are defined in the content page.

 Attaching Master Pages Dynamically

In addition to specifying a master page declaratively (in the @ Page directive or in the configuration file), you can attach a master page dynamically to a content page. Because the master page and content page are merged during the initialization stage of page processing, a master page must be assigned before then. Typically, you assign a master page dynamically during the PreInit stage, as in the following example:

Visual Basic

Copy Code

Sub Page_PreInit(ByVal sender As Object, ByVal e As EventArgs) _

Handles Me.PreInit

Me.MasterPageFile = "~/NewMaster.master"

End Sub

C#

Copy Code

void Page_PreInit(Object sender, EventArgs e)

{

this.MasterPageFile = "~/NewMaster.master";

}

Strong Typing for Dynamic Master Pages

If the content page assigns a strong type to the master page by using a @ MasterType directive, the type must apply to any master page that you assign dynamically. If you intend to select a master page dynamically, it is recommended that you create a base class from which your master pages derive. The base master-page class can then define the properties and methods that the master pages have in common. In the content page, when you assign a strong type to the master page by using a @ MasterType directive, you can assign it to the base class instead of to an individual master page.

The following examples show how to create a base master-page type that can be used by multiple master pages. The examples consist of a base type that is derived from the MasterPage control, two master pages that inherit from the base type, and a content page that allows users to select a master page dynamically by using a query string (?color=green). The base master type defines a property named MyTitle. One of the master pages overrides the MyTitle property, and the other one does not. The content page displays the MyTitle property as the page's title. The title of the page will therefore vary depending on which master page has been selected.

This is the base master-page type. It belongs in the App_Code directory.

Visual Basic

Copy Code

Public
Class BaseMaster

Inherits MasterPage

Public
Overridable
ReadOnly
Property MyTitle() As
String

Get

Return
"BaseMaster Title"

End
Get

End
Property

End
Class

C#

Copy Code

using System;

using System.Data;

using System.Configuration;

using System.Web;

using System.Web.Security;

using System.Web.UI;

using System.Web.UI.WebControls;

using System.Web.UI.WebControls.WebParts;

using System.Web.UI.HtmlControls;

public
class BaseMaster : System.Web.UI.MasterPage

{

public virtual String MyTitle

{

get { return
"BaseMaster Title"; }

}

}

This is the first master page, which displays a blue background. Notice that the Inherits attribute in the @ Master directive references the base type.

Visual Basic

Copy Code

<%@ Master Language="VB"
Inherits="BaseMaster"

ClassName="MasterBlue" %>

<!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.1//EN"

"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<script runat="server">

' No property here that overrrides the MyTitle property of the base master.

</script>

 

<html >

<head runat="server">

<title>No title</title>

</head>

<body>

<form id="form1" runat="server">

<div style="background-color:LightBlue">

<asp:contentplaceholder id="ContentPlaceHolder1"

runat="server">

Content from MasterBlue.

</asp:contentplaceholder>

</div>

</form>

</body>

</html>

C#

Copy Code

<%@ Master Language="C#" Inherits="BaseMaster"

ClassName="MasterBlue" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"

"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<script runat="server">

// No property here that overrrides the MyTitle property of the base master.

</script>

 

<html >

<head id="Head1" runat="server">

<title>No title</title>

</head>

<body>

<form id="form1" runat="server">

<div style="background-color:LightBlue">

<asp:contentplaceholder id="ContentPlaceHolder1"

runat="server">

Content from MasterBlue.

</asp:contentplaceholder>

</div>

</form>

</body>

</html>

This is the second master page. It is the same as the first master page, except that it displays a green background, and it overrides the MyTitle property that is defined in the base type.

Visual Basic

Copy Code

<%@ Master Language="VB"
Inherits="BaseMaster"

ClassName="MasterGreen" %>

<!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.1//EN"

"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

 

<script runat="server">

Public
Overrides
ReadOnly
Property MyTitle() As
String

Get

Return
"MasterGreen Title"

End
Get

End
Property

</script>

 

<html >

<head runat="server">

<title>No title</title>

</head>

<body>

<form id="form1" runat="server">

<div style="background-color:LightGreen">

<asp:contentplaceholder id="ContentPlaceHolder1" runat="server">

Content from MasterGreen.

</asp:contentplaceholder>

</div>

</form>

</body>

</html>

C#

Copy Code

<%@ Master Language="C#" Inherits="BaseMaster"

ClassName="MasterGreen" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"

"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

 

<script runat="server">

public override String MyTitle

{

get { return
"MasterGreen Title"; }

}

</script>

 

<html >

<head id="Head1" runat="server">

<title>No title</title>

</head>

<body>

<form id="form1" runat="server">

<div style="background-color:LightGreen">

<asp:contentplaceholder id="ContentPlaceHolder1"

runat="server">

Content from MasterGreen.

</asp:contentplaceholder>

</div>

</form>

</body>

</html>

This is the content page, which allows users to select a master page based on a query string provided with the request. The @ MasterType directive, which assigns a strong type to the page's Master property, references the base type.

Visual Basic

Copy Code

<%@ Page Language="VB" Title="Content Page" MasterPageFile="~/MasterBlue.master"%>

<%@ MasterType TypeName="BaseMaster" %>

<script runat="server">

 

Protected
Sub Page_PreInit(ByVal sender As
Object,

ByVal e As System.EventArgs)

Me.MasterPageFile = "MasterBlue.master"

If Request.QueryString("color") = "green"
Then

Me.MasterPageFile = "MasterGreen.master"

End
If

Me.Title = Master.MyTitle

End
Sub

</script>

<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">

Content from Content page.

</asp:Content>

C#

Copy Code

<%@ Page Language="C#" Title="Content Page" MasterPageFile="~/MasterBlue.master"%>

<%@ MasterType TypeName="BaseMaster" %>

<script runat="server">

protected
void Page_PreInit(Object sender, EventArgs e)

{

this.MasterPageFile = "MasterBlue.master";

if(Request.QueryString["color"] == "green")

{

this.MasterPageFile = "MasterGreen.master";

}

this.Title = Master.MyTitle;

}

</script>

 

<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1"

Runat="Server">

Content from Content page.

</asp:Content>

 

 

In this fashion can create Master pages and use them in your cms

 

For more help

usamawahabkhan@gmail.com

 

Styles Solved a Big Problem

The original HTML was never intended to contain tags for formatting a document. HTML tags were intended to define the content of a document, like:

 

<p>This is a paragraph.</p>

 

<h1>This is a heading</h1>

 

When tags like <font> and color attributes were added to the HTML 3.2 specification, it started a nightmare for web developers. Development of large web sites where fonts and color information had to be added to every single Web page, became a long, expensive and unduly painful process.

 

To solve this problem, the World Wide Web Consortium (W3C) - responsible for standardizing HTML - created CSS in addition to HTML 4.0.

 

With HTML 4.0, all formatting can be removed from the HTML document and stored in a separate CSS file.

 

All browsers support CSS today.

 

 

--------------------------------------------------------------------------------

 

CSS Saves a Lot of Work

Styles sheets define HOW HTML elements are to be displayed.

 

Styles are normally saved in external .css files. External style sheets enable you to change the appearance and layout of all the pages in a Web site, just by editing one single CSS document!

 

 

--------------------------------------------------------------------------------

 

Multiple Styles Will Cascade into One

Style sheets allow style information to be specified in many ways.

 

Styles can be specified:

 

inside an HTML element

inside the head section of an HTML page

in an external CSS file

Tip: Even multiple external style sheets can be referenced inside a single HTML document.

 

Cascading order - What style will be used when there is more than one style specified for an HTML element?

Generally speaking we can say that all the styles will "cascade" into a new "virtual" style sheet by the following rules, where number four has the highest priority:

 

Browser default

External style sheet

Internal style sheet (in the head section)

Inline style (inside an HTML element)

So, an inline style (inside an HTML element) has the highest priority, which means that it will override a style defined inside the <head> tag, or in an external style sheet, or in a browser (a default value).

 

If the link to the external style sheet is placed after the internal style sheet in HTML <head>, the external style sheet will override the internal style sheet!

 

Syntax

The CSS syntax is made up of three parts: a selector, a property and a value:

 

selector {property:value}

 

The selector is normally the HTML element/tag you wish to define, the property is the attribute you wish to change, and each property can take a value. The property and value are separated by a colon, and surrounded by curly braces:

 

body {color:black}

 

Note: If the value is multiple words, put quotes around the value:

 

p {font-family:"sans serif"}

 

Note: If you want to specify more than one property, you must separate each property with a semicolon. The example below shows how to define a center aligned paragraph, with a red text color:

 

p {text-align:center;color:red}

 

To make the style definitions more readable, you can describe one property on each line, like this:

 

p

{

text-align:center;

color:black;

font-family:arial

}

 

 

--------------------------------------------------------------------------------

 

Grouping

You can group selectors. Separate each selector with a comma. In the example below we have grouped all the header elements. All header elements will be displayed in green text color:

 

h1,h2,h3,h4,h5,h6

{

color:green

}

 

 

--------------------------------------------------------------------------------

 

The class Selector

With the class selector you can define different styles for the same type of HTML element.

 

Say that you would like to have two types of paragraphs in your document: one right-aligned paragraph, and one center-aligned paragraph. Here is how you can do it with styles:

 

p.right {text-align:right}

p.center {text-align:center}

 

You have to use the class attribute in your HTML document:

 

<p class="right">This paragraph will be right-aligned.</p>

<p class="center">This paragraph will be center-aligned.</p>

 

Note: To apply more than one class per given element, the syntax is:

 

<p class="center bold">This is a paragraph.</p>

 

The paragraph above will be styled by the class "center" AND the class "bold".

 

You can also omit the tag name in the selector to define a style that will be used by all HTML elements that have a certain class. In the example below, all HTML elements with class="center" will be center-aligned:

 

.center {text-align:center}

 

In the code below both the h1 element and the p element have class="center". This means that both elements will follow the rules in the ".center" selector:

 

<h1 class="center">This heading will be center-aligned</h1>

<p class="center">This paragraph will also be center-aligned.</p>

 

Do NOT start a class name with a number! It will not work in Mozilla/Firefox.

 

 

--------------------------------------------------------------------------------

 

Add Styles to Elements with Particular Attributes

You can also apply styles to HTML elements with particular attributes.

 

The style rule below will match all input elements that have a type attribute with a value of "text":

 

input[type="text"] {background-color:blue}

 

 

--------------------------------------------------------------------------------

 

The id Selector

You can also define styles for HTML elements with the id selector. The id selector is defined as a #.

 

The style rule below will match the element that has an id attribute with a value of "green":

 

#green {color:green}

 

The style rule below will match the p element that has an id with a value of "para1":

 

p#para1

{

text-align:center;

color:red

}

 

Do NOT start an ID name with a number! It will not work in Mozilla/Firefox.

 

 

--------------------------------------------------------------------------------

 

CSS Comments

Comments are used to explain your code, and may help you when you edit the source code at a later date. A comment will be ignored by browsers. A CSS comment begins with "/*", and ends with "*/", like this:

 

/*This is a comment*/

p

{

text-align:center;

/*This is another comment*/

color:black;

font-family:arial

}

 

 

For more help

usamawahabkhan@gmail.com

One of the big features that web developers will quickly discover with VS 2008 is its dramatically improved HTML designer, and the rich CSS support it brings. 

VS 2008 now uses the same web designer that ships with Microsoft's new Expression Web product.  In addition to providing lots of new functionality, you'll also find that this web designer is much faster than the VS 2005 version (which was based on a much older code base).

Below is a quick tour of some of the new web designer features that you'll be able to take advantage of with both VS 2008 as well as the free Visual Web Developer 2008 Express:

Split View Editing

In addition to supporting both source-view and design-view, VS 2008 adds support for a new "split-view" mode when working on pages.  This allows you to see both the HTML source and the Design View at the same-time, and easily have any changes you make in one view be updated in the other:

 

CSS Style Manager

VS 2008 supports a new tool window inside the IDE called "Manage Styles".  This shows all of the CSS stylesheets, and their corresponding rules, for the page you are currently editing.  It can be used both when you are in design-view, as well as when you are in source view on a page:

A circle around a CSS rule in the manage styles window indicates that particular rule is in use within the current document.  Using the mouse to hover over the rule allows you to quickly see the CSS rule values:

You can then either right-click on a CSS rule and select "Modify Style" to bring up a graphical CSS rules editor, or you can double click on the rule in the manage styles window to automatically open the stylesheet file and jump immediately to the CSS source definition to edit (with full intellisense):

For even more tips/tricks about how to best use the "Manage Styles" tool window please read this blog post.

CSS Properties Window

One of the other cool new CSS features that is also supported in both design and source view is the new CSS Properties Window:

When you select an HTML element or ASP.NET server control, the CSS property window will show you all of the CSS settings currently applied to it. You can also change any of the values using the CSS property grid. The "target rule" drop-down in the style toolbar allows you to determine under what rule the settings are applied (read this blog post to learn more about the style toolbar and target rule dropdown). 

If, like me, you sometimes struggle with large CSS stylesheets and find yourself shouting "why the $!#@ is it looking like that?", you'll find the "summary" view of the CSS Properties window really useful (just click the summary button at the top of the CSS properties pane).  When you press this button it enables a filtering mode that shows you the full inheritance set of CSS rules for the current HTML element or ASP.NET control you are working with:

In the properties grid above you'll notice that some values are duplicated multiple times - with red arrows striking out previous values.  This indicates that a parent CSS rule setting is being overridden by another CSS rule's value.  You can see both the original value as well as the overridden one in the summary view at the bottom. 

You can click on the individual values to see where in the CSS precedence hierarchy this value was inherited from or overridden.  In the example below you can see that the final color for the current element that my cursor is on is a dark brown color.  If I select this final color value, the CSS properties window will draw a blue box in the applied-rules list above indicating that this setting is set in the "singlecontent h3" rule:

If I click on the lighter brown color setting that this rule overrode (and which has the red strike-thru), you can see that it originated with the page's HTML body CSS rule (notice how the body rule below is selected in the applied rules list when I select the overridden value below):

Please read this dedicated CSS Properties Window blog post to learn even more how to use the CSS property window.

CSS Source View Intellisense

The HTML designer supports the ability to select an element or control in design-view, and graphically select a rule from the CSS list to apply to it. 

You'll also find when in source mode that you now have intellisense support for specifying CSS class rules:

This is true for both HTML element (like above), as well as with ASP.NET server controls:

This CSS intellisense is supported in both regular HTML / ASP.NET pages, as well as when working with pages based on master pages and nested master pages.

Nested Master Page Support

Earlier this month I wrote a dedicated blog post that covered the new VS 2008 Nested Master Page Support.  All of the above designer and CSS features obviously work with that as well:

Summary

The above post provides a quick look at some of the new HTML designer and CSS tool support in VS 2008 (all of the above features also ship with the free Visual Web Developer 2008 Express edition). 

Because VS 2008 now has multi-targeting support you'll be able to use these feature immediately without having to install .NET 3.5 on your servers.  You can open existing ASP.NET 2.0 projects in VS 2008, have VS 2008 continue to target .NET 2.0 as the runtime target, and begin using these features immediately.

Over the next week I'll also be starting a new multi-part blog series that covers the new <asp:listview> control that ships as part of ASP.NET in .NET 3.5.  One of the big benefits of the <asp:listview> is that it enables developers to have total control over the HTML output emitted in data scenarios.  This works well with all of the new CSS tool features above, and enables you to more easily create great looking web sites and applications.

For More help

usamawahabkhan@gmail.com