Date post: | 05-Dec-2014 |
Category: |
Documents |
Upload: | goodfriday |
View: | 2,453 times |
Download: | 0 times |
Real-World Ajax with ASP.NETNikhil KothariSoftware ArchitectMicrosoft Corporation
Session Overview
Quick overview of ASP.NET AjaxAjax deep-dive
Cover some key real-world problemsDiscuss solutions, patterns, opportunitiesLots of demosAnd more of ASP.NET Ajax
ASP.NET Ajax Overview
Partial renderingUpdate a portion of the page without writing any script
Ajax Control ToolkitOpen source project at http://www.codeplex.com/AtlasControlToolkitLots of Ajax-enabled server controls
Web servicesExposing web services as JSON servicesSuper simple access via script proxies and networking stack
Script Framework (MicrosoftAjax.js)Type system, and general framework for creating Ajax apps
Simple Ajax with ASP.NETPartial RenderingWeb ServicesControl Toolkit
demo
Ajax in the Real World
Ajax has become mainstreamUsers have come to expect itHowever, subtle use of Ajax is usually effectiveDon’t have to go overboard with flashy apps
It is about creating better user experiences
Fluid user interface matching user task flowsRich data visualizationIntuitive data entry
It is not just about updating page contents by issuing xmlhttp requests
Ajax Challenges
Script complexityIndexability and SEONavigation and bookmarkabilityIncreasing user expectationsDiagnostics/Tracing/MonitoringPerformanceAccessibilityBrowser API inconsistencies…
Script Complexity
Increasing complexity with increased Ajax features
Use appropriate framework featuresScript components, encapsulation of logicOOPSeparation of content, presentation, and logic
Partial rendering in ASP.NETBehaviors in ASP.NET Ajax
Re-use and encapsulation mechanismRepresent script logic that you attach to markupUsable in a variety of scenariosEnable better designer/developer workflow
Tackling Script ComplexityCreating and Using Behaviors
demo
Navigation and Bookmarkability
Ajax updates don’t affect the browser history
Breaks the back buttonMight also break bookmarkability
It is an opportunity!You have a clean slateAdd your own history points to create a better navigation model than regular post-backs
ASP.NET Ajax History FeatureVery simple API to abstract browser “nuances”Call addHistoryState()Handle the navigated event to detect state changesUpdates URL fragment to also provide bookmarkability
Restoring Navigation and BookmarkabilityLogical History
demo
Ajax and Indexability
Preserving indexability is a must for most sites
Relies on presence of static data within pagesAjax apps often fetch data dynamicallyApp structure and logic isn’t useful for searching
An alternate Ajax patternEmbed data statically within the pageMake every page of data independently discoverable via sitemapsScript consumes data and creates interactive presentationScript uses xmlhttp to implement paging as well
Preserving Indexability
Embedding Data in the PageSitemaps
demo
Search Engine View
<div id=“photoList”> <div> <h1 class=“title”>…</h1> <img class=“photo” src=“…” alt=“…” /> </div> </div><div id=“mapFrame” />
Indexability through HTML Data
<script>document.write(‘<div style=“display: none”>’);</script> <div id=“photoList”> <div> <h1 class=“title”>…</h1> <img class=“photo” src=“…” alt=“…” /> </div> </div><script>document.write(‘</div>’);</script><div id=“mapFrame” /><script> // Script to create map</script>
Script-enabled Browser View
<div style=“display: none”> <div id=“photoList”> … </div></div><div id=“mapFrame” /><script> // Script to create map</script>
Leveraging New Capabilities
Increasing user expectations for functionality
Ability to work with local filesExpectations around faster applicationsDeeply integrating media experiences
Using islands of SilverlightCan be used incrementally to light up existing Ajax appsBalancing reach and capabilitiesNew capabilities to your application
CLR-based execution, threads for background workAccess to local storage and filesVector graphics, media
Going Beyond Ajax
Lighting up your Ajax Application with Silverlight 2
demo
Resources
ASP.NET Ajaxhttp://ajax.asp.netDocs, how-to videos, forums etc.
Ajax Control Toolkithttp://www.codeplex.com/AtlasControlToolkit
My Bloghttp://www.nikhilk.netSlides + SamplesMy Contact Form
Summary
Prioritize creating better user experiences
Think about where to apply Ajax in your applications
Approach Ajax systematicallySeparate content and behavior
Apply established patterns for addressing key Ajax challengesLeverage ASP.NET Ajax
Solutions and framework for creating real-world Ajax apps
© 2008 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries.
The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after
the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.
Error Logging and Diagnostics
Ajax apps have a lot more happening on the clientTracking script execution in production
Handling errors internally and logging themEnd-user shouldn’t ever see script errorsOther tracing and tracking scenarios
Error Logging
Handling Errors and Reporting
demo
Performance
Broad discussion topic with several facets
Script downloading/bandwidth consumptionScript execution timePerception – get some rendering quick…
ScriptManager.LoadScriptsBeforeUIOne upcoming ASP.NET Feature:
Script combiningReduces the number of script downloads per page
Performance
Script Combining
demo