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