Professional ASP.NET 3.5 in C# and Visual Basic Part 94 pdf

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.. This to

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 be 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

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 tool window also allows you to view style sheets attached to the

Web page via the CSS Imports statement By expanding thelayout.cssnode 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 the

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 attachedstyles2.cssfile, 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

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

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 the 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

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 theLinktag 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 theHrefof 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

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 aCssClassproperty This property allows you to

provide one 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 theCssClassattribute 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>

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 atwww.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

Summar y

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

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 theXMLHttpRequestobject

The creation and the inclusion of theXMLHttpRequestobject 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

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 the 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 application.

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