第 63 页

currently selected element. Inline styles are displayed with an entry that reads <inline style>.

Styles defined inline in the current page have (Current Page) appended, and styles defined in an

external style sheet have the filename appended.

Finally, in Visual Studio 2010 there is now IntelliSense support for CSS in both the CSS editor

and HTML editor. The CSS editor, which is opened by default when you double-click a CSS file,

provides IntelliSense prompts for all the

CSS attributes and valid values, as shown

in Figure 20-21. After the CSS styles are

defined, the HTML editor subsequently

detects and displays a list of valid CSS class

names available on the web page when you

add the class attribute to a HTML element.

fiGure 20-21

416 .

chaPter 20 ASp.neT Web FormS

Validation tools

Web browsers are remarkably good at hiding badly formed HTML code from end users. Invalid

syntax that would cause a fatal error if it were in an XML document, such as out-of-order or

missing closing tags, will often render fine in your favorite web browser. However, if you view that

same malformed HTML code in a different browser, it may look totally different. This is one good

reason to ensure that your HTML code is standards-compliant.

The first step to validating your standards compliance is to

set the target schema for validation. You can do this from the

HTML Source Editing toolbar shown in Figure 20-22.

Your HTML markup will be validated against the selected

fiGure 20-22

schema. Validation works like a background spell-checker,

examining the markup as it is entered and adding wavy green lines under the elements or attributes

that are not valid based on the current schema. As shown in Figure 20-23, when you hover over an

element marked as invalid a tooltip appears showing the reason for the validation failure. A warning

entry is also created in the Error List window.

fiGure 20-23

Schema validation will go a long way toward helping your web pages render the same across

different browsers. However, it does not ensure that your site is accessible to everyone. There may

be a fairly large group of people with some sort of physical impairment who find it extremely

difficult to access your site due to the way the HTML markup has been coded.

The World Health Organization has estimated that about 314 million people worldwide are visually

impaired (World Health Organization, 2009). In the United States alone, more than 21 million

people have reported experiencing significant vision loss (National Center for Health Statistics,

2006). That’s a large body of people by anyone’s estimate, especially given that it doesn’t include

those with other physical impairments.

In addition to reducing the size of your potential user base, if you do not take accessibilities into

account you may run the risk of being on the wrong side of a lawsuit. A number of countries have

introduced legislation that requires web sites and other forms of communication to be accessible to

people with disabilities.

Fortunately, Visual Studio 2010 includes an accessibility-validation tool that checks HTML

markups for compliance with accessibility guidelines. The Web Content Accessibility Checker,

Web Controls .

417

launched from Tools . Check Accessibility, enables you to check an individual page for compliance

against several accessibility guidelines, including Web Content Accessibility Guidelines (WCAG)

version 1.0 and the Americans with Disabilities Act Section 508 Guidelines, commonly referred to

as Section 508.

Select the guidelines to check for compliance and click Validate to begin. Once the web page has

been checked, any issues are displayed as errors or warnings in the Error List window, as shown in

Figure 20 - 24.

fiGure 20-24

Previous versions of the ASP.NET web controls rendered markup that generally

did not conform to HTML or accessibility standards. Fortunately, for the most

part, this has been fixed in ASP.NET version 4.0.

web controls

When ASP.NET version 1.0 was first released, a whole new way of building web applications was

enabled for Microsoft developers. Instead of using HTML elements mingled with a server-side

scripting language, as was the case with languages such as classic ASP, JSP, and Perl, ASP.NET

introduced the concept of feature-rich controls for web pages that acted in ways similar to their

Windows counterparts.

Web controls such as button and textbox components have familiar properties such as Text, Left,

and Width, along with just as recognizable methods and events such as Click and TextChanged. In

addition to these, ASP.NET 1.0 provided a limited set of web - specifi c components, some dealing with

data - based information, such as the DataGrid control, and others providing common web tasks, such

as an ErrorProvider to give feedback to users about problems with information they entered into a

web form.

Subsequent versions of ASP.NET introduced well over 50 web server controls including navigation

components, user authentication, web parts, and improved data controls. Third-party vendors

have also released numerous server controls and components that provide even more advanced

functionality.

418 .

chaPter 20 ASp.neT Web FormS

Unfortunately, we don’t have room in this book to explore all the server controls available to

web applications in much detail. In fact, many of the components, such as TextBox, Button, and

Checkbox, are simply the web equivalents of the basic user interface controls that you may well

be very familiar with already. However, it will be useful to provide an overview of some

of the more specialized and functional server controls that reside in the ASP.NET web

developers’ toolkit.

navigation components

ASP.NET includes a simple way to add site-wide navigation to your web applications with the

sitemap provider and associated controls. In order to implement sitemap functionality into your

projects, you must manually create the site data, by default in a file called Web.sitemap, and keep it

up to date as you add or remove web pages from the site. Sitemap files can be used as a data source

for a number of web controls, including SiteMapPath, which automatically keeps track of where you

are in the site hierarchy, as well as the Menu and TreeView controls, which can present a custom

subset of the sitemap information.

Once you have your site hierarchy defined in a Web

.sitemap file, the easiest way to use it is to drag

and drop a SiteMapPath control onto your web

page design surface (see Figure 20-25). This control

fiGure 20-25

automatically binds to the default sitemap provider,

as specified in the Web.config file, to generate the

nodes for display.

Though the SiteMapPath control displays

