Evjen c18.tex V2 - 01/28/2008 3:01pm Page 887 Chapter 18: HTML and CSS Design with ASP.NET Existing Style Sheet to insert the style into an existing style sheet file. If you select either New Style Sheet or Existing Style Sheet, you will need to provide a value for the URL combo box. Once you have entered the Selector you want to use and chosen a location to define the style, you can begin to set the styles properties. Simply select the property category from the Category list box and set the property values. The Preview area gives you a real-time preview of your new style. Additionally, the Description area shows you the actual property syntax created by Visual Studio. Click OK to close the dialog box. After you begin to create styles for your application, you need to be able to manage and apply those styles to elements in your application. Visual Studio 2008 introduces three new tool windows you can use to manage style sheets, apply styles to elements, and easily inspect the style properties applied to an element. Manage Styles Tool Window The first tool to explore is the Manage Styles tool window, which can b e opened by selecting Manage Styles from the CSS Styles submenu of the view menu. This tool window, shown in Figure 18-20, gives you the birds-eye view of all of the styles available to the current Web page open in Visual Studio. Figure 18-20 If you examine the contents of this tool, you see that the top portion includes two important links: New Style, which opens the New Style dialog box and allows you to create a new CSS styles as described earlier in this section, and the Attach Style Sheet link, which allows you to import new style sheets into a 887 Evjen c18.tex V2 - 01/28/2008 3:01pm Page 888 Chapter 18: HTML and CSS Design with ASP.NET Web page. Using this option to attach style sheets to the Web page causes Visual Studio to insert < link > tags into your Web page for you. Remember that you need to be careful about the order of your link tags and style blocks in order to make sure that your styles are applied correctly. The next portion of the tool window displays all of the styles available to the page. Styles are color coded according to their selector type using colored bullets: blue for Type Selectors, green for Class Selectors, and red for ID Selectors. Styles used within the page are shown with a gray circle surrounding the colored bullet. Should your Web page contain multiple linked style sheets, or inline styles sheets, these styles would be grouped together making it easy to determine where a style is defined. Also, as you can see in Figure 18-20, the t ool window also allows you to view style sheets attached to the Web page via the CSS Imports statement. By expanding the layout.css node in the figure, you can see a listing of all of the styles included in that style sheet. Finally, the bottom of the tool window includes a preview area, allowing you to see a real-time preview of each style. Apply Styles Tool Window The second tool to help you use CSS in Visual Studio 2008 is the Apply Styles tool window. As with t he Manage Style tool window, the Apply Styles tool window gives you a much easier way of viewing the CSS Styles available in your application and applying them to elements in a Web page. From the tool window, you can attach CSS files to the Web page, making external CSS Styles available; select page styles to apply or remove from an element; and modify styles. As with the other CSS tool windows, the Apply Styles tool window displays the available styles based on the CSS inheritance order, with external styles being shown first, then the page styles section, and finally the inline styles shown last. The Apply Styles also is contextually sensitive to the currently selected element and will show only those styles in your application that can be applied to the element type. Styles are also grouped according to the CSS Selector style, with a different visual indicator for each Selector type. The tool window shown in Figure 18-21 shows the styles available for an anchor tag < a >. The tool first shows all styles in the attached styles2.css file, then the styles in the current page, and finally, if applied, the element’s inline styles. You can click on styles in any of these sections to apply them to the element. The Apply Styles tool also includes the intelligence to properly apply multiple class selectors (hold the Ctrl key down while you click class selectors in the list), but prevent you from selecting multiple ID selectors because that would result in invalid CSS. The tool will also not let you deselect type selectors or inline styles. CSS Properties Tool Window The final new tool is the CSS Properties tool window shown in Figure 18-22. This handy tool window shows you all of the CSS properties that have been applied to the currently selected element. The tool window is composed of two separate parts: the Applied Rules list and the CSS properties grid. The Applied Rules list shows all of the CSS rules that are applied to the selected element. The list is automatically sorted to show you the inheritance chain of the applied rules with the outermost rules at 888 Evjen c18.tex V2 - 01/28/2008 3:01pm Page 889 Chapter 18: HTML and CSS Design with ASP.NET Figure 18-21 the top, moving down to the innermost rules. That means that rules contained in external CSS files are automatically sorted to the top of the list, and inline styles sorted to the bottom. You can click on each rule in the list and alter the properties that are shown in the CSS Properties grid displayed below. The CSS Properties grid works in a similar fashion to the standard .NET properties grid, showing you all of the CSS properties available for the element, and properties that have values set being shown in 889 Evjen c18.tex V2 - 01/28/2008 3:01pm Page 890 Chapter 18: HTML and CSS Design with ASP.NET Figure 18-22 bold. Additionally, you can set property values for a CSS rule directly from the CSS property grid. Also in the CSS Properties tool window is a Summary button that allows you to change t he display of the CSS Properties grid to show only properties that have values set. This can be very useful because HTML elements can have a large number of CSS properties. Because CSS also includes the concept of property inheritance, which is generally not available in a standard .NET object, the CSS Rules list and CSS Properties grid have been designed to help you fully understand where a specific property value applied to an element is being defined. As you click on each 890 Evjen c18.tex V2 - 01/28/2008 3:01pm Page 891 Chapter 18: HTML and CSS Design with ASP.NET rule in the CSS Rules list, the CSS Properties grid is updated to reflect that rule’s properties. What you will notice, however, is that certain properties have a red strikethrough. (See Figure 18-23.) Figure 18-23 The strikethrough of the property indicates that the value of that property is being overridden by a rule closer to the element. Managing Relative CSS Links in Masterpages When working with CSS links in a masterpage, it can become difficult to manage the link to the CSS because the Link tag will not resolve a relative URL properly. A workaround for this is to define the tag as normal, but give it an ID. Then at runtime, in the Page Load event, simply set the Href of the link tag to the proper relative URL. Styling ASP.NET Controls Because ASP.NET controls simply render HTML markup, it is fairly easy to use CSS to style them. In fact, by default the controls actually already use inline CSS styles. You can see this in action by looking at the standard ASP.NET Button control. The standard method for styling ASP.NET controls like the Button is to provide values for the style related properties exposed by the control which is shown here: <asp:Button ID="Button1" runat="server" BackColor="#3333FF" BorderColor="Silver" BorderStyle="Double" BorderWidth="3px" Font-Bold="True" Font-Size="Large" ForeColor="White" Text="Button" /> When ASP.NET processes the Web page containing this control, it converts a button into a standard HTML Input tag, and it also converts the style properties you have set into CSS styles and applies them to the Input tag. The HTML and CSS rendered by the button is shown here: <input type="submit" name="Button1" value="Button" id="Button1" style="color:White;background-color:#3333FF;border-color:Silver; border-width:3px; border-style:Double;font-size:Large;font-weight:bold;" /> Setting style properties directly on the ASP.NET controls is a fast and simple way to style the ASP.NET controls in your application. Additionally, because these are standard properties on the controls, you can also set them at runtime using code. 891 Evjen c18.tex V2 - 01/28/2008 3:01pm Page 892 Chapter 18: HTML and CSS Design with ASP.NET protected void Page_Load(object sender, EventArgs e) { this.Button1.BackColor = System.Drawing.ColorTranslator.FromHtml("#3333FF"); this.Button1.BorderColor = System.Drawing.Color.Silver; this.Button1.BorderStyle= BorderStyle.Double; this.Button1.BorderWidth = Unit.Pixel(3); this.Button1.Font.Bold=true; this.Button1.Font.Size=FontUnit.Large; this.Button1.ForeColor=System.Drawing.Color.White; } While using properties to set style info is easy and convenient, it does have some drawbacks, especially when you use the same technique with larger repeating controls. First, using inline styles makes it difficult to control the styling of your Web site at a higher, more abstract level. If you want every button in your Web site to have a specific style, generally you would have to manually set that style on every Button control in your entire site. Themes can help solve this but are not always useful, especially when you are mixing ASP.NET controls with standard HTML controls. Second, for controls that generate a large amount of repetitive HTML, such as the GridView, having inline styles on every element of each iteration of the HTML adds a lot of extra weight to your Web page. Thankfully, every ASP.NET server control exposes a CssClass property. This property a llows you to provide o ne or more Class Selector Rules to the control. While this technique is helpful, and usually better than letting the control render inline styles, it still requires you to be familiar with the HTML that the control will render at runtime. Listing 18-13 shows how you can use the CssClass attribute to style the ASP.NET Button control. Listing 18-13: Styling a standard ASP.NET Button control using CSS <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head id="Head1" runat="server"> <link href="SpringStyles.css" rel="stylesheet" type="text/css" /> <style> .search { color:White; font-weight:bolder; background-color:Green; } </style> </head> <body> <form id="form1" runat="server"> <asp:Button ID="Button1" CssClass="search" runat="server" Text="Button" /> </form> </body> </html> 892 Evjen c18.tex V2 - 01/28/2008 3:01pm Page 893 Chapter 18: HTML and CSS Design with ASP.NET In this case, the Button will have the search class applied to it. ASP.NET 2.0 CSS–Friendly Control Adapters If you are looking for more control over the rendering of the ASP.NET controls, especially so you can leverage more CSS-friendly development techniques, then you may want to look at the ASP.NET 2.0 CSS Friendly Control Adapters toolkit. This free download from Microsoft, available at www.asp.net/ cssadapters/ , leverages the ASP.NET Control Adapter model to allow you to have more control over how the in-box control render. The toolkit includes CSS-friendly adapters for five of the standard ASP.NET controls: Menu, TreeView, DetailsView, FormView, and DataList. The CSS controls adapters for these controls modify the HTML they render so that it can be more easily styled with CSS. In fact, when these controls render using the CSS Friendly Control Adapters toolkit, they actually ignore most of the style-related properties that exist on the default control API. To use CSS with these controls you simply create a style sheet using the same techniques that have been described easier in the chapter. Next you create CSS rules that map to the different parts of the control. The documentation included with the adapters gives you a great detailed view of the new control structure and how that maps to the CSS classes you can create. Summary CSS is a great way to add style to your Web site. It’s a powerful and convenient mechanism that allows you to create complex styles and layouts for your Web site. A full discussion of CSS would require much more time and space than we have here, so this chapter focused on showing you some of the basic concepts of CSS, the tools Visual Studio provides you to work more easily with CSS, and how you can use CSS with ASP.NET server controls. If you are interested in learning more about the details of CSS, we recommended that you pick up the Wrox title Beginning CSS: Cascading Style Sheets for Web Design, 2nd Edition by Richard York (Wiley Publishing, Inc., 2007). This chapter provided an overview of CSS, introducing you to external, internal, and inline style sheets. You learned about the various Selector types the CSS offers and about basic layout and positioning of CSS elements, including how the box model works to influence element positions in your Web page. Next you reviewed the tools available in Visual Studio that make working with CSS easy. New tools in Visual Studio 2008, including the Style Manager and CSS properties tool windows, make working with CSS easier than ever. Finally, you looked at how you can use CSS with the ASP.NET server controls, and how you can use the ASP.NET 2.0 CSS Friendly Control Adapters to have more control over the style of the standard ASP.NET server controls. 893 Evjen c19.tex V2 - 01/28/2008 3:08pm Page 895 ASP.NET AJAX AJAX is definitely the hot buzzword in the Web application world at the moment. AJAX is an acronym for Asynchronous JavaScript and XML and, in Web application development, it signifies the capability to build applications that make use of the XMLHttpRequest object. The creation and the inclusion of the XMLHttpRequest object in JavaScript and the fact that most upper-level browsers support it led to the creation of the AJAX model. AJAX applications, although they have been around for a few years, gained popularity after Google released a number of notable, AJAX-enabled applications such as Google Maps and Google Suggest. These applications demon- strated the value of AJAX. Shortly thereafter, Microsoft released a beta for a new toolkit that enabled developers to incorpo- rate AJAX features in their Web applications. This toolkit, code-named Atlas and later renamed ASP.NET AJAX, makes it extremely simple to start using AJAX features in your applications today. The ASP.NET AJAX toolkit was not part of the default .NET Framework 2.0 install. If you are using the .NET Framework 2.0, it is an extra component that you must download from the Internet. If you are using ASP.NET 3.5, you don’t have to worry about installing the ASP.NET AJAX toolkit as everything you need is already in place for you. Understanding the Need for AJAX Today, if you are going to build an application, you have the option of creating a thick-client or a thin-client application. A thick-client application is typically a compiled executable that end users can run in the confines of their own environment — usually without any dependencies elsewhere (such as an upstream server). Generally, the technology to build this type of application is the Windows Forms technology, or MFC in the C++ world. A thin-client application is typically one that has its processing and rendering controlled at a single point (the upstream server) and the results of the view are sent down as HTML to a browser to be viewed by a client. To work, this type of technology generally requires that the end user be connected to the Internet or an intranet of some kind. Each type of application has its pros and cons. The thick-client style of application is touted as more fluid and more responsive to an end user’s actions. In a Web-based application, the complaint has Evjen c19.tex V2 - 01/28/2008 3:08pm Page 896 Chapter 19: ASP.NET AJAX been for many years that every action by an end user takes numerous seconds and results in a jerky page refresh. In turn, the problem with a thick-client style of application has always been that the application sits on the end user’s machine and any patches or updates to the application require you to somehow upgrade each and every machine upon which the application sits. In contrast, the thin-client application, or the Web application architecture includes only one instance of the application. The application in this case is installed on a Web server and any updates that need to occur happen only to this instance. End users who are calling the application through their browsers always get the latest and greatest version of the application. That change model has a lot of power to it. With this said, it is important to understand that Microsoft is making huge inroads into solving this thick- or thin-client problem and you now have options that completely change this model. For instance, the Windows Presentation Foundation technology recently offered by Microsoft and the new Silverlight technology blur the lines between to two traditional application styles. Even with the existing Windows Forms and ASP.NET technologies to build the respective thick- or thin- client applications, each of these technologies are advancing to a point where they are even blurring the lines further. ASP.NET AJAX in particular is further removing any of t he negatives that would have stopped you from building an application on the Web. ASP.NET AJAX makes your Web applications seem more fluid than ever before. AJAX-enabled applica- tions are responsive and give the end user immediate feedback and direction through the workflows that you provide. The power of this alone makes the study of this new technology and its incorporation into your projects of the utmost importance. Before AJAX So, what is AJAX doing to your Web application? First off, let’s take a look at what a Web page does when it does not use AJAX. Figure 19-1 shows a typical request and response activity for a Web a pplication. Figure 19-1 896 Evjen c19.tex V2 - 01/28/2008 3:08pm Page 897 Chapter 19: ASP.NET AJAX In this case, an end user makes a request from his browser to the application that is stored on your Web server. The server processes the request and ASP.NET renders a page, which is then sent to the requestor as a response. The response, once received by the end user, is displayed within the end user’s browser. From here, many events that take place within the application instance as it sits within the end user’s browser causes the complete request and response process to reoccur. For instance, the end user might click a radio button, a check box, a button, a calendar, or anything else and this causes the entire Web page to be refreshed or a new page to be provided. AJAX Changes the Story On the other hand, an AJAX-enabled Web page includes a JavaScript library on the client that takes care of issuing the calls to the Web server. It does this when it is possible to send a request and get a response for just part of the page and using script; the client library updates that part of the page without updating the entire page. An entire page is a lot of code to send down to the browser to process each and every time. By just processing part of the page, the end user experiences what some people term ‘‘fluidity’’ in the page, which makes the page seem more responsive. The amount of code required to update just a portion of a page is less and produces the responsiveness the end user expects. Figure 19-2 shows a diagram of how this works. Figure 19-2 Figure 19-2, demonstrates that the first thing that happens is the entire page is delivered in the initial request and response. From there, any partial updates required by the page are done using the client script library. This library can make asynchronous page requests and update just the portion of the page that needs updating. One major advantage to this is that a minimal amount of data is transferred for the updates to occur. Updating a partial page is better than recalling the entire page for what is just a small change to the page. 897 . them. In fact, by default the controls actually already use inline CSS styles. You can see this in action by looking at the standard ASP. NET Button control. The standard method for styling ASP. NET. not part of the default .NET Framework 2.0 install. If you are using the .NET Framework 2.0, it is an extra component that you must download from the Internet. If you are using ASP. NET 3. 5, you. the ASP. NET Button control. Listing 18- 13: Styling a standard ASP. NET Button control using CSS <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html