Microsoft ASP Net 3.5 Step By Step (phần 19) ppt

512 Part V Services, AJAX, Deployment, and Silverlight A Modal Pop-up Dialog-Style Component Another interesting feature provided by AJAX making Web applications appear more like deskt

Chapter 22 AJAX 511

14 Run the page As you type originator names into the TextBox, you should see a

drop-down list appear containing candidate names based on the QuotesCollection’s contents

The AutoComplete Extender is an excellent example of the sort of things at which ASP.NET’s

AJAX support excels Microsoft Internet Explorer has had its own autocomplete feature built into it for quite a while Microsoft Internet Explorer remembers often-used names of HTML input text tags and recent values that have been used for them For example, when you go online to buy an airline ticket at some point and go back to buy another one later, watch what happens as you type in your address You’ll very often see Microsoft Internet Explorer’s autocomplete feature show a drop-down list box below the address text box showing the last few addresses you’ve typed that begin with the text showing in the text box

The ASP.NET AutoComplete Extender works very much like this However, the major

differ-ence is that the end user sees input candidates generated by the Web site rather than simply

a history of recent entries Of course, the Web site could mimic this functionality by tracking

a user’s profi le identity and store a history of what a particular user has typed in to a specifi c input fi eld on a page The actual process of generating autocomplete candidates is com-pletely up to the Web server, giving a whole new level of power and fl exibility to program-ming user-friendly Web sites

512 Part V Services, AJAX, Deployment, and Silverlight

A Modal Pop-up Dialog-Style Component

Another interesting feature provided by AJAX making Web applications appear more like desktop applications is the ModalPopup Extender Historically, navigating a Web site involves

walking down into the hierarchy of a Web site and climbing back out When a user provides inputs as he or she works with a page, the only means available to give feedback about the quality of the data has been through the validation controls In addition, standard Web pag-

es have no facility to focus the users’ attention while they type in the information

The traditional desktop application usually employs modal dialog boxes to focus user tion when gathering important information from the end user The model is very simple and elegant—the end user is presented with a situation in which he or she must enter some data and Click OK or Cancel before moving on After dismissing the dialog, the end user sees exactly the same screen he or she saw right before the dialog appeared There’s no ambigu-ity and no involved process where the end user walks up and down some arbitrary page hierarchy

This example shows how to use the pop-up dialog extender control You’ll create a page with some standard content and then have a modal dialog-style pop-up show right before sub-mitting the page

Using a ModalPopup extender

1 Add a new page to AJAXORama to host the pop-up extender Call it

UseModalPopupExtender

2 As with all the other examples using AJAX controls, pick up a ScriptManager from the

toolbox and add it to the page

3 Add a title to the page (the example here uses “ASP.NET Code of Content”) Give the

banner some prominence by surrounding it in <h1> and </h1> tags

4 Pick up a Panel from the toolbox and add it to the page It will hold the page’s

nor-mal content

5 Add a Button to the Panel for submitting the content Give the Button the ID

ButtonSubmit and the text Submit and create a button Click event handler You’ll

need this button later

6 Place some content on the panel The content in this sample application uses several

check boxes that the modal dialog pop-up will examine before the page is submitted

<h1 >ASP.NET Code Of Conduct </h1>

<asp:Panel ID="Panel1" runat="server"

style="z-index: 1;left: 10px;top: 70px;

position: absolute;height: 213px;width: 724px;

margin-bottom: 0px;">

<input type="checkbox" name="Check" id="Checkbox1"/>

<label for="Check1">Use Forms Authentication</label>

<br />

<input type="checkbox" name="Check" id="Checkbox2"/>

<label for="Check2">Separate UI From Code</label>

<br />

<input type="checkbox" name="Check" id="Checkbox3"/>

<label for="Check3">Take Advantage of Custom Controls</label>

<br />

<input type="checkbox" name="Check" id="Checkbox4"/>

<label for="Check4">Give AJAX a try</label>

7 Add another Panel to the page to represent the pop-up Give this Panel a light yellow

background color so that you’ll be able to see it when it comes up It should also have the ID PanelModalPopup

8 Add some content to the new Panel that’s going to serve as the modal pop-up At the

very least, the popup should have OK and Cancel buttons Give the OK and Cancel

buttons the ID values ButtonOK and ButtonCancel You’ll need them a bit later

<asp:Panel ID="PanelModalPopup" runat="server"

514 Part V Services, AJAX, Deployment, and Silverlight

9 Add a script block to the ASPX fi le You’ll need to do this by hand Write functions to

handle the OK and Cancel buttons The example here examines check boxes to see

which ones have been checked and then displays an alert to show which features have been chosen The Cancel handler simply displays an alert saying the Cancel button

