Introduction to ASP.NET AJAX U2U Training Services 1

Uploaded on


  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads


Total Views
On Slideshare
From Embeds
Number of Embeds



Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

    No notes for slide


  • 1. Introduction to ASP.NET AJAX Module outline • What people want • History of ASP.NET • Introducing AJAX Programming ASP.NET AJAX • Introducing ASP.NET AJAX Introduction © 2000-2006 U2U Belgium - © 2000-2006 U2U Belgium - What people want ASP.NET • Web development technology to build dynamic websites • Part of the .NET framework • Solves disadvantages of ASP Initial Web Page Request (WebPage.aspx) • Better user experiences make better applications – Higher user traffic and retention Full Post Backs – Greater differentiation ` – Higher user productivity Client (Web Browser) Web Server © 2000-2006 U2U Belgium - © 2000-2006 U2U Belgium - Introducing AJAX Introducing AJAX • AJAX == Asynchronous JavaScript and XML • A web development technique to create interactive web applications • AJAX is really about improving user experience • AJAX enables better web user experiences – More responsive to user input – Naturally interactive – Richly personalized for each user © 2000-2006 U2U Belgium - © 2000-2006 U2U Belgium - U2U Training Services 1
  • 2. Introduction to ASP.NET AJAX AJAX Advantages AJAX Behind the scenes • Asynchronous – No more annoying postbacks Initial Web Page Request – Work while waiting for reply from the server (WebPage.aspx) • Minimal data transfer – Just a part of the page is send to the server Async Requests • Limited processing on the server Invisible To The User – Because of the limited data ` • Context – No more scrolling after postbacks Client (Web Browser) Web Server © 2000-2006 U2U Belgium - © 2000-2006 U2U Belgium - Technologies used in AJAX Technologies used in AJAX • JavaScript Web Browser Web Server • Document Object Model (DOM) CSS – Defines structure of a web page as a set of accessable objects – DOM is used to redraw portions of the page JavaScript • Cascading style sheets – Defines visual appearance Document Object • XMLHttpRequest Model – Client side script performing request XMLHttpRequest © 2000-2006 U2U Belgium - © 2000-2006 U2U Belgium - ASP.NET AJAX What’s in ASP.NET AJAX A Framework for building Richer, more Browser Clients Web Server Interactive, Standards-based Web Experiences Microsoft AJAX Library PHP, ColdFusion, etc. • Fully cross-platform, cross browser IE • High productivity AJAX application development UI effects and behaviors ASP.NET AJAX Extensions • Client script framework for easy script creation and Firefox Component and UI model Web Services Integration reuse • End-to-end programming model for browser and Safari Networking Web Services Bridge server Base class library Membership, Roles & • Rich tool experience integrated with visual studio Opera Personalization Support • Works with ASP.NET pages and server controls Core runtime ASP.NET Server Controls • Allows access to ASP.NET web services and components © 2000-2006 U2U Belgium - © 2000-2006 U2U Belgium - U2U Training Services 2
  • 3. Introduction to ASP.NET AJAX XmlHttpRequest XmlHttpRequest Allows Script code to send HTTP • In Internet Explorer 6.0 Requests and handle the HTTP – Used as a COM object Response – Microsoft.XmlHttp – Requires permission to • Heart of asynchronous operations related to AJAX run in a browser • Introduced in Internet Explorer 5 by Microsoft – 1998 – Now Implemented by most modern browsers • Full access to XMLHTTP protocol – Package data as xml – Send it via the network to an endpoint var xmlHttpObject = new ActiveXObject("Microsoft.XmlHttp"); © 2000-2006 U2U Belgium - © 2000-2006 U2U Belgium - XmlHttpRequest ScriptManagerProxy • In Internet Explorer 7 and the other browsers • Only 1 ScriptManager per page – Part of browsers object model – Don’t need to change security settings xmlHttpObject = new XMLHttpRequest(); • Possible Solution: – Place the ScriptManager on a masterpage – All scripts and services will be loaded on all pages • Solution = ScriptManagerProxy © 2000-2006 U2U Belgium - © 2000-2006 U2U Belgium - How to use it UpdatePanel • Create MasterPage and place the • The most famous AJAX server control ScriptManager on top of the page • Replaces need for page to refresh during • Add a ScriptManagerProxyClass to the postback subpages • And it is so EASY to use: • Code your applications as you would do – Include the form elements that you want to normally partially refresh: Some non-updatable content and controls... <asp:UpdatePanel id=“u1” runat=“server”> <ContentTemplate> This content can be dynamically updated! <asp:label id="Lablel1” runat=“server”/> <asp:button id=“button1” text=“Push Me!” runat=“server”/> <ContentTemplate> </asp:UpdatePanel> More non-updatable content and controls... © 2000-2006 U2U Belgium - © 2000-2006 U2U Belgium - U2U Training Services 3
  • 4. Introduction to ASP.NET AJAX UpdatePanel UpdatePanel Options • Update Mode: – Determines under what conditions contents is rendered – By default set to always, which means that content is rendered with every postback – Conditional means that content is rendered when postback occurs by one of the childeren or a trigger © 2000-2006 U2U Belgium - © 2000-2006 U2U Belgium - Update Panel Options AJAX enabled webparts • Render modes • Use UpdatePanel control in web part – Determines which html tag is used when initial • Apply javascript fix rendering occurs • Render mode BLOCK – Content is rendered in a DIV • Render mode INLINE – Content is rendered in a span © 2000-2006 U2U Belgium - © 2000-2006 U2U Belgium - 23 DEMO Document searcher © 2000-2006 U2U Belgium - U2U Training Services 4