Themes and Skins Part 1

While designing a web application, what is encouraged or rather a standard is to have a similar look and feel across all the pages in your web application. This is not a new concept and relates to the topic of formatting, having similar fonts, colors and other common GUI based designing and formatting issues.
With ASP.Net 2.0 and on wards along with already HTML and CSS (Cascading Style Sheets) Microsoft introduces a technique called Themes.
Themes
Themes not only concentrate on formatting fonts and colors rather it has a broader functionality. If defined properly you can use these formats individually for each page and even at every server control level, you can apply these formattings on the entire application or even at user control and web server control levels individually.
If you have being doing web development for some time, you must have recognized that ASP.NET 2.0 themes and standard CSS files works the same way. Themes and CSS are similar in a way that they both enable us to define visual styles for our web pages but having said that Themes and CSS have some major differences discussed below
1. There is no feature to apply CSS file at application level (more on this later)
2. If you have used a CSS file on a page, there is no way to stop a control applying those styles automatically (more on this later)
3. Unlike CSS which focus of HTML tags, themes are more specifically ASP.NET controls oriented and we can still use CSS files in our themes.
4. As Themes are applied to ASP.NET controls we actually have more control over the web controls like rather than only having fonts and background and foreground colors and height and width formatting options, we can use more specific control level properties like images, MaxLength (in case of TextBox control) Paging and Sorting, Page Size options (in case of GridView control) etc
5. Themes are applied to the pages on server, this means we do not have to worry about different browsers only because they implements CSS little differently

Components of Themes
ASP.NET Themes consists of the following 3 components

1. App_Themes Folder
This is a special ASP.NET built-in folder which can be created my right clicking the Solution in Solution Explorer and selecting from the options Add ASP.NET Folder>Theme to create an App_Theme Folder. This folder tells ASP.NET engine that it contains more folders discussed below.

2. Theme Folder
Right click App_Themes folder to select the option Add ASP.NET Folder>Theme to create Themes folder. The purpose of these folders can be understood with the following example
Suppose you want to make 4 different color formatting options available for the user to select from and user selects from a Red, Blue, Yellow Green themes from your application. What you need to do is to first have a logical hierarchy of this idea. You do this by right clicking the App_Themes folder and adding a new folder inside the App_Themes folder. You need to make 4 folders namely Red, Blue, Yellow and Green.
This means that you have a one to many relations when it comes to App_Themes to actual theme folders. Are we done with our themes yet? No, like .css files we need to define something called .skin files

3. Skin Files
A skin file is just a text file with the extension of “.skin”. This is the file where the core operation is performed. This is where we will define our controls formatting and other properties.

Application and other detailed and more advance discussion on the topic in my next article

AJAX.NET UpdatePanel Control Part 1

Introduction to UpdatePanel Control of AJAX.NET

UpdatePanel control with the help of ScriptManager control is a very useful control which helps Ajax.Net developers to achieve partial post backs. The only limitation for using this UpdatePanel control is that there has to be one ScriptManager Control placed already on the page which will perform partial post backs. Not only the page should already contain ScriptManager control, but ScriptManager control has to be the first control to be placed on the page before using any of the Ajax.Net controls.

UpdatePanel control as already defined is a server control that helps ASP.NET Ajax enabled application developers performs partial page updates. To carry particular information to the server and let the page remain interactive to the user is a very involved task and requires its developer to have a good knowledge of client side scripting language JavaScript (currently known as ECMAScript). UpdatePanel control not only takes care of all the scripting that is required for updating any particular section of page but is also responsible for writing browser independent JavaScript

As we already know that AJAX.Net supports asynchronous web application, with the use of UpdatePanel control not only developers get the ease of not writing any client side script but also there is no change while writing server side code. As a developers viewpoint asynchronous post back not only behaves like a regular post back but also performs a complete execution on the server and control life cycle. The benefit of using UpdatePanel control is that limited region of the page that is enclosed in UpdatePanel control marked to be updated are updated. Server responses with the data that was requested by client and on the browsers the client side PageRequestManager class manipulates DOM (Document Object Model) to replace existing HTML with updated information.

Multiple UpdatePanel Controls on a single page
You can have as many UpdatePanel controls on your page as you want and they can also communicate with each other while updating and can help trigger other UpdatePanel controls to send their information asynchronously to the server and get updated in the process.

