Recent Posts

Monday, December 22, 2008

How to work with asp master Pages,asp Theme,asp skin and java script in asp.net 2005? Step by Step tutorial with c# net source code

To make the application consistent and have consistent page layouts we need to make our look and feel of our web pages standard and consistent.
A master page helps to maintain the consistency in the application with many pages or group of pages.
First a master page is designed and overall web application theme is declared in
the master page and then content pages are added where we display our application contents.
When users request the content pages, they merge with the master page to produce output that combines the layout of the master page with the content from the content page.

It is very helpful to have master and content pages and after you know how to work on them it will be very easy and handy while developing web applications.
In this article i will explain step by step process of how to work on master and content pages and also explain you a simple step of using java script in the pages.

Step 1


First create a web project in asp .net 2005.

Step 2 (Adding Master Page)



Add a new Item in the project and select master page and name the master page appropriately.

Step 3 (Adding Theme Folder)

Right click on the web project and Asp.net folder and click on theme and you will find App_Themes and one more theme folder added to your project. The folder can be renamed as per your needs, in this article i have renamed it to BlueTheme.
Theme defines the overall theme you want to use for your project and can have skin and .css files.

Step 4 (Adding Css and skin files)

Now right click the BlueTheme folder and add new item and click style sheet and give the appropriate name in this article i have named it BlueTheme.css.
Similarly right click the BlueTheme folder and add new item and click skin file and name it accordingly, I have named it MyTheme.skin here.

step 5 (Adding Code in skin and css)

In MyTheme.skin i have added the following code:

asp:Label runat="server" CssClass="RedLabel"
asp:Label runat="server" CssClass="BlueLabel" SkinID="BlueText"

Now in this above code we can see cssclass "Bluelabel" has skinID "BlueText" that means if lables used in the application then it appears red color unless it is given skin id "BlueText" then it appears blue.

I this this explains how the skin file works, this should be sufficient to understand the skin.
Similarly in css I have used the code that defines the whole application theme:


Step 6 (Adding Code in the Master page)

Add the following code in your master page:





Now in above code snipplet you can see the following section :

ContentPlaceHolder ID="MainContent"

This is the place where your main content pages show up and i have renamed its id to "MainContent".
In the above code i have used the following section:


(Note: we can easily find various calendar java scripts on web try google getting it. Or i have provided the link to download all the required files below this article.)

Now i am going to use this java script code to show calendar in our web page.
Now when we include this javascript code in master page then it is accessible to
all the content pages that we use. So only one include in Master page will be
very helpful and manageable code while developing other content pages.

Step 7 (Adding the content page)

To add the content page just right click on the project and click add new item and select web form and give the appropriate name.



Remember to tick the two checkboxes on the right indicating place code in separate file : This will allow to have separate code behind page.
select master page : This will allow to select the master page for this content page.

Step 8 (Adding code in the content Page)
Add the following code in the content page:



In the above code note the following snippet:

Over this code "ctl00_MainContent_txttoDate" this is the textbox control placed in content page.
In the above code note the following snipplet on the top of the page:
Theme="BlueTheme"
Now this will define the page on which theme to use.

Download source for How to work with asp master Pages,asp Theme,asp skin and java script in asp.net 2005?

Related Posts by Categories




No comments:

Post a Comment