582 |
Part VI Building Web Applications |
Event Processing and Roundtrips
Server controls are undoubtedly a powerful feature of ASP.NET, but they come with a price. You should remember that although events are raised by the Web client, the event code is executed on the Web server, and that each time an event is raised, an
HTTP request (or postback) is sent over the network to the Web server. The task of the Web server is to process this request and send a reply containing an HTML page to be displayed. In the case of many events, this page is 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 the server generates the HTML response, it can preserve these values in the display. (If the Web server sent back only 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 uses 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, 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
Chapter 27 Introducing ASP.NET |
583 |
values for other attributes, such as the way in which lists are formatted and numbered. (You can edit a style by right-clicking the style in the Manage Styles window and then by clicking Modify Style.) However, a style defined in this way applies only 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; if the company you work for decided
to change the font on all of its Web pages, imagine how many forms you would 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), 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 is made up of 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 name 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 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” ...%>
584 Part VI Building Web Applications
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 Litware Web site and then apply this theme to all pages in the Web site.
Create a new theme
1.In Solution Explorer, right-click the C:\...\Litware 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 subfolder is created called Theme1.
2.Change the name of the Theme1 folder to LitTheme.
3.In Solution Explorer, right-click the LitTheme 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.
4.Click the Skin File template, type Lit.skin in the Name text box, and then click Add.
The skin file Lit.skin is added to the LitTheme folder, and the file is displayed in the
Code and Text Editor window.
5.Append the following lines to the end of the Lit.skin file in the Code and Text Editor window (this file contains a comment with some very brief instructions):
<asp:TextBox BackColor=”Red” ForeColor=”White” Runat=”Server” />
<asp:Label BackColor=”White” ForeColor=”Red” Runat=”Server” Font-Bold=”True” /> <asp:RadioButton BackColor=”White” ForeColor=”Red” Runat=”Server”/> <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.
Chapter 27 Introducing ASP.NET |
585 |
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 that 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 a Web configuration file. You are going to use the latter approach in the next exercise. This mechanism causes all pages for the Web site to apply the same theme automatically.
Create a Web configuration file, and apply the theme
1.In Solution Explorer, double-click the web.config file to display it in the Code and Text Editor window.
2.Locate the <pages> line, and modify it as shown here in bold type:
<pages theme=”LitTheme”>
3.On the Debug menu, click Start Without Debugging.
Internet Explorer appears and displays 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.
4.In Solution Explorer, double-click the Lit.skin file to display it in the Code and Text Editor window. Modify the element defining the appearance of TextBox and DropDownList controls, as shown here in bold type:
<asp:TextBox BackColor=”White” ForeColor=”Red” Font-Bold=”True” Runat=”Server” />
...
<asp:DropDownList BackColor=”White” ForeColor=”Red” Runat=”Server” />
5.Run the form again. Notice how the style of the First Name, Last Name, and Employee Id TextBox controls, and the Role drop-down list have changed; hopefully, they are easier to read.
6.Close Internet Explorer when you have finished.
