Mukarram Mukhtar

Share Master Page (p 1)

Shared Master Page through Virtual Directories in .NET

The theory of this approach is quite simple; you create a web application and add a Master page in it, deploy the master page application to your web server, IIS. Now create another web application which will be using and sharing master page with other similar applications, let’s call it client application. Deploy your first client to IIS. Then add a virtual directory inside your client application, give the physical path of master page application to this virtual directory. With a little care you can set the correct paths in your client application so that web pages can refer to the master page and rest of the application works fine.

Theory is quite strong and plausible but practically some complications creep in, that are undocumented on msdn and untouched by most gurus on web. Don’t worry; we’ll try to deal with some of them and try to find workarounds.

Creation of Master Page Application:

Let’s do it step-by-step:

  • Start Microsoft Visual Studio 2005 or later.
  • Click Create New Project
  • In New Project dialog box, select Visual C# in Project types panel on left.
  • Select ASP.NET Web Application in the Templates panel on right.
  • Give a decent physical path and name to your project and select OK.

SMVCreateProject

  • Right click the project in the solution explorer and add a Master page in the project.
  • Delete all other default web pages, web.config files, app_code and app_data folders from the project.

After completing the above steps your solution explorer should look something like this:

SMVSolutionExplorer

Next step is to add some simple code in Master page; this can be done by copying the following code in the master page:

<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Main.master.cs %>

<!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>
        <h1>Main Master Header</h1>
        <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">

        </asp:ContentPlaceHolder>
        <h3>Main Master Footer</h3>
    </div>
    </form>
</body>
</html>

For simplicity let’s not add any server side script at this point and let’s see it working in its simplest form. I know real world scenarios are not that simple but we’ll make it more complicated in a few minutes. After adding the above simple code the next step is to create a virtual directory of this application; and we’ll do it by clicking on Project\project name Properties menu in the IDE.

SMVProjectProperties

  • Select Web menu from the left hand side menu
  • In Servers section, select Use IIS web server
  • Click on the Create Virtual Directories

SMVCreateVirtualDirectory

Our master page application is ready to be shared, now let’s quickly create master page client application.

Creation of Master Page Client Application:

  • Start Microsoft Visual Studio 2005 or later.
  • Click Create New Project
  • In New Project dialog box, select Visual C# in Project types panel on left.
  • Select ASP.NET Web Application in the Templates panel on right.
  • Give a decent physical path and name to your project and select OK.

SMCVCreateProject

  • IDE will create a web project for you with a Default.aspx web page in it. You don’t need to add or remove anything from the project at this point
  • Just compile and run the application one time
  • Create a virtual directory for this application in the similar way as we created for master page application above.

After you’ve done the above steps let’s go into IIS and take a look at how our two newly born web applications look like there. Now let’s create a virtual directory inside prjShareMasterClientVirtual application and give it the path of our master page web application:

  • Open Internet Information Services (IIS) by entering inetmgr command in Start\Run dialogue box
  • In IIS main window, open Default website and locate and select prjShareMasterClientVirtual application
  • Right click on the right hand side panel and select New\Virtual Directory

SMCVCreateVitualDirectory

  • The wizard will start, enter Alias as ShareMasterVirtual, click Next

SMCVAlias

  • Browse to the physical path where prjShareMasterVirtual is located

  SMCVCompletePath

  • Click Next, Next and Finish.

Now let’s go back to prjShareMasterClientVirtual project and make some changes so that our Default page can become content web page of the master page. Copy-paste the following code in Default.aspx; no need to change Default.aspx.cs:

<%@ Page Language="C#" MasterPageFile="~/ShareMasterVirtual/Main.Master" AutoEventWireup="true" CodeBehind="Default.aspx.cs"
Inherits="prjShareMasterClientVirtual._Default" Title="Sharing Master Page Using Virtual Directories" %>

<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
Hi, I'm a content web page.
</asp:Content>

Pay special attention on the code MasterPageFile=”~/ShareMasterVirtual/Main.Master”; if you have not been following my project naming and paths then you will have to give extra care while setting this attribute in order to correctly give the path of master page file. After completing the above step, if you run your prjShareMasterClientVirtual application, it will look something like this:

