ajax patterns with asp.net
DESCRIPTION
This session takes a deeper look at the AJAX paradigm by discussing key development patterns. It demonstrates implementing them using a combination of out-of-the-box features and as well as features built by leveraging the extensibility of the platform. Patterns covered range from fundamentals such as networking, search optimization, navigation, and unobtrusive script attachment to user interface usability techniques such as visual notifications, and customization. The demonstrations are illustrated in the context of a simple scenario, but are designed to be applied directly to real-world applications.TRANSCRIPT
AJAX Patterns with ASP.NET
Nikhil KothariSoftware ArchitectMicrosoft Corporation
Session Overview
Look at Ajax scenarios beyond the basicsRun through a sequence of patterns and solutions
Solve real-world problemsCreate better user experiences
Demonstrate how ASP.NET enables these scenarios
Patterns
From Wikipedia…Design pattern: General repeatable solution to commonly occurring problem in software design.
Various categories of patternsFoundational patterns
Separation of code and behavior, data access, searchability
User experience patternsNotifications, intuitive navigation, …
Photo Gallery
Patterns at Play…
demo
Patterns Identified
Script attachment to enable interactivity (eg. accordion)Logical navigation to provide optimal back/forward behavior and bookmarkabilityUpdate indicators and gestures to provide feedback in dynamic user interfacesSmart data access to enable rich visualization and indexabilityMashing up to enhance application content
Attaching Script Functionality
- Separation of content and behavior- Enhancing semantic markup with script
demo
Attaching Script Functionality
Attaching script functionality to static contentSeparation of content (HTML+CSS) and behavior (Script)
Include scripts as referenced files and attach event handlers dynamically
BenefitsFacilitate designer/developer workflow
Independently work on content and functionality at the same time
More likely to work in script-disabled environments
ASP.NET AJAX offeringClient-side behaviors and controls are first class concept
Class pattern for script to enable encapsulating data and logic
ExtenderControl allows extending existing UI controls on server
Logical Navigation
- Controlling or “fixing” the back button- Adding support for bookmarking
demo
Logical Navigation
Implement logical views and associated back/forward navigation
Define logical views
Be selective about which views and user interaction end up in history
BenefitsUser model is preserved – back takes user to previous view
Back through form entry can be prevented
Different views of the page can be bookmarked
AJAX actually enables a better navigation model
ASP.NET AJAX offeringHistory server control and client-side API
API supports multiple parts of the page participating in history
Update Indicators
- User gestures and feedback for dynamic UI
demo
Update Indicators
Use UI gestures to indicate changes and updates to pages as a result of user actions
Highlighting, scrolling, focus, progress, …
Be subtle, use simple animations, don't be annoying
BenefitsAbility to guide user
Add additional pizzaz to your application
AJAX can actually enable a better UI model for dynamic UI
ASP.NET AJAX offeringUpdateAnimation control in Ajax Control Toolkit
UpateIndicator prototype control
Smart Data Access
Data access in Ajax applications without sacrificing indexability
demo
Smart Data AccessAccessing data in an Ajax application without sacrificing indexability
Don't send empty pages
Embed initial data in page as semantically correct markup
Client-side script might completely alter the visualization to create a rich experience
Include additional pages of data in sitemap
BenefitsUse of semantic markup aids indexability
Works well with script-disabled environments
Saves initial Ajax request for data
ASP.NET Ajax offeringEnables leveraging the server programming model
Data controls infrastructure
Mashups
- Enhancing content with external content- Accessing services using JSONP and server proxies
demo
Mashups
Lots of interesting scenarios for integrating servicesOne is content enhancement
Typically mashups are written using server-side proxiesRequire cross-domain calls
Enables use of configuration (eg. for API key), local caching, throttling calls
JSONP enables use of services directly from the clientService needs to support it
Uses script tags to enable cross-domain calls
Implied trust in service API and service provider
ASP.NET AJAX networking stack allows plugging in JSONPScriptExecutor instead of default XMLHttpExecutor
More Patterns
There are many more interesting and relevant patterns
Richer PluginDiagnostics…
Patterns on the Webhttp://ajaxpatterns.orgYahoo! Design Patterns site: http://developer.yahoo.com/ypatterns
Related Talks
DEV08 – Go Deep with AJAXDEV19 – High-Speed Development with the AJAX Control ToolkitBD007 – Search Capabilities for ASP.NET Web ContentDEV05 – Developing ASP.NET AJAX Controls with Silverlight
Resources
ASP.NET AJAX sitehttp://ajax.asp.net - Download bits, read docs/quickstarts, watch how-to videos, participate in forums and community
Just released: ASP.NET Futures CTP
ASP.NET AJAX Control Toolkithttp://www.codeplex.com/AtlasControlToolkit - Open source community project, 30+ controls
Blogshttp://www.nikhilk.net
http://weblogs.asp.net/scottgu
http://weblogs.asp.net/bleroy
http://weblogs.asp.net/elipton
Summary and Call to Action
Think about the set of problems at the app infrastructure and user experience
How can Ajax help improve and differentiate?Patterns provide terminology to talk about these problems and solutions
Check out ASP.NET AJAXExtensible platform for building and scaling to broad range of applicationsASP.NET AJAX Control Toolkit has a number of out-of-box controls to get you started
Please fill out your eval
evaluation
Discussion, Q&A…
© 2007 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.
Abstract
This session takes a deeper look at the AJAX paradigm by discussing key development patterns. It demonstrates implementing them using a combination of out-of-the-box features and as well as features built by leveraging the extensibility of the platform. Patterns covered range from fundamentals such as networking, search optimization, navigation, and unobtrusive script attachment to user interface usability techniques such as visual notifications, and customization. The demonstrations are illustrated in the context of a simple scenario, but are designed to be applied directly to real-world applications.