posted on Friday, August 19, 2005 6:38 PM by Cykophysh

Quick start in Master Pages in .Net 2.0

What are master pages  

Master pages is a new concept in ASP.NET 2.0,  which will allow developers to build master templates for a website's look and feel alongside placing all common logic which is shared by all the pages within a website. This was achieved in ASP.NET 1.1 by making use of BaseClasses and Cascading style sheets using usercontrols,  although this approach was effective it was quite a  lengthy process which required a overhead on development time. Master pages will cut this time down in half. Which is always a big win in my books, it leaves me to do all the groovy stuff I enjoy. 

 

I’m using Microsoft Visual Studio .net 2005 Team Suite Beta 2 . At the time of writing I am not too sure of the differences of the various packages. I will also be doing this in c# but there is relatively very little coding this is mostly HTML and Control based, alongside using the the file menu.

 

 

Open Visual Studio .net 2005.

  1. Navigate fo File menu, Select  New and Website
  2. I deleted the default.aspx , as this is created as a normal .aspx file , there is a slight variation in the page format that will become apparent later in this article.
  3. Right click on the project file  in the solution explorer and Click Add folder and select regular folder. I named this folder images, as this will be where I will be storing an image file etc.
  4. In this folder I just added any image file that I wanted to use, I used a banner type image , you could use anything you choose.
  5. Right Click on the Project file and Select Add New Item . Select Master Page from the Visual Studio template library.
  6. Delete the ContentPlaceHolder Control from the Master Page. You may need to switch to Design View, or you could delete to HTML tags
  7. Switch to Design view
  8. On the Menu Bar , Select Layout  and Insert Table, Select Template and Select Header, Footer and Side from the template choices.
  9. This will add a a very weird looking table to your web form.
  10. In the Top part of the form add an Image control from the tool box , set the ImageUrl to the location of your image in the images folder, and for good fun I set the bgColor Property of the Table Cell to Blue.
  11. Add A Label Control to the Left hand Side table cell, name the label lblHello.
  12. Add a ContentPlaceHolder control to the right hand side table cell. Leave the ID of the Control to its default name being ContentPlaceHolder1
  13. The Table cells may look a little confusing during this process,
  14. Right click on your web form and Select View code
  15. in the Page_Load event handler Type the Following     lblHello.Text = "Hello World ! The Time is : " + DateTime.Now.TimeOfDay;
  16. In the solution explorer right click on the Project file and Select Add new item, then Select Web Form and also select the check box “Select Master Page” and Click Add .
  17. In the Next Dialog box your Master page should appear, Highlight this page and click OK
  18. Your new Web Form will appear , as you will see it now has a different appearance than we are normally used to. There is now one tag on the Page , that of a content tag. This is where you will now add your other controls.
  19. If you switch to design view , you will now see Your page , with the Master Page greyed out in the background , and Content Control Highlighted .
  20. A label control to the Content contrl, name it lblHello . Right Click and Select View Code
  21. in the Page Load event type lblHello.Text = “Hello World”;
  22. Select Run and Voila you have a master page application.
  23. You can now add more pages following steps 17 to 20

I'll try improve this article over the next couple of days in the mean time I hope it helps, and saves you the aggrevation I had this evening.

 

This is a quick start , and I have not gone into much detail here , I'll leave that with you, as A developer I know you'll want to do some experimentation as I know I did.

 

Comments