displayed. In the case of many events, this page will be the same as the one that issued
the original request. However, the Web server also needs to know what other data the
user has entered on the page so that when it generates the HTML response, it can
preserve these values in the display. (If the Web server only sent back the HTML that
composed the original page, any data entered by the user would disappear.) If you look at
the HTML source of a page generated by a Web form, you will notice a hidden input
field in the form. The example shown previously had this hidden field:
<input type="hidden" name="__VIEWSTATE"
value="/WEPdDwxNDk0MzA1NzE0O3Q8O2w8aTwxPjs+O2w8bDxpPDE3PjtpPDE5
PjtpP DIxPjtpPDI3PjtpPDMzPjs+O2w8dDxwPHA8bDxDaGVja2VkOz47bDxvPH
Q+Oz4+Oz 47Oz47dDxwPHA8bDxDaGVja2VkOz47bDxvPGY+Oz4+Oz47Oz47dDxw
PHA8bDxDaGVja2 VkOz47bDxvPGY+Oz4+Oz47Oz47dDx0PDt0PGk8Mz47QDxBbm
FseXN0O0Rlc2lnbmVyO0 RldmVsb3Blcjs+O0A8QW5hbHlzdDtEZXNpZ25lcjtE
ZXZlbG9wZXI7Pj47Pjs7Pj t0PHA8cDxsPFRleHQ7PjtsPFxlOz4+Oz47Oz47Pj
47Pj47bDxQZW9uQnV0dG9uO1BIQ kJ1dHRvbjtQSEJCdXR0b247VlBCdXR0b247
VlBCdXR0b247UHJlc2lkZW50QnV0dG9uO 1ByZXNpZGVudEJ1dHRvbjs+Pg==" />
This information is the content of the controls, or view state, in an encoded form. It is
sent to the Web server whenever any event causes a postback. The Web server will use
this information to repopulate the fields on the page when the HTML response is
generated.
All of this data has an impact on scalability. The more controls you have on a form, the
more state information has to be passed between the browser and Web server during the
postback processing, and the more events you use, the more frequently this will happen.
In general, to reduce network overhead, you should keep your Web forms relatively
simple and avoid excessive use of server events, and be selective with view state to avoid
sending unnecessary information across the network. You can disable the view state for a
control by setting the EnableViewState property of the control to False (the default
setting is True).
Creating and Using a Theme
When you first created the Web site, you defined a style for the form. This style
determined the default font and color for controls on the form, and could also be used to

specify default values for other attributes, such as the way in which lists are formatted
and numbered (click the Lists tab in the Style Builder dialog box if you want to
experiment with list formatting). However, a style defined in this way only applies to a
single form. Commercial Web sites typically contains tens, or maybe hundreds of forms.
Keeping all of these forms consistently formatted can be a time-consuming task (imagine
if the company you work for decided to change the font on all of its Web pages, how
many forms would you need to update and rebuild). This is where Themes can be very
useful. A Theme is a set of properties, styles, and images that you can apply to the
controls on a page, or globally across all pages in a Web site.
NOTE
If you are familiar with cascading style sheets (.css files), then the concept of Themes
might be familiar to you. However, there are some differences between cascading style
sheets and Themes. In particular, Themes do not cascade in the same way as cascading
style sheets, and properties defined in a Theme applied to a control always override any
local property values defined for the control.
Defining a Theme
A Theme comprises a set of skin files located in a named subfolder in the App_Themes
folder for a Web site. A skin file is a text file that has the file extension “.skin”. Each skin
file specifies the default properties for a particular type of control using syntax very
similar to that which is displayed when you view a Web form in the Source View
window. For example, the following skin file specifies the default properties for TextBox
and Label controls:
<asp:TextBox BackColor="Blue" ForeColor="White" Runat="Server" />
<asp:Label BackColor="White" ForeColor="Blue" Runat="Server" Font-Bold="True" />
You can specify many properties of a control in a skin file, but not all of them. For
example, you cannot specify a value for the AutoPostBack property. Additionally, you
cannot create skin files for every type of control, but most commonly used controls can
be configured in this way.
Applying a Theme
After you have created a set of skin files for a Theme, you can apply the Theme to a page