only the breadcrumb trail leading directly

to the currently viewed page, at times

you will want to display a list of pages

in your site. The ASP.NET Menu control

can be used to do this, and has modes for

both horizontal and vertical viewing of

the information. Likewise, the TreeView

control can be bound to a sitemap and used

to render a hierarchical menu of pages in

a web site. Figure 20-26 shows a web page

with a SiteMapPath, Menu, and TreeView

that have each been formatted with one of

the built-in styles.

user authentication

Perhaps the most significant additions to the web components in ASP.NET version 2.0 were the new

user authentication and login components. Using these components, you can quickly and easily

fiGure 20-26

Web Controls .

419

create the user-based parts of your web application without having to worry about how to format

them or what controls are necessary.

Every web application has a default data source added to its ASP.NET configuration when it is first

created. The data source is a SQL Server Express database with a default name pointing to a local

file system location. This data source is used as the default location for your user authentication

processing, storing information about users and their current settings.

The benefit of having this automated data store generated for each web site is that Visual Studio can

have an array of user-bound web components that can automatically save user information without

your needing to write any code.

Before you can sign in as a user on a particular site, you first need to create a user account. Initially,

you can do that in the administration and configuration of ASP.NET, which is discussed later in this

chapter, but you may also want to allow visitors to the site to create their own user accounts. The

CreateUserWizard component does just that. It consists of two wizard pages with information about

creating an account, and indicates when account creation is successful.

Once users have created their accounts they need to be able to log in to the

site, and the Login control fills this need. Adding the Login component to

your page creates a small form containing User Name and Password fields,

along with the option to remember the login credentials, and a Log In

button (see Figure 20-27). fiGure 20-27

The trick to getting this to work straightaway is to edit your Web.config file and change the

authentication to Forms. The default authentication type is Windows, and without the change

the web site authenticates you as a Windows user because that’s how you are currently logged in.

Obviously, some web applications require Windows authentication, but for a simple web site that

you plan to deploy on the Internet, this is the only change you need to make in order for the Login

control to work properly.

You can also use several controls that will detect whether the user has logged on, and display

different information to an authenticated user as opposed to an anonymous user. The LoginStatus

control is a simple bi-state component that displays one set of content when the site detects that

a user is currently logged in, and a different set of content when there is no logged-in user. The

LoginName component is also simple; it just returns the name of the logged-in user.

There are also controls that allow end users to manage their own passwords. The ChangePassword

component works in conjunction with the other automatic user-based components to enable users

to change their passwords. However, sometimes users forget their passwords, which is where the

PasswordRecovery control comes into play. This component, shown in Figure 20-28, has three

views: UserName, Question, and Success.

The idea is that users first enter their

username so the application can determine

and display the security question, and then

wait for an answer. If the answer is correct,

the component moves to the Success page

and sends an e-mail to the registered e-mail

fiGure 20-28

address.

420 .

chaPter 20 ASp.neT Web FormS

The last component in the Login group on the Toolbox is the LoginView object. LoginView enables

you to create whole sections on your web page that are visible only under certain conditions related

to who is (or isn’t) logged in. By default, you have two views: the AnonymousTemplate, which is

used when no user is logged in, and the LoggedInTemplate, used when any user is logged in. Both

templates have an editable area that is initially completely empty.

However, because you can define specialized roles and assign

users to these roles, you can also create templates for each

role you have defined in your site (see Figure 20-29). The Edit

RoleGroups command on the smart-tag Tasks list associated

with LoginView displays the typical collection editor and enables

you to build role groups that can contain one or multiple roles.

When the site detects that the user logs in with a certain role, the

display area of the LoginView component is populated with that

particular template’ s content.

fiGure 20-29

See the “ASP.NET Web Site Administration” section later in this chapter for

information on how to create and manage roles.

What’s amazing about all of these controls is that with only a couple of manual property changes

and a few extra entries in the Web.config file, you can build a complete user-authentication system

into your web application. In fact, as you’ll see in the “ASP.NET Web Site Administration” section

later in this chapter, you can edit all these settings without needing to edit the Web.config file

directly. Now that’s efficient coding!

data components

Data components were introduced to Microsoft

web developers with the first version of

Visual Studio .NET and have evolved to be even

more powerful with each subsequent release

of Visual Studio. Each data control has a

smart - tag Tasks list associated with it that

enables you to edit the individual templates

for each part of the displayable area. For

example, the DataList has seven templates

in all, which can be individually customized

(see Figure 20 - 30).

Data source Controls

The data source control architecture in ASP.NET provides a really simple way for UI controls to bind

to data. The data source controls that were released with ASP.NET 2.0 include SqlDataSource and

AccessDataSource for binding to SQL Server or Access databases, ObjectDataSource for binding

fiGure 20-30

Web Controls .

421

to a generic class, XmlDataSource for binding to XML files, and SiteMapDataSource for the site

navigation tree for the web application.

ASP.NET 3.5 shipped with a LinqDataSource control that enables you to directly bind UI controls

to data sources using Language Integrated Query (LINQ). The EntityDataSource control, released

with ASP.NET 3.5 SP1, supports data binding using the ADO.NET Entity Framework. These controls

provide you with a designer-driven approach that automatically generates most of the code necessary

for interacting with the data.

All data source controls operate in a similar way. For the purposes of this discussion, the remainder

of this section uses the LinqDataSource as an example.