10 Pick up the ModalPopup Extender from the toolbox and add it to the page

11 Add the following markup to the page This will set various properties on the new

ModalPopup Extender It will set the OkControIID property to ButtonOK and it will

set the CancelControlID property to ButtonCancel It will also set the OnCancelScript

property to onCancel() (the client-side Cancel script handler you just wrote) Set

Chapter 22 AJAX 515

OnOkScript=”onOk()” (the client-side OK script handler you just wrote) Finally, the

fol-lowing markup will set the TargetControlID property to be ButtonSubmit

12 Run the page When you click the Submit button, the Panel designated to be the modal

popup window will be activated (remember, the Submit button is the TargetControlID

of the ModalPopup Extender) When you dismiss the popup using OK or Cancel, you

should see the client-side scripts being executed The following graphic image shows the ModalPopup Extender displaying the modal pop-up panel

516 Part V Services, AJAX, Deployment, and Silverlight

In this chapter, we saw how to use ASP.NET’s new UpdatePanel to perform partial page

up-dates We also saw how the Timer produces regularly scheduled postbacks and is especially

useful in conjunction with the UpdatePanel We saw how the UpdateProgress control displays

progress information asynchronously In addition, we got to see how the AutoComplete

Extender will talk to a Web service to produce an effective “autocomplete” experience, and

we saw how the ModalPopup Extender allows you to show a Panel as though it were a modal

dialog box within a desktop application

Chapter 22 AJAX 517

If you feel the urge and have the gumption to look at the HTML and script produced by a page using ASP.NET AJAX controls, it’s very interesting You’ll also realize the power and convenience of ASP.NET’s AJAX support It’s better to have someone else have all that script code packaged within a server-side control than it is to have to write it all by hand

Chapter 22 Quick Reference

Enable a Web site for AJAX Normal Web sites generated by Visual Studio 2008’s

tem-plate are AJAX-enabled by default However, you must add a

ScriptManager to a page before using any of the AJAX

server-side controls.

Implement partial page updating in your

page

From within an ASP.NET project, select an UpdatePanel from

the toolbox Controls that you place in the UpdatePanel will

trigger updates for only that panel, leaving the rest of the page untouched.

Assign arbitrary triggers to an UpdatePanel

(that is, trigger partial page updates

us-ing controls and events not related to the

panel)

Modify an UpdatePanel’s trigger collection to include the new

events and controls Highlight the UpdatePanel from within the

Visual Studio designer Select the Triggers property from within

the property editor Assign triggers as appropriate.

Implement regularly timed automatic

posts from your page

Use the AJAX Timer control, which will cause a postback to the

server at regular intervals.

Use AJAX to apply special UI nuances to

your Web page

After installing Visual Studio 2008, you can create AJAX-enabled sites, and use the new AJAX-specifi c server-side controls avail- able in the AJAX toolkit Select the control you need Most AJAX server-side controls may be programmed completely from the server However, some controls require a bit of JavaScript on the client end.

519

Chapter 23

ASP.NET and WPF Content

After completing this chapter, you will be able to

Understand the benefi ts of Windows Presentation Foundation (WPF) over traditional Windowing user interfaces

Add WPF-based content to your Web site

Understand where Silverlight fi ts into the picture of Web development

In Chapter 22, we looked at AJAX, which represents a major improvement to Web-based user interfaces (UIs) AJAX adds many elements to Web-based user interfaces that have only been available to desktop applications For example, AJAX’s AutoComplete extender allows users

typing text into a TextBox to select from options generated dynamically from a Web service

The ModalPopupExtender allows you to play content in a pane that behaves like a standard

Windows modal dialog box at run time

As rich as these new user interface additions are, there’s still room for even more AJAX still relies fundamentally on HTML, and although HTML includes a huge set of tags that render to standard user interface elements, they stop there WPF changes that WPF represents a new way to write user interfaces, and it turns standard Windows- and Web-based user interface programming on its head

What Is WPF?

Windows-based user interface programming is based on an architecture that has remained fundamentally unchanged for more than a quarter century Back in the early 1980s and through today, all applications have had the same basic underpinnings The main application runs a message loop, picking up Windows messages off of the message queue and deposit-ing them into a window handler Every window is responsible for rendering its own presenta-tion That’s every window—all the way from the top-level window of the application down to the most minor control on the window

Nearly all Windows applications you see today use the Win32 API at the lowest level—even Visual Basic 6.0 applications The classic Win32 API has worked well for a long time However, its design is beginning to show its age Because every window and control is responsible for its own rendering using the Win32 Graphics Device Interface—GDI, or the GDI+ interface