by modifying the @Page attribute that occurs at the start of the page when displayed in
the Source View window. For example, if the skin files for a Theme are located in the
App_Themes\BlueTheme folder under the Web site, you can apply the Theme to a page
like this:
<%@Page Theme="BlueTheme" %>
If you want to apply the Theme to all pages in the Web site, you can modify the
Web.config file and specify the Theme in the pages element, like this:
<configuration>
<system.web>
<pages theme="BlueTheme" />
</system.web>
</configuration>
If you modify the definition of a Theme, all controls and pages that use the Theme will
pick up the changes automatically when they are next displayed.
In the final set of exercises in this chapter, you will create a Theme for the Honest John
Web site, and apply this Theme to all pages in the Web site.
Create a new theme
1. In the Visual Studio 2005 programming environment, open the Honest John Web
site if it is not already open.
2. In the Solution Explorer, right-click the Honest John project folder. Point to Add
ASP.NET Folder, and then click Theme.
A new folder called App_Themes is added to the project, and a sub-folder is
created called Theme1.
3. Change the name of the Theme1 folder to HJTheme.
4. In the Solution Explorer, right-click the HJTheme folder and then click Add New
Item.
The Add New Item dialog box appears displaying the types of file that can be
stored in a Themes folder.
5. Click the Skin File template, and type HJ.skin for the name. Click Add.
The skin file HJ.skin is added to the HJTheme folder, and the file is displayed in

the Code and Text Editor window.
6. Add the following lines to the end of the HJ.skin file in the Code and Text Editor
window (this file contains a comment with some very brief instructions):
7. <asp:TextBox BackColor="Red" ForeColor="White" Runat="Server" />
8. <asp:Label BackColor="White" ForeColor="Red" Runat="Server" Font-
Bold="True" />
9. <asp:RadioButton BackColor="White" ForeColor="Red" Runat="Server"/>
10. <asp:Button BackColor="Red" ForeColor="White" Runat="Server" Font-
Bold="True"/>
<asp:DropDownList BackColor="Red" ForeColor="White" Runat="Server"/>
This simple set of properties displays TextBox, Button, and DropDownListBox
controls as white text on a red background, and Label and RadioButton controls as
red text on a white background. The text on Label and Button controls is displayed
using the bold font version of the current font.
IMPORTANT
The skin file editor is very basic and does not provide any Intellisense to help you. If you
make a mistake in this file, the application will run, but entries in this file might be
ignored. When you run the application later, if any of the controls do not appear as
expected, ensure you have not mistyped anything in this file.
As mentioned previously, there are at least two ways you can apply a Theme to a web
form: you can set the @Page attribute for each page, or you can specify the Theme
globally across all pages by using an Web configuration file. You are going to use the
latter approach in the next exercise. Using this mechanism will cause all new pages that
you add to the site to automatically apply the same Theme.
Create a Web configuration file and apply the theme
1. In the Solution Explorer, right-click the Honest John project and click Add New
Item.
The Add New Item dialog box appears displaying the types of file that you can
add to a Web site.
2. Click the Web Configuration File template, ensure the name is set to Web.config,

and click Add.
The file Web.config is added to the project and appears in the Code and Text
Editor window.
3. Scroll to the end of the Web.config file, and insert a new line immediately above
the </system.web> line. Type the following entry in this new line:
<pages theme="HJTheme" />
4. On the Debug menu, click Start Without Debugging.
TIP
If Internet Explorer displays a list of files rather than the Web form, close Internet
Explorer and return to Visual Studio 2005. In the Solution Explorer, right-click
EmployeeForm.aspx and click Set As Start Page. Then run the Web application
again.
5. Internet Explorer appears displaying the Web form. Verify that the style of the
controls on the form have changed as expected, although any text in the text boxes
might be a little hard to read (you will fix this shortly). Close Internet Explorer
when you have finished.
6. In Visual Studio 2005, display the HJ.skin file in the Code and Text Editor
window. Modify the element defining the appearance of TextBox and
DropDownList controls, as follows:
7. <asp:TextBox BackColor="White" ForeColor="Red" Font-Bold="True"
Runat="Server" />
8.
<asp:DropDownList BackColor="White" ForeColor="Red" Runat="Server" />
9. Run the form again. Notice how the style of all the TextBox controls (First Name,
Last Name, and Employee Id) and the DropDownList (Role) has changed, and is
easier to read. Close Internet Explorer when you have finished.
• If you want to continue to the next chapter
Keep Visual Studio 2005 running and turn to Chapter 26.
• If you want to exit Visual Studio 2005 for now
On the File menu, click Exit. If you see a Save dialog box, click Yes.