SMCVSimpleRun

So our theory came to a success, right? Wrong! This was a too simple example for real world scenarios.

Getting into Complications:

Let’s suppose our master page had an image file in it and it also had some server side script; would the same example work that neatly? No. We would have to do some more work before our client project can share the master with all the images, css, javascript and server side script. Let’s see that working. We’ll have to make some changes in our master page, so open your master page project and make the following changes:

  • Right click on the project in solution explorer and add a new folder in the project called images
  • Add an image in this folder; I named it as Firefox_Rox.png.
  • Make changes in the HTML code of Main.Master page and make it look like this:
<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Main.master.cs" Inherits="prjShareMasterVirtual.Main" %>

<!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>
        <h1>Main Master Header</h1>
        <asp:Image ID="imgFirefox" ImageUrl="~/images/Firefox_Rox.png" runat="server" Width="100px" />
        <h3><asp:Label ID="lblDate" runat="server"></asp:Label></h3>
        <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">

        </asp:ContentPlaceHolder>
        <h3>Main Master Footer</h3>
    </div>
    </form>
</body>
</html>

In the Main.master.cs file write the following line of code:

protected void Page_Load(object sender, EventArgs e)
        {
            this.lblDate.Text = DateTime.Now.ToLongDateString();
        }

Compile the project and let’s switch to prjShareMasterClientVirtual. Ideally speaking, since our client project is having a reference to the master page project, I wanted all the changes in my master should be automatically reflected in the client project. But life is a lot more difficult than ideal. If you run the client project right now, you’ll get the following error:

SMCVError

To fix this error you’ll have to do couple of steps:

  • Right click on the references folder of the client project and add reference to the dll of the master page project
  • Copy the images folder from master page project into client project

If you run your client project now, it will look quite better:

SMVCompleteRun

At this point your client project’s solution explorer will look something like this:

SMCVSolutionExplorer

Following is the synopsis of what we did and what we achieved in this tutorial:

Pros and Cons:

  • We can share a master page by creating a virtual directory (master page application) inside another virtual directory (client web application)
  • Client project’s content web pages lose Design view mode
  • If the master page has some images, css files and javascript files then these files have to be copied in all the client web applications
  • If the master page has some server side script then master page project’s dll has to be added in references of all the client web applications
  • Every time we make any change in HTML of the master page, it will be automatically reflected in the client web application
  • Every time there is a change in images, css or javascript files, these files have to copied in all the client web applications
  • Every time there is a change in server side script of the master page, it will be automatically reflected in all the client web applications; since they all would be referencing the dll located at a common physical location

Well, that’s it; that’s the end of our first method of sharing a master page.

Advertisements

5 Comments »

  1. Congratulations on your article but I need help. I can not see the MasterPage during programming. Is this normal?

    Comment by Renato — July 29, 2011 @ 10:47 pm

    • Of course not! “during programming” of what? If you’re in the source code of Master project then master page should definitely be visible to you, in the project explorer window. See the 2nd screen shot on this page from top, Main.Master is visible in project explorer. And you should be able to open it by double clicking it.

      Comment by Mukarram Mukhtar — August 1, 2011 @ 1:44 pm

  2. hi, this is working for me, but, how can i add the master page file at application level.

    I use: at my client´s web.config file
    but i getting this: “This Virtual Directory does not allow contents to be listed.” I gess its permission problem but i already check all permission over virtual directories and the windows authetincation and check mark is marked… -IIS 5.1 vs2008 .net fw 3.5-

    Comment by Mario — November 18, 2011 @ 7:00 pm

    • * I use: at my client´s web.config file

      Comment by Mario — November 18, 2011 @ 7:02 pm

      • “” i gess i cant paste code here…. well is just standard way to add masterpage at application level….

        Comment by Mario — November 18, 2011 @ 7:06 pm


RSS feed for comments on this post. TrackBack URI

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Create a free website or blog at WordPress.com.

%d bloggers like this: