|
 |
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.
Download the Full Working Version of this Project written with Visual Studio.NET VB 2005 Here!
Looking for the C#.NET 2005 Version? Click Here!
Looking for more ASP.NET Tutorials? Click Here!
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 |
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 |
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> |
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:
<form id="form1" runat="server">
<div>
<asp:contentplaceholder id="ContentPlaceHolder1" runat="server"></asp:contentplaceholder>
<table border="0" cellpadding="0" cellspacing="0" style="width: 100%; height: 100%">
<tr>
<td colspan="2" bgcolor="#ccffcc" height="48" valign="top">
<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>
<td bgcolor="#ccffcc" valign="top" width="48">
<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>
</form> |
Download the Full Working Version of this Project written with Visual Studio.NET VB 2005 Here!
Looking for the C#.NET 2005 Version? Click Here!
Looking for more ASP.NET Tutorials? Click Here!
|
|
|