Articles: 843 | Categories: 148

Articles

How to Use Master Pages in ASP.NET 2.0 and VB

This tutorial will show how to use Master Pages in Visual Studio, and the ability to dynamically change them. VB version.

Master Pages allow you to create definitive styles for your web pages, and they have a higher precendence than CSS Stylesheets. Furthermore, Visual Studio makes it easy to dynamically change the look and feel of your web page using Master Pages.

Add New Item to website, choose Master Page.
Create layout table for Master Page, and add Content Placeholder control from toolbox. This is where dynamic content will be displayed on the Master Page. Modify the page to your liking (color, etc.)

Note the @ Master instead of the usual @ Page declaration.

<%@ Master Language="VB" AutoEventWireup="true" CodeFile="MasterTwo.master.vb" Inherits="MasterTwo" %>

Add a New Item to website; Web Form. Check Select master page, and choose the Master Page you just created.
When in Design View, your new page will appear with the Master Page in the background. You can make changes to your new page where the Content Placeholder is.

To change the Master Page dynamically..
Create a new Master Page different from the first. Then add buttons to change between the Master Pages.

Protected Sub LinkButton1_Click(ByVal sender As Object, ByVal e As EventArgs)_

Handles LinkButton1.Click
Session("masterpage") = "MasterOne.master"
Response.Redirect(Request.Url.ToString())

End Sub

We moved our web sites to Server Intellect and have found them to be incredibly professional. Their setup is very easy and we were up and running in no time.

Now to dynamically load the Master Page:

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

Handles Me.PreInit
If Not Session("masterpage") Is Nothing Then

Me.MasterPageFile = CType(Session("masterpage"), String)

End If

End Sub

Note this code is in the Page_PreInit section of the Web Form(s), which will be merged with the Master Page.

The front end pages should look something like this:
Default.aspx

<%@ Page Language="VB" MasterPageFile="~/MasterOne.master" AutoEventWireup="true" CodeFile="Default.aspx.vb" Inherits="Home" Title="The Home Page" %>
<%@ MasterType virtualpath="~/MasterOne.master" %>
<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">

<span style="color: #ffffff"></span>
<span style="color: #ffffff"></span><span style="color: #ffffff">Welcome to the website</span>

</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder2" Runat="Server">

<h1>

Thank you for visiting our website.</h1>

</asp:Content>

We are using Server Intellect and have found that by far, they are the most friendly, responsive, and knowledgeable support team we've ever dealt with!

About.aspx

<%@ Page Language="VB" MasterPageFile="~/MasterOne.master" AutoEventWireup="true" CodeFile="About.aspx.vb" Inherits="About" Title="About Page" %>
<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">

<h1>

<span style="color: #ffffff">About the site</span></h1>

</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder2" Runat="Server">

<h1>This is the about page</h1>

</asp:Content>

The Master Pages should look something like this:

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

<tr>

<asp:Menu ID="Menu1" runat="server" Orientation="Horizontal">

<Items>

<asp:MenuItem NavigateUrl="Default.aspx" Text="Home" Value="Home"></asp:MenuItem>
<asp:MenuItem NavigateUrl="About.aspx" Text="About" Value="About"></asp:MenuItem>

</Items>

</asp:Menu>
<asp:LinkButton ID="LinkButton1" runat="server" OnClick="LinkButton1_Click">Plain</asp:LinkButton>

</td>

</tr>
<tr>

<asp:Image ID="Image1" runat="server" ImageUrl="images.jpg" Width="48px" />

</td>
<td bgcolor="#ccffcc" valign="top">

<asp:ContentPlaceHolder ID="ContentPlaceHolder2" runat="server">
</asp:ContentPlaceHolder>

</td>

</tr>
<tr>

<td colspan="2" bgcolor="#ccffcc" height="48" valign="top">Copyright..</td>

</tr>

</table>