in the case of Windows Forms—we see fundamental user interface limitations that are built into the design of Windows The GDI and GDI+ interfaces have a huge array of functions However, it takes a lot of work to do much more than basic drawing and text rendering That

520 Part V Services, AJAX, Deployment, and Silverlight

is, special effects such as transformations, transparency, and video play integration are

dif-fi cult to accomplish using the current Windows graphics interface Windows does support a richer graphics-based interface named Direct X; however, using it is often beyond the scope

of most Windows applications and normally reserved for game programmers

The limitations of the classic Windows API have prompted Microsoft to develop a new gramming interface It’s called the Windows Presentation Foundation (WPF)

WPF makes programming special effects for a Windows applications (including presenting Web content—as we’ll see here) very approachable The WPF libraries comprise a number of classes that work together very much like the Windows Forms classes work together (on the surface, at least—underneath the goings-on are very different from Windows Forms) WPF represents a very rich programming interface for developing a user interface Here’s a short list of the kinds of features available through WPF (this is a broad summary and is not exhaustive):

User interface elements that may be modifi ed in all kinds of ways much more easily than can be done with Win32 and subclassing

Paths, shapes, and geometries for drawing two-dimensional presentations

Transforms (scale, translate, rotation, and skewing) that allow consistent and uniform modifi cations to all user interface elements

Ability to manage the opacity of individual elements

Built-in layout panels

Brushes—image, video, and drawing brushes for fi lling areas on the screen

Animations

WPF applications arrange the UI elements using layout panels Rather than relying on solute positioning (as is the case for Win32 applications) or fl ow layout (as is the case for ASP.NET pages), WPF introduces a number of layout options including:

Grid Elements are placed in a table

StackPanel Elements are stacked vertically or horizontally

Canvas Elements are positioned absolutely

DockPanel Elements are positioned against the sides of the host

WrapPanel Elements are repositioned to fi t when host is resized

The example we’ll see a bit later uses the Canvas

A typical WPF application is crafted from fi les in very much the same way as an ASP.NET plication A stand-alone WPF application includes a main application object (that runs the

ap-Chapter 23 ASP.NET and WPF Content 521

message loop) and one or more Windows (a browser-based WPF application is made up of Pages) WPF application components are typically composed from a markup fi le—just like ASP.

NET pages WPF layouts are defi ned using eXtensible Application Markup Language (XAML) XAML fi les describe a WPF layout’s logical tree—a collection of WPF user interface elements

A WPF application is made up of Common Language Runtime (CLR) classes underneath the façade of markup language—very like ASP.NET’s object model XAML fi les represent instruc-tions for constructing a logical tree of visual elements In the case of a stand-alone Windows application, the logical tree exists within a top-level window In the case of a browser-based application, the logical tree exists within a browser pane The following is a short XAML list-ing that displays “Hello World” within a button, hosted in a browser pane:

a string, the top-level WPF node can contain elaborate layouts using the different layout panels available in WPF We’ll see an example of that soon

How Does It Relate to the Web?

What does this all mean for Web applications? Microsoft Internet Explorer (as well as other browsers running on Windows) is based on the classic Windows architecture Browsers are responsible for rendering HTML using the graphic interface available to Windows—the Graphics Device Interface (GDI) Consequently, accomplishing special effects via browsers (and normal HTML) is just as diffi cult as with normal Windows programs

Web programming is based on submitting HTTP requests to a server, processing the quest, and sending the response back to the client In that sense, any user interface–specifi c responses are constrained to whatever can be expressed in HTML The Web is dynamic and HTML is basically a document technology

What if there were another markup language that provided more than just simple tags that could be interpreted by an HTML browser? Well, that’s what XAML is when used within the context of a Web application

522 Part V Services, AJAX, Deployment, and Silverlight

Remember the previous code snippet? Figure 23-1 shows how it appears in Internet Explorer when you load the XAML fi le into the browser (simply double-click the fi le name in Windows Explorer)

FIGURE 23-1 Button rendered as specifi ed by XAML

When adding WPF-based content directly to a Web site, you have three options: presenting the content through loose XAML fi les, creating an XAML-based Browser Application (XBAP),

or using Silverlight

Loose XAML Files

As you saw just a moment ago, if you place a properly formatted XAML fi le within your site and make it available through a Web server, any browser capable of using the XAML plug-in (such as Microsoft Internet Explorer) will pick it up and render it This is one option for pre-senting WPF-based content from a Web site This technique is useful for rendering semidyn-amic content—that is, for rendering anything expressible using pure XAML fi les

The WPF programming model marries XAML layout instructions with accompanying code modules—in very much the same way ASP.NET does Events generated from user interface

Chapter 23 ASP.NET and WPF Content 523

