Real World ASP.NET AJAX

Real World ASP.NET AJAX

Donald Hoimason Incorporated

[email protected]

Scott HowlettMicrosoft Regional [email protected]

Where Are We?

What's New for Web Developers in ASP.NET and Visual

Studio 2008


An Overview of Microsoft Silverlight

Developing ASP.NET AJAX Controls with

Silverlight

Agenda

OurFaves.com OverviewA Data-bound ScenarioArchitectureData-bound Scenario & DemoUpdate Panel & DemoUpdate Panel+ & DemoOther Microsoft AJAX framework ControlsMaking your own web service callsRendering controls with a web servicePutting it all together

OurFaves.com

Demonstration

OurFaves.com

Agenda


A Data-Bound Scenario

We want to show a list of items with associated dataEach “fave” list item contains the following:

TextHyperlinksPicturesASP.NET postback functionalityJavascript functionality

Example: Sounds like a job suited to a customized data-bound list – the ASP.NET Repeater

Agenda

OurFaves.com OverviewA Data-bound ScenarioArchitectureData-bound Scenario DemoUpdate Panel & DemoUpdate Panel+ & DemoOther Microsoft AJAX framework ControlsMaking your own web service callsRendering controls with a web servicePutting it all together

A Typical Data-bound ScenarioOverview of Architecture

3-Tier Model: Presentation Tier, Business Logic Tier and Data Tier1 Caveat: Extra Web services layer for AJAX, which will get into laterWe will only examine the Web Services and Presentation tiers

DatabasePresentationTier

Business LogicTier

Web ServicesTier

Agenda

OurFaves.com OverviewA Data-bound ScenarioArchitectureData-bound Scenario DemoUpdate Panel & DemoUpdate Panel+ & DemoOther Microsoft AJAX framework ControlsMaking your own web service callsRendering controls with a web servicePutting it all together

Demonstration

Repeater in a Data-bound Scenario

Agenda


Update Panel

The core control of the Microsoft Ajax FrameworkAllows for a partial page refresh – meaning only the sections of the page you specify will be refreshedHow it works: Queue up the demo!

Demonstration

UpdatePanel Control

Agenda


UpdatePanel ControlAdditional Features

Also allows for customizability in its behaviour and how partial postbacks are triggeredBy default, postbacks within an UpdatePanel trigger a partial page refreshTriggers outside the UpdatePanel may also fire the partial page refresh

Demonstration

UpdatePanel Control with Additional Features

Agenda


Other ASP.NET AJAX ControlsASP.NET Futures & Toolkit

Aside from the UpdatePanel control, which is contained in the base release, there are many controls available separately from the ASP.NET Futures and ASP.NET AJAX ToolkitThese include the AutoComplete, Calendar, and HoverMenu controlsYou can find these at ajax.asp.net

Agenda


Making Your Own Web Service Calls

In addition to the controls available out of the box, there is the capability to build your own AJAX functionalityThis is aided greatly by the AJAX framework, specifically the ScriptManager control, which enables you to call strongly-typed Web services from JavaScriptThis means there is no need to write your own code to handle the Web service call, it has nearly all been done for you

Making Your Own Web Service CallsWhy Make Your Own Calls?

Though the UpdatePanel and other controls, ASP.NET AJAX does offer a powerful way to make AJAX calls there are two main reasons to make your own calls:

1. There is some inherent performance overhead when using an UpdatePanel control as compared with a traditional AJAX callPerformance hit due to data passed in a normal ASP.NET postback such as viewstate is also passed in a partial page postback

2. Sometimes, the built-in controls do not have required functionality

Agenda


Controls and Web Services

Question: So how can you make a Web service call and continue to use your written controls?Scott Guthrie made a useful post in his blog to solve this exact problemThe code described in his post renders a control during the Web service call and returns HTML for the JavaScript to bind to your presentation elementCode can be found at his blog (weblogs.asp.net/scottgu)

Agenda


Demonstration

Viewmanager & AJAX without an UpdatePanel Control

Coming Up Next!

What’s New for Web Developers in ASP.NET and Visual

Studio 2008


An Overview of Microsoft Silverlight

Developing ASP.NET AJAX Controls with

Silverlight

Your Feedback Matters!

Your evaluation form will be delivered to you via email after the event (save paper!)The email will come from [email protected] who completes an evaluation is entered to win an Xbox 360Feedback will be used to improve the event for next year

Real World ASP.NET AJAX

Documents

Transcript of Real World ASP.NET AJAX