Ajax & ASP.NET 2


Published on

Intro to AJAX and ASP.NET installation and programming

Published in: Technology
  • good
    Are you sure you want to  Yes  No
    Your message goes here
  • Fioricet is often prescribed for tension headaches caused by contractions of the muscles in the neck and shoulder area. Buy now from http://www.fioricetsupply.com and make a deal for you.
    Are you sure you want to  Yes  No
    Your message goes here
  • gud one....
    Are you sure you want to  Yes  No
    Your message goes here
  • Very nice reference .Pplease proviedsome more concepts regarding Ajax applications
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide
  • Ajax & ASP.NET 2

    1. 1. Talal A. Alsubaie S audi F ood and D rugs A uthority IT Sector Programmer
    2. 3. What is AJAX? Talal Alsubaie, AJAX & ASP.net 2.0
    3. 4. What does AJAX stands for? <ul><li>A synchronous </li></ul><ul><li>J avaScript </li></ul><ul><li>A nd </li></ul><ul><li>X ML </li></ul>Talal Alsubaie, AJAX & ASP.net 2.0
    4. 5. What is AJAX ? <ul><li>AJAX is a development technique for creating interactive web applications. </li></ul><ul><li>The intent is to make web pages feel more responsive by exchanging small amounts of data with the server behind the scenes , so that the entire web page does not have to be reloaded each time the user requests a change. This is intended to increase the web page's interactivity , speed , and usability . </li></ul>Talal Alsubaie, AJAX & ASP.net 2.0
    5. 6. What is AJAX ? <ul><li>It is a technique NOT a technology. </li></ul><ul><li>Components: </li></ul><ul><ul><li>Cascading Style Sheets (CSS). </li></ul></ul><ul><ul><ul><li>Presenting information. </li></ul></ul></ul><ul><ul><li>Document Object Model (DOM). </li></ul></ul><ul><ul><ul><li>Dynamic display and interaction with information. </li></ul></ul></ul><ul><ul><li>XMLHttpRequest. </li></ul></ul><ul><ul><ul><li>Retrieving data asynchronously from the web server. </li></ul></ul></ul><ul><ul><li>JavaScript. </li></ul></ul><ul><ul><ul><li>Binding everything together. </li></ul></ul></ul>Talal Alsubaie, AJAX & ASP.net 2.0
    6. 7. How does it work? <ul><li>Classic Web Model </li></ul><ul><ul><li>Browser interacts directly with Web Server. </li></ul></ul><ul><ul><li>Each Request Causes Page Refresh. </li></ul></ul><ul><ul><li>Synchronous. </li></ul></ul><ul><ul><li>Refresh Looses Place on Page. </li></ul></ul>Talal Alsubaie, AJAX & ASP.net 2.0
    7. 8. How does it work? <ul><li>Ajax Application Model: </li></ul><ul><ul><li>Browser interacts with Ajax Engine. </li></ul></ul><ul><ul><li>Ajax Engine communicates with Web Server </li></ul></ul><ul><ul><li>Asynchronous </li></ul></ul><ul><ul><li>Page manipulated by Ajax Engine (no refresh) </li></ul></ul>Talal Alsubaie, AJAX & ASP.net 2.0
    8. 9. Who Uses AJAX? <ul><li>Google </li></ul><ul><ul><li>Maps, iGoogle & Gmail </li></ul></ul><ul><li>Yahoo! </li></ul><ul><ul><li>MyYahoo! & Yahoo!Mail (beta) </li></ul></ul><ul><li>And Many Others… </li></ul>Talal Alsubaie, AJAX & ASP.net 2.0
    9. 10. AJAX Concerns Talal Alsubaie, AJAX & ASP.net 2.0 <ul><li>Security </li></ul><ul><li>Browser Compatibility </li></ul><ul><li>Accessibility </li></ul><ul><li>The Back Button </li></ul><ul><li>What if JavaScript is Turned Off? </li></ul>
    10. 11. AJAX and the Back Button <ul><li>Huge usability issue. </li></ul><ul><li>Returning to the previous state may not be possible when a page is updated dynamically. </li></ul><ul><li>Difficult to bookmark on a particular page state. </li></ul>Talal Alsubaie, AJAX & ASP.net 2.0
    11. 13. AJAX Advantages: <ul><li>Increased Client Interaction </li></ul><ul><ul><li>Gives users more of the expected behavior of a client/server application rather than a classic web page </li></ul></ul><ul><ul><li>Performance –only a portion of the page is refreshed </li></ul></ul><ul><ul><li>Less bandwidth usage. </li></ul></ul><ul><li>Platform Independent ( sort of ) </li></ul><ul><ul><li>Uses the browser, but relies on JavaScript </li></ul></ul>Talal Alsubaie, AJAX & ASP.net 2.0
    12. 15. Installing Ajax <ul><li>Microsoft first presented AJAX as a project named “ATLAS”( beta ). </li></ul><ul><li>The official release has been presented as “ ASP.net AJAX .” </li></ul><ul><li>It only supports ASP.net 2.0. </li></ul><ul><li>There are some tools used to perform AJAX over ASP.net 1.0 and 1.1. </li></ul>Talal Alsubaie, AJAX & ASP.net 2.0
    13. 16. Installing Ajax <ul><li>Navigate to http://www.asp.net </li></ul><ul><li>Click on AJAX tab . </li></ul>Talal Alsubaie, AJAX & ASP.net 2.0
    14. 17. Installing Ajax <ul><li>Click on Downloads </li></ul>Talal Alsubaie, AJAX & ASP.net 2.0
    15. 18. Installing Ajax <ul><li>Click Download ASP.NET AJAX v1.0 </li></ul>Talal Alsubaie, AJAX & ASP.net 2.0
    16. 19. Installing Ajax <ul><li>Now save the file to you local disk, run the file, click next until you finish installation. </li></ul><ul><li>Click Finish Button at the end. </li></ul>Talal Alsubaie, AJAX & ASP.net 2.0
    17. 20. Installing Ajax <ul><li>Now go to visual Studio 2005. </li></ul><ul><li>Create a new Web Site. </li></ul><ul><li>You can see the ASP.NET AJAX-Enabled Web Site template. </li></ul>Talal Alsubaie, AJAX & ASP.net 2.0
    18. 21. Installing Ajax <ul><li>You can see in the Web Page the ScriptManager Component. </li></ul><ul><li>And there is an AJAX Extensions panel in the toolbox area. </li></ul><ul><li>Not that the ScriptManager must be included in every page that is using AJAX. </li></ul>Talal Alsubaie, AJAX & ASP.net 2.0
    19. 23. Developing in AJAX <ul><li>Open Visual Studio.NET 2005. </li></ul><ul><li>Select File -> New -> Website. </li></ul>Talal Alsubaie, AJAX & ASP.net 2.0
    20. 24. Developing in AJAX <ul><li>Select ASP.net AJAX-Enabled Website. </li></ul><ul><li>Click OK after selecting a name for your website and selecting your preferred .NET language. </li></ul><ul><li>On the “default.aspx” page, switch to Design mode as shown in figure below: </li></ul>Talal Alsubaie, AJAX & ASP.net 2.0
    21. 25. Developing in AJAX <ul><li>As we learned before, we must have only one ScriptManager in each page that is using AJAX. </li></ul><ul><li>We can put the ScriptManager in a master page and it will apply to all of its child pages. </li></ul><ul><li>Updates will occurs in the “ Updatepanel ” component. </li></ul><ul><li>A page can have more then one “ Updatepanel ”. </li></ul>Talal Alsubaie, AJAX & ASP.net 2.0
    22. 28. AJAX ASP.net Control Toolkit <ul><li>The ASP.NET AJAX Control Toolkit is a shared-source community project consisting of samples and components that make it easier to work with AJAX-enabled controls and extenders. </li></ul><ul><li>The Control Toolkit provides both ready-to-run samples and a powerful SDK to simplify creating custom ASP.NET AJAX controls and extenders. </li></ul><ul><li>Make sure you install ASP.NET AJAX 1.0 first! </li></ul>Talal Alsubaie, AJAX & ASP.net 2.0
    23. 30. Installing AJAX ASP.net Control Toolkit Talal Alsubaie, AJAX & ASP.net 2.0 <ul><li>Navigate to http://www.asp.net </li></ul><ul><li>Click on AJAX tab . </li></ul>Talal Alsubaie, AJAX & ASP.net 2.0
    24. 31. Installing AJAX ASP.net Control Toolkit <ul><li>Click on Downloads </li></ul>Talal Alsubaie, AJAX & ASP.net 2.0
    25. 32. Installing AJAX ASP.net Control Toolkit <ul><li>Click “ Download the Control Toolkit.” </li></ul>Talal Alsubaie, AJAX & ASP.net 2.0
    26. 33. Installing AJAX ASP.net Control Toolkit <ul><li>It will take you to the CodePlex site, that is Microsoft open source tools. </li></ul><ul><li>Click on download with no source code. </li></ul><ul><li>Click on the I Agree Button. </li></ul>Talal Alsubaie, AJAX & ASP.net 2.0
    27. 34. Installing AJAX ASP.net Control Toolkit <ul><li>Download the “ AjaxControlToolkit-NoSource.zip” file. </li></ul><ul><li>Unzip the file to this location: </li></ul><ul><ul><ul><ul><li>“ C:Program FilesMicrosoft ASP.NET ” </li></ul></ul></ul></ul><ul><li>Open Visual Studio.net 2005, Create a new AJAX-Enabled Website. </li></ul><ul><li>Under the “AJAX Extensions” tab right click and select Add tab , and enter it name as “AJAX Toolkit”. </li></ul><ul><li>Right click the “AJAX Toolkit” tab and select “Choose Items…” </li></ul><ul><li>Under the “.NET Framework Component” click “Brows…”. </li></ul><ul><li>Select the file “AjaxControlToolkit.dll” located in: </li></ul><ul><li>“ C:Program FilesMicrosoft ASP.NETAjaxControlToolkit-NoSourceSampleWebSiteBin ” </li></ul><ul><li>Click OK. </li></ul>Talal Alsubaie, AJAX & ASP.net 2.0
    28. 35. Installing AJAX ASP.net Control Toolkit <ul><li>You can see that there are new controls in the “AJAX Toolkit” tab. </li></ul><ul><li>You can find more information about AJAX </li></ul><ul><li>Toolkit at: </li></ul><ul><li> http://ajax.asp.net/downloads/ </li></ul>Talal Alsubaie, AJAX & ASP.net 2.0