UpdatePanel Control Usage
When the page that contains one or many UpdatePanel controls is first rendered at client end, all the contents of all the UpdatePanel control are rendered and sent to the client.
UpdatePanel controls can update regions of the page independently depending on the control’s settings and in any particular situation; contents of few or all UpdatePanel controls are updated.
UpdatePanel control like any other server control can be used in
1. In User controls
2. On Master Pages and in Content Pages
3. Nested inside other UpdatePanel controls
4. Inside templated controls such as GridView or Repeater control with minor adjustments in the controls’ properties

UpdatePanel Control Properties
UpdatePanel control is inherited from Control which in turn is inherited from Object class
Properties of UpdatePanel Control
ID
ChildrenAsTriggers
EnableViewState
RenderMode
Triggers
UpdateMode
Visible

Installation Guide to ASP.NET 2.0 AJAX 1.0 Framework

AJAX (Asynchronous Java Script And XML) is a new web development technology which extends ASP.NET and it offers interactive user interface benefits of Asynchronous programming model that is familiar to ASP.NET developers.

In general, problems that ASP.NET AJAX 1.0 resolved are the reduction in the round trips that web applications do while processing requests. As round trips are reduced, the speed has also increased in terms of less data being transferred over the network, and also increases response factor of a web based application. As these are the basic problems user experiences while suffering over the internet AJAX has the solution to it with the help of its framework which includes Java Script ad XML.

To install this framework that we have talked about yet, what ASP.NET developers need is the installation of Microsoft .Net Framework Version 2.0, operating system Windows 2000, Windows Server 2003, Windows XP or Windows Vista. As users already have Microsoft .Net Framework already installed on their machines, any latest browser and specially Internet Explorer version 5.01 or later is required.
Helping software like Visual Studio 2005 or Visual Web Developer Express Edition will increase the efficiency of the developers while developing AJAX.NET enabled applications.

The framework can be downloaded from Microsoft ASP.Net official web site www.asp.net. As of this writing Version 1.0 is available to be downloaded.

This installation guide will assume that the installer machine is running Visual Studio 2005.

The 1.4 MB ASPAJAXExtSetup.msi once downloaded can be initiated by double clicking the setup file.

Simple Wizard based installation setup will guide its installer to successfully complete the installation process. User is asked to agree EULA and with simple Next and Finish button, installation of this package is completed. It is recommended to read Release Notes.

First change you will observe after successful completion of the installation process is the creation of Microsoft ASP.Net folder in Program Files folder in the drive where your operating system is installed. You will find many files in this folder, but web.config file is of great importance (more on this in articles to come).
Now when you open your Microsoft Visual Studio 2005, to create web based applications, a new template ASP.NET AJAX-ENABLED Web Site is provided to help develop AJAX.Net based web applications. Not only this but a new tab also added in your Toolbox named AJAX Extensions.

Welcome to the new world of AJAX enabled applications and now you are ready to go and develop applications which are more interactive, more responsive and require limited processing on the server.

Dynamic Control Generation in ASP.NET

The Code is written in VB.NET
1.Place a DropDown web server control and name it "ddlCount", right click Edit Items and add values as many numeric values as you want to.
2.Place a Button web server control and name it "btnGenerate"
3.Place a Label web server control and name it "lblDynamics" , clear its TEXT property
4.Place a Button web server control and name it "btnRead"
5.Place a Label web server control and name it "lblData", clear its TEXT property

On the code behind file copy the following code

Public Sub generateControls(ByVal count As Integer)
lblDynamics.Text = ""
Dim i As Integer
For i = 1 To count
lblDynamics.Text += ""
Next
lblDynamics.Text += "< table > < tbody > < tr > < td > %lt; input name="'txtControl" id="'txtControl" style="" type="text'"> Control Number " + i.ToString() + "</td> </tr> </tbody > < /table>"
End Sub

Public Sub readData()

End Sub

'Double click the btnGenerate button to get its click event, see following code

Protected Sub btnGenerate_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles btnGenerate.Click
generateControls(Convert.ToInt32(ddlCount.SelectedValue.ToString()))
ViewState("controlCount") = ddlCount.SelectedValue.ToString()
End Sub


'Double click btnRead button to get the click event, see following code
Protected Sub btnRead_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles btnRead.Click
Dim i As Integer
lblData.Text = ""
For i = 1 To Convert.ToInt32(ViewState("controlCount").ToString())
'Request.Params["txtRequested" + zoneno]
lblData.Text += "You typed: " + Request.Params("txtControl" + i.ToString()).ToString() + " in " + i.ToString + " control."
Next
End Sub