developing rich web applications with asp.net ajax
DESCRIPTION
TRANSCRIPT
Developing Rich Web Applications with ASP.NET AJAXDeveloping Rich Web Applications with ASP.NET AJAX
Kashif AlamKashif AlamProgram ManagerProgram ManagerMicrosoft CorporationMicrosoft Corporation
Session Objectives And Session Objectives And Key TakeawaysKey Takeaways
Session Objective: Session Objective: Introduction to "ASP.Net AJAX" framework for developersIntroduction to "ASP.Net AJAX" framework for developers
Key Takeaway:Key Takeaway:ASP.Net AJAX provides an evolution for the next ASP.Net AJAX provides an evolution for the next generation web applicationsgeneration web applications
““ASP.Net AJAXASP.Net AJAX””
A framework for building next generation, crossA framework for building next generation, cross--platform, browsing experiencesplatform, browsing experiences
Ubiquitous, crossUbiquitous, cross--platform,platform, browser supportbrowser supportHighly productive Highly productive framework for building AJAXframework for building AJAX--enabled web applicationsenabled web applicationsRich tool support for Rich tool support for designerdesigner and and developerdeveloper workflowworkflowNo costNo cost, free tool support, , free tool support, easyeasy to useto use
““ASP.Net AJAXASP.Net AJAX””
Web ServerWeb Server
IE
Firefox
Safari
BrowserBrowserClientsClients
ASP.Net AJAX Client ASP.Net AJAX Client JavaScript LibrariesJavaScript Libraries
PreviewGlitz.js
PreviewDragDrop.js
PreviewScript.js
MicrosoftAjaxWF.js
MicrosoftAjax.js
JSON Bridge Support
Mashup Bridge Support
Membership & Personalization Support
ASP.NET Server Control Integration
IIS & ASP.NETIIS & ASP.NET
Apache & PHPApache & PHP
Server Or Client Centric?Server Or Client Centric?
ServerServer--centric web sites and appscentric web sites and appsWork with existing server application model Work with existing server application model Keep core UI/application logic on serverKeep core UI/application logic on serverImprove latency, interactivity, personalizationImprove latency, interactivity, personalization
ClientClient--centric browser applicationscentric browser applicationsFully exploit DHTML in presentation tierFully exploit DHTML in presentation tierUse AJAX for data, services, compositionUse AJAX for data, services, compositionEnable new immersive experiencesEnable new immersive experiences
““ASP.Net AJAXASP.Net AJAX”” provides a great framework for provides a great framework for bothboth
““ASP.Net AJAXASP.Net AJAX”” Server ControlsServer Controls
Easily build rich experiences with ASP.NETEasily build rich experiences with ASP.NETApplication UI and core logic still runs on serverApplication UI and core logic still runs on serverAvoid need to master JavaScript and async programmingAvoid need to master JavaScript and async programming
Use AJAX techniques to reduce full roundtripsUse AJAX techniques to reduce full roundtripsEnable incremental page UI updates Enable incremental page UI updates Examples: data navigation and editing, form validation, auto Examples: data navigation and editing, form validation, auto refreshrefreshFall back for downFall back for down--level browserslevel browsers
Richer interactivity for existing ASP.NET controlsRicher interactivity for existing ASP.NET controlsEnrich the client UI experience of web applicationsEnrich the client UI experience of web applicationsExamples: autoExamples: auto--completion, dragcompletion, drag--andand--drop, tooltipsdrop, tooltips
““ASP.Net AJAXASP.Net AJAX”” Server ControlsServer ControlsReducing full roundtripsReducing full roundtrips
<asp:UpdatePanel> control<asp:UpdatePanel> controlEasily define Easily define ““updatableupdatable”” regions of a pageregions of a pageServer roundtrips become asynchronous Server roundtrips become asynchronous ““ASP.Net AJAXASP.Net AJAX”” handles all the infrastructurehandles all the infrastructure
<asp:UpdatePanel id=<asp:UpdatePanel id=““u1u1”” runat=runat=““serverserver””>><ContentTemplate><ContentTemplate>
<!<!---- This content can be dynamically updated! This content can be dynamically updated! -->>
<asp:Calendar id=<asp:Calendar id=““cal1cal1”” runat=runat=““serverserver””/>/><ContentTemplate><ContentTemplate>
</asp:UpdatePanel></asp:UpdatePanel>
““ASP.Net AJAXASP.Net AJAX”” Server ControlsServer ControlsAdding interactivityAdding interactivity
““ASP.Net AJAXASP.Net AJAX”” client behaviorsclient behaviorsReusable piece of interactive functionalityReusable piece of interactive functionalityAttach to HTML UI declaratively or in codeAttach to HTML UI declaratively or in codeExamples: Examples:
DragDrag--andand--dropdropTooltipsTooltipsPopupsPopupsAutoAuto--completecomplete
Easily extend or write your own in JavascriptEasily extend or write your own in Javascript
““ASP.Net AJAXASP.Net AJAX”” Server ControlsServer ControlsAdding interactivityAdding interactivity
““ASP.Net AJAXASP.Net AJAX”” control extenderscontrol extendersExtend ASP.NET controls with Extend ASP.NET controls with ““ASP.Net AJAXASP.Net AJAX”” behaviorsbehaviorsEncapsulate both client and server behaviorEncapsulate both client and server behaviorSame familiar programming model as ASP.NET server controlsSame familiar programming model as ASP.NET server controls
<asp:TextBox runat="server" ID="TextBox1" /><asp:TextBox runat="server" ID="TextBox1" /><asp:AutoCompleteExtender runat="server" ID="AC1<asp:AutoCompleteExtender runat="server" ID="AC1””
TargetControlID="TextBox1" TargetControlID="TextBox1" ServicePath="AutoComplete.asmxServicePath="AutoComplete.asmx““ServiceMethod="GetWords" Enabled="true" />ServiceMethod="GetWords" Enabled="true" />
</asp:AutoCompleteExtender></asp:AutoCompleteExtender>
Building Contact List appBuilding Contact List app
““ASP.Net AJAXASP.Net AJAX”” Server Controls Server Controls
ASP.NETASP.NET
Application Services
Application Application ServicesServices
Page Framework,
Server Controls
Page Page Framework,Framework,
Server ControlsServer Controls
“ASP.Net AJAX” Script Framework“ASP.Net AJAX” Script Framework
Client Application Services
Client lient Application Application ServicesServices
Component/UIFramework,
Controls
Component/UIComponent/UIFramework,Framework,
ControlsControls
BrowserBrowser
Presentation(HTML/CSS)
PresentationPresentation(HTML/CSS)(HTML/CSS)
Server ApplicationServer Application
PagesPagesPages
UI Behavior(Managed
Code)
UI BehaviorUI Behavior(Managed(Managed
Code)Code)
Input Data
Updated UI + Behavior
Initial Rendering(UI + Behavior)
““ASP.Net AJAXASP.Net AJAX”” Script FrameworkScript Framework
ScenariosScenariosMashMash--up and composite applications and sitesup and composite applications and sitesComponents and Gadgets (Live.com, Windows Sidebar)Components and Gadgets (Live.com, Windows Sidebar)
Powerful script frameworkPowerful script frameworkRich type system and class library for JavascriptRich type system and class library for JavascriptComponent model and UI frameworkComponent model and UI frameworkRich clientRich client--side data access and databindingside data access and databinding
Easily integrated with server application modelEasily integrated with server application modelEasily consume web services from browserEasily consume web services from browserScript access to ASP.NET application services Script access to ASP.NET application services ServerServer--side bridge to reuse 3rd party servicesside bridge to reuse 3rd party services
““ASP.Net AJAXASP.Net AJAX”” Script FrameworkScript FrameworkNetworkingNetworking
A networking stack for asynchronous A networking stack for asynchronous services services Easy access to serverEasy access to server--based servicesbased servicesIntegrated with ASP.NET application Integrated with ASP.NET application servicesservices
““ASP.Net AJAXASP.Net AJAX”” Script FrameworkScript FrameworkComponent and control modelComponent and control model
Enables rich encapsulation and reuseEnables rich encapsulation and reuseFor UI behaviorFor UI behaviorFor nonFor non--visual components visual components –– data, servicesdata, servicesRich clientRich client--side dataside data--binding and validationbinding and validation
Clean developer/designer workflowClean developer/designer workflowUI defined using standard XHTML and CSSUI defined using standard XHTML and CSSPage behavior defined and attached separatelyPage behavior defined and attached separately““ASP.Net AJAXASP.Net AJAX”” components and controls can be components and controls can be declared procedurally or declarativelydeclared procedurally or declaratively
““ASP.Net AJAXASP.Net AJAX”” Script FrameworkScript FrameworkComponent and control modelComponent and control model
Search for: <input id=Search for: <input id=““Query" type="text" />Query" type="text" /><div id="completionList"></div><div id="completionList"></div>................function doLoad() {function doLoad() {
var auto1 = new Web.UI.AutoCompleteBehavior();var auto1 = new Web.UI.AutoCompleteBehavior();auto1.set_completionList($("completionList"));auto1.set_completionList($("completionList"));auto1.set_serviceURL("AutoCompleteService.auto1.set_serviceURL("AutoCompleteService.asmxasmx");");auto1.set_serviceMethod("GetCompletionList");auto1.set_serviceMethod("GetCompletionList");auto1.set_completionSetCount(15); auto1.set_completionSetCount(15); auto1.set_completionInterval(500);auto1.set_completionInterval(500);
var var txt1txt1 = new = new Web.UI.TextBox(Web.UI.TextBox(document.getElementByIddocument.getElementById((‘‘QueryQuery')); ')); txt1txt1.get_behaviors().add(auto1);.get_behaviors().add(auto1);
txt1txt1.initialize(); .initialize(); auto1.initialize();auto1.initialize();
}}
““ASP.Net AJAXASP.Net AJAX”” Script FrameworkScript FrameworkComponent and control modelComponent and control model
Search for: <input id=Search for: <input id=““Query" type="text" />Query" type="text" /><div id="completionList"></div><div id="completionList"></div>................<script type="text/xml<script type="text/xml--script">script">
<page xmlns:script="http://schemas.microsoft.com/xml<page xmlns:script="http://schemas.microsoft.com/xml--script/2005">script/2005"><components><components>
<textBox id=<textBox id=““Query">Query"><behaviors><behaviors>
<autoComplete <autoComplete completionList="completionList" completionList="completionList" serviceURL="AutoCompleteService.asmx" serviceURL="AutoCompleteService.asmx" serviceMethod="GetWordList"serviceMethod="GetWordList"completionSetCount="15" completionSetCount="15"
completionInterval="500" />completionInterval="500" /></behaviors></behaviors>
</textBox></textBox></components></components>
</page></page></script></script>
BrowserBrowser
Presentation(HTML/CSS)
PresentationPresentation(HTML/CSS)(HTML/CSS)
“Atlas”ServiceProxies
““AtlasAtlas””ServiceServiceProxiesProxies
UI Behavior(Script)
UI BehaviorUI Behavior(Script)(Script)
ASP.NETASP.NET
Application Services
Application Application ServicesServices
Page Framework,
Server Controls
Page Page Framework,Framework,
Server ControlsServer Controls
“ASP.Net AJAX” Script Fx“ASP.Net AJAX” Script Fx
Client Application Services
Client Client Application Application ServicesServices
Component/UIFramework,
Controls
Component/UIComponent/UIFramework,Framework,
ControlsControls
Server ApplicationServer Application
PagesPagesPages
UI Behavior(Managed
Code)
UI BehaviorUI Behavior(Managed(Managed
Code)Code)
““ASP.Net AJAXASP.Net AJAX”” Script FrameworkScript FrameworkClientClient--centric application modelcentric application model
Initial Rendering(UI + Behavior)
Data
Data
““ASP.Net AJAXASP.Net AJAX”” Script FrameworkScript FrameworkUsing the script library without ASP.NETUsing the script library without ASP.NET
Use Use ““ASP.Net AJAXASP.Net AJAX”” client script with any serverclient script with any serverGet the client script files from Program Files directory Get the client script files from Program Files directory after installationafter installation
What ASP.NET providesWhat ASP.NET providesGreat integration with serverGreat integration with server--centric UI and centric UI and programming modelprogramming modelBrowser detectionBrowser detectionAccess to rich set of application servicesAccess to rich set of application servicesWeb services, proxies, and bridgesWeb services, proxies, and bridges
Server Or Client Centric?Server Or Client Centric?
ServerServer--centric web sites and appscentric web sites and appsWork with existing server application model Work with existing server application model Keep core UI/application logic on serverKeep core UI/application logic on serverReduce latency, improve interactivity, personalizationReduce latency, improve interactivity, personalization
ClientClient--centric browser applicationscentric browser applicationsFully exploit DHTML in presentation tierFully exploit DHTML in presentation tierUse AJAX for data, services, compositionUse AJAX for data, services, compositionEnable new immersive experiencesEnable new immersive experiences
““ASP.Net AJAXASP.Net AJAX”” provides a great framework for provides a great framework for bothboth
How Do I Get Started?How Do I Get Started?
““ASP.Net AJAXASP.Net AJAX”” 1.0 & Futures CTP1.0 & Futures CTPASP.Net AJAX 1.0 available online now.ASP.Net AJAX 1.0 available online now.Preview updated on 1Preview updated on 1--2 month basis2 month basisInstalls on Visual Web Developer 2005 and ASP.NET 2.0Installs on Visual Web Developer 2005 and ASP.NET 2.0
Community site: Community site: http://ajax.asp.nethttp://ajax.asp.netDownload the latest bitsDownload the latest bitsASP.Net AJAX Control ToolkitASP.Net AJAX Control ToolkitTutorials, samples, forums, resourcesTutorials, samples, forums, resources
BlogsBlogshttp://weblogs.asp.net/scottguhttp://weblogs.asp.net/scottguhttp://www.nikhilk.nethttp://www.nikhilk.nethttp://weblogs.asp.net/bleroyhttp://weblogs.asp.net/bleroy http://blogs.msdn.com/kashifhttp://blogs.msdn.com/kashif
We want your feedback!We want your [email protected]@Microsoft.com
QuestionsQuestions
Thank You!Thank You!
©© 2003 Microsoft Corporation. All rights reserved. This presentat2003 Microsoft Corporation. All rights reserved. This presentation is for informational purposes only.ion is for informational purposes only.MICROSOFT MAKES NO WARRANTIES, EXPRESS OR IMPLIED, IN THIS SUMMAMICROSOFT MAKES NO WARRANTIES, EXPRESS OR IMPLIED, IN THIS SUMMARY.RY.