第 64 页

Before you can use LinqDataSource, you must already have a DataContext class created. The

data context wraps a database connection in order to provide object lifecycle services. Chapter 28

explains how to create a new DataContext class in your application.

You can then create a LinqDataSource control instance by dragging it from the Toolbox onto the

design surface. To configure the control, launch the Configure Data Source Wizard under the smart

tag for the control. Select the data context class, and then choose the data selection details you want

to use. Figure 20-31 shows the screen within the Configure Data Source Wizard that enables you to

choose the tables and columns to generate a LINQ to SQL query. It is then a simple matter to bind

this data source to a UI server control, such as the ListView control, in order to provide read-only

access to your data.

fiGure 20-31

422 .

chaPter 20 ASp.neT Web FormS

You can easily take advantage of more advanced data access functionality supported by LINQ,

such as allowing inserts, updates, and deletes, by setting the EnableInsert, EnableUpdate, and

EnableDelete properties on LinqDataSource to true. You can do this either programmatically in

code or through the property grid.

You can find more information on LINQ in Chapter 28.

Data View Controls

Once you have specified a data source it is a simple matter to use one of the data view controls to

display this data. ASP.NET ships with eight built-in web controls that render data in different ways

including Chart, DataList, DetailsView, FormView, GridView, ListView, and Repeater. The Chart

control is used to render data graphically using visualizations such as a bar chart or line chart and is

discussed in Chapter 30.

A common complaint about the ASP.NET server controls is that developers have very little control

over the HTML markup they generate. This is especially true of many of the data view controls

such as GridView, which always uses an HTML table to format the data it outputs, even though in

some situations an ordered list would be more suitable.

The ListView control provides a good solution to the shortcomings of other data controls in this

area. Instead of surrounding the rendered markup with superfluous <table> or <span>

elements, it

enables you to specify the exact HTML output that is rendered. The HTML markup is defined in

the 11 templates that ListView supports:

.

AlternatingItemTemplate

.

EditItemTemplate

.

EmptyDataTemplate

.

EmptyItemTemplate

.

GroupSeparatorTemplate

.

GroupTemplate

.

InsertItemTemplate

.

ItemSeparatorTemplate

.

ItemTemplate

.

LayoutTemplate

.

SelectedItemTemplate

The two most useful templates are LayoutTemplate and ItemTemplate. LayoutTemplate specifies the

HTML markup that surrounds the output, and ItemTemplate specifies the HTML used to format

each record that is bound to the ListView.

When you add a ListView control to the design surface, you can bind it to a data source and

then open the Configure ListView dialog box shown in Figure 20-32, via smart-tag actions. This

provides a code-generation tool that automatically produces HTML code based on a small number

of predefined layouts and styles.

Web Controls .

423

fiGure 20-32

Because you have total control over the HTML markup, the Configure ListView

dialog box does not even attempt to parse any existing markup. Instead, if you

reopen the window it simply shows the default layout settings.

Data Helper Controls

The DataPager control is used to split the data that is displayed by a UI control into multiple pages,

which is necessary when you ’ re working with very large data sets. It natively supports paging via either

a NumericPagerField object, which lets users select a page number, or a NextPreviousPagerField object,

which lets users navigate to the next or previous page. As with the ListView control, you can also write

your own custom HTML markup for paging by using the TemplatePagerField object.

Finally, the QueryExtender control, new to ASP.NET version 4.0, provides a way to filter data

from an EntityDataSource or LinqDataSource in a declarative manner. It is particularly useful for

searching scenarios.

web Parts

Another excellent feature in ASP.NET is the ability to create Web Parts controls and pages. These

allow certain pages on your site to be divided into chunks that either you or your users can move

around, and show and hide, to create a unique viewing experience. Web Parts for ASP.NET are

loosely based on custom web controls but owe their inclusion in ASP.NET to the huge popularity of

Web Parts in SharePoint Portals.

424 .

chaPter 20 ASp.neT Web FormS

With a Web Parts page, you first create a WebPartManager component

that sits on the page to look after any areas of the page design that are

defined as parts. You then use WebPartZone containers to set where you

want customizable content on the page, and then finally place the actual

content into the WebPartZone container.

Though these two components are the core of Web Parts, you need only look

at the WebParts group in the Toolbox to discover a whole array of additional

components (see Figure 20-33). You use these additional components to

enable your users to customize their experience of your web site.

Unfortunately, there is not enough space in this book to cover the

ASP.NET web controls in any further detail. If you want to learn more,

we recommend you check out the massive Professional ASP.NET 4 in C#

and VB by Bill Evjen, Scott Hanselman, and Devin Rader.

Master PaGes

A very useful feature of web development in Visual Studio is the ability to create master pages that

define sections that can be customized. This enables you to define a single page design that contains

the common elements that should be shared across your entire site, specify areas that can house

individualized content, and inherit it for each of the pages on the site.

To add a master page to your Web Application project, use the Add New Item command from the

web site menu or from the context menu in the Solution Explorer. This displays the Add New Item

dialog, shown in Figure 20-34, which contains a large number of item templates that can be added

to a web application. You’ll notice that besides Web Forms (.aspx) pages and Web User Controls,

you can also add plain HTML files, style sheets, and other web-related file types. To add a master

page, select the Master Page template, choose a name for the file, and click Add.

fiGure 20-33

fiGure 20-34

rich Client-side Development .

425

When a master page is added to your web site, it starts out as a minimal web page template with

two empty ContentPlaceHolder components — one in the body of the web page and one in the

head. This is where the detail information can be placed for each individual page. You can create the