elements are handled within the accompanying code Deploying content as loose XAML fi les precludes adding event handlers and accompanying code

However, WPF elements are dynamic in the sense that they may be animated, and user terface elements may be tied together using only XAML That’s why WPF content expressed only through XAML is semidynamic You can hook up some interactive elements using only XAML, but there’s a limit For example, you may render a list of names of images in a list box and allow users to select an image to zoom all through XAML You may attach slider con-trols to user interface elements so the end user can change various aspects of the elements through the slider However, you may not implement event handlers for controls—that re-quires deploying a WPF application as an XBAP application

XBAP Applications

XBAPs represent another way to deploy WPF content over the Web They’re a bit more plex than loose XAML fi les In addition to expressing layout, XBAP supports accompanying executable code for each page When you deploy a WPF application over the Web, the client gets the WPF visual layout and the accompanying code downloaded to the client machine Events occurring within the XBAP application are handled on the client side

The upside of deploying an application as an XBAP application is that it works in very much the same way that a Windows desktop application works For example, the application can handle mouse-click movements and can respond to control events all at the client side Although XBAP applications are not related directly to ASP.NET, XBAP content may be hosted within ASP.NET-served pages in the same way that loose XAML content may be served That is, you may make redirects to XBAP fi les or host XBAP fi les from within <iframe> HTML elements

Visual Studio includes a Wizard for generating XBAP applications Using XBAP, you may present WPF content In addition, the user interface elements contained in the WPF con-tent can respond to events and messages the same way as any other desktop application When browsers surf to your XBAP application (which will ultimately be deployed via Internet Information Services—IIS), they will have a very desktop-like experience in terms of user in-terface rendering and responsiveness, even though the application is running in a browser

WPF Content and Web Applications

WPF content may be served up from an ASP.NET application in much the same way ASP.NET serves up other content You may include loose XAML fi les in a Web application, or you may host some specifi c WPF content within an <iframe> HTML element

524 Part V Services, AJAX, Deployment, and Silverlight

Add XAML content to a site

Here’s an exercise illustrating how WPF content may be used within an ASP.NET application

1 Create a new Web site project in Visual Studio Name the project XAMLORama Make it

a File System site

2 Use Visual Studio to add a new text fi le to the project Click the right mouse button on

the XAMLORama project node within Visual Studio and select Add New Item Select

a text fi le type from the templates

3 Rename the fi le so that it has an XAML extension This fi le will show a paper airplane

drawing, so name the fi le PaperAirplane.xaml

4 Add some XAML content to the fi le, starting by defi ning the top-level layout node

Include the following XML namespaces and make the window 750 units wide:

<Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Width="750">

</Page>

All WPF layouts begin with a top-level node In this case, the node is a Page so that it

will show up in the client’s browser

5 Add a Grid to the page, and add two row defi nitions and two column defi nitions

6 Now add WPF elements to the grid Add a Canvas to the upper left corner of the Grid,

and make the Background SkyBlue Add two Slider controls to the Grid, too The fi rst

Slider will control the X position of the airplane Name the Slider sliderX Put the slider

into row 1, and use the ColumnSpan to stretch the Slider across two columns The

maxi-mum value of this slider should be 500 The second Slider should be oriented vertically

and should occupy column 1 in the Grid Use the RowSpan to stretch the Slider across

both rows This slider will control the rotation of the airplane Name this Slider

sliderRotate Its maximum value should be 360

Chapter 23 ASP.NET and WPF Content 525

<Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Width="750">

<Grid

<! Grid column and row definitions are here >

<Canvas Background="SkyBlue" Grid.Row="0"

7 Now add the airplane and connect it to the sliders using XAML data binding Here’s

how Create the airplane drawing using a WPF Path The Path draws a series of line

seg-ments using a specifi c pen Make the Stroke Black and the StrokeThickness 3 The Path

data should connect the following points Move the cursor to 0,0 and then draw a line

to 250,50, and then to 200,75 to 0,0 Then move the cursor to 200,75 and draw a line to 190,115 and another line to 180,85 to 0,0 Then move the cursor to 180,85 and draw a line to 140,105 and then to 0,0 Finally, move the cursor to 190,115 and draw a line to 158,93 Set the Path’s relationship to the Top of the Canvas to be 200 Bind the Path’s

relationship to the Left of the Canvas to sliderX’s Value Finally, add a RenderTransform

to the Path and include a RotateTransform Bind the RotateTransform’s Angle to

sliderRotate’s Value Set the Path’s RenderTransformOrigin to 5, 5 Here’s the Path code:

<Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Width="750">

<Grid>

<! Grid column and row definitions are here >

<Canvas Background="SkyBlue" Grid.Row="0"