Post on 09-Feb-2016
description
transcript
Real World ASP.NET AJAX
Donald Hoimason Incorporated
donald.ho@imason.com
Scott HowlettMicrosoft Regional Directorscott.howlett@imason.com
Where Are We?
What's New for Web Developers in ASP.NET and Visual
Studio 2008
Real World ASP.NET AJAX
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
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 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
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
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
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
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
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
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
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
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
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
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
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
Viewmanager & AJAX without an UpdatePanel Control
Coming Up Next!
What’s New for Web Developers in ASP.NET and Visual
Studio 2008
Real World ASP.NET AJAX
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 wwevents@microsoft.comEveryone who completes an evaluation is entered to win an Xbox 360Feedback will be used to improve the event for next year