master page as you would any other web form page, complete with ASP.NET and HTML elements,

CSSs, and theming.

If your design requires additional areas for detail information, you can either drag a new

ContentPlaceHolder control from the Toolbox onto the page, or switch to Source view and add the

following tags where you need the additional area:

<asp:ContentPlaceHolder id=“aUniqueid” runat="server">

</asp:ContentPlaceHolder>

Once the design of your master page has been finalized, you can use it for the detail pages for new

web forms in your project.

Unfortunately, the process to add a form

that uses a master page is slightly different

depending on whether you are using a

Web Application or Web Site project. For

a Web Application project, rather than adding

a new Web Form you should add a new Web

Form using Master Page. This displays the

Select a Master Page dialog box shown in

Figure 20-35. In a Web Site project, the Add

New Item window contains a checkbox

titled Select Master Page. If you check this,

the Select a Master Page dialog is displayed.

Select the master page to be applied to the

detail page and click OK. The new web form page that is added to the project will include one or

more Content controls, which map to the ContentPlaceHolder controls on the master page.

It doesn’t take long to see the benefits of master pages and understand why they have become a very

popular feature. However, it is even more useful to create nested master pages.

Working with nested master pages is not much different from working with normal master pages.

To add one, select Nested Master Page from the Add New Item window. You are prompted to select

the parent master page via the Select a Master Page window that was shown in Figure 20-35. When

you subsequently add a new content web page, any nested master pages are also shown in the Select

a Master Page window.

rich client-side deVeloPMent

In the past couple of years the software industry has seen a fundamental shift toward emphasizing

the importance of the end user experience in application development. Nowhere has that been

more apparent than in the development of web applications. Fueled by technologies such as AJAX

and an increased appreciation of JavaScript, we are now expected to provide web applications that

approach the richness of their desktop equivalents.

fiGure 20-35

426

.

chaPter 20 ASp.neT Web FormS

Microsoft has certainly recognized this and includes a range of tools and functionality in Visual

Studio 2010 that support the creation of rich client-side interactions. There is integrated debugging

and IntelliSense support for JavaScript. ASP.NET AJAX is shipped with Visual Studio 2010, and

there is support in the IDE for AJAX Control Extenders. These tools make it much easier for you to

design, build, and debug client-side code that provides a much richer user experience.

developing with Javascript

Writing JavaScript client code has long had a reputation for being difficult, even though the

language itself is quite simple. Because JavaScript is a dynamic, loosely typed programming

language — very different from the strong typing enforced by Visual Basic and C# — JavaScript’s

reputation is even worse in some .NET developer circles.

Thus, one of the most useful features of Visual

Studio for web developers is IntelliSense support

for JavaScript. You will notice the IntelliSense

beginning immediately as you start typing, with

prompts for native JavaScript functions and

keywords such as var, alert, and eval.

Furthermore, the JavaScript IntelliSense in

Visual Studio 2010 automatically evaluates

and infers variable types to provide more

accurate IntelliSense prompts. For example,

in Figure 20-36 you can see that IntelliSense

has determined that optSelected is an

HTML object, because a call to the document

.getElementByID function will return that type.

In addition to displaying IntelliSense within

web forms, Visual Studio also supports

IntelliSense in external JavaScript files. It also provides IntelliSense help for referenced script files

and libraries, such as the Microsoft AJAX library.

Microsoft has extended the XML commenting system in Visual Studio to recognize comments on

JavaScript functions. IntelliSense detects these XML code comments and displays the summary,

parameters, and return type information for the function.

A couple of limitations could prevent the JavaScript IntelliSense from displaying information in

certain circumstances, including:

.

A syntax or other error in an external referenced script file.

.

Invoking a browser-specific function or object. Most web browsers provide a set of objects

that is proprietary to that browser. You can still use these objects, and in fact many popular

JavaScript frameworks do; however, you won’t get IntelliSense support for them.

.

Referencing files that are outside the current project.

fiGure 20-36

rich Client-side Development .

427

Visual Studio constantly monitors changes to files in the project and updates the IntelliSense as they

happen. If for some reason you find that Visual Studio isn’t displaying the latest information, you

can force it to update the IntelliSense by selecting Edit . IntelliSense . Update JScript IntelliSense.

One new feature in the latest version of ASP.NET is the ClientIDMode property that has been

added to web server controls. In previous versions, the value that was generated for the id attribute

on generated HTML controls made it difficult to reference these controls in JavaScript. The

ClientIDMode property fixes this by defining two new modes (Static and Predictable) for

generating these ids in a simpler and more predictable way.

The updated JavaScript IntelliSense support, combined with the improved client-side debugging and

better control over client IDs, significantly reduces the difficulty of developing JavaScript code with

Visual Studio 2010.

working with asP net aJax

The ASP.NET AJAX framework provides web developers with a familiar server-control

programming approach for building rich client-side AJAX interactions.

ASP.NET AJAX includes both server-side and client-side components. A set of server controls,

including the popular UpdatePanel and UpdateProgess controls, can be added to web forms to

enable asynchronous partial-page updates without your needing to make changes to any existing

code on the page. The client-side Microsoft AJAX Library is a JavaScript framework that can be

used in any web application, such as PHP on Apache, and not just ASP.NET or IIS.

The following walkthrough demonstrates how to enhance an existing web page by adding the

ASP.NET AJAX UpdatePanel control to perform a partial-page update. In this scenario we have

a very simple web form with a DropDownList server control, which has an AutoPostBack to the

server enabled. The web form handles the DropDownList.SelectedIndexChanged event and saves

the value that was selected in the DropDownList to a TextBox server control on the page. The code