• Save
Ajax and ASP.NET AJAX
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

Ajax and ASP.NET AJAX

on

  • 1,455 views

 

Statistics

Views

Total Views
1,455
Views on SlideShare
1,452
Embed Views
3

Actions

Likes
0
Downloads
0
Comments
0

1 Embed 3

http://snip.ly 3

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • The Document Object Model (DOM) is the model that describes how all elements in an HTML page, like input fields, images, paragraphs etc., are related to the topmost structure: the document itself. By calling the element by its proper DOM name, we can influence it.
  • AddJSCode page
  • Synchronous request
  • Must be executed before any further interaction with the XMLHttpRequest Object
  • XMLHttpRequestObject.responseText or responseXML
  • Ajaxlib.jsData.txtDefault.aspxTry requestingaspx page
  • XMLHttpRequestObject.responseText or responseXML
  • CustomerDetailsUsingAJAX-ASHX.aspxCustomerDetail.ashx
  • thisControl that handles the client callback, implementing ICallbackEventHandler“…….” argument passed from client script to the server RaseCallbackEvent“…..”clientcallback, name of client event handler that receives result from server“……”context, client script that is evaluated on client prior to initiating the callback.BoolAsync
  • Putting more than one instance of the ScriptManager control on a Web Form causes the application to throw an InvalidOperationException when the page is initialized.
  • TryMSAjaxControls.aspx
  • Ajaxtoolkit.aspx

Ajax and ASP.NET AJAX Presentation Transcript

  • 1. ASP.Net AJAX JULIE ISKANDERMSc. COMMUNICATION AND ELECTRONICS
  • 2. Lecture 1 Outlines JavaScript in ASP.NET  Adding Client-side events through ASP.NET Fundamentals AJAX AJAX ASP.Net AJAX ASP.Net Controls
  • 3. JavaScript in ASP.NET
  • 4. JavaScript Essentials Ways to embed JavaScript code in a web page: 1. Directly in an event attribute for an HTML element. 2. Add a <script> tag that contains the JavaScript code. 1. The code an be run automatically when the page loads 2. Inserted in a JavaScript function that will be called in response to a client-side event. External Javascript file (.js) can be linked to a webpage using <script> tag with src attribute taking the js file url HTML Document Object Model (DOM) Client Side Events
  • 5. OnClientClick Property Button, ImageButton , LinkButton To add client-side code to the button click If the JS code returns true postback is called Else  postback is canceled
  • 6. Adding Clientside events through asp.net
  • 7. Rendering Script Blocks Page.ClientScript Methods  RegisterClientScriptInclude(): This method adds a script tag that references an external js file at the top of the rendered page.  RegisterClientScriptBlock(): Writes a script block at the beginning of the web form, right after the <form runat="server"> tag  RegisterStartupScript(): Writes a script block at the end of the web form, right before the closing </form> tag
  • 8. AJAXAsynchronousJavascript And XML
  • 9. AJAX Asynchronous Javascript And Xml Does things behind the scenes Looks a lot more like desktop application then web applications No need to refresh the whole page at each interaction with the server Modifies page on the fly JavaScript binds everything together
  • 10. Traditional Web Application Vs. AJAX Web Application Traditional Web application
  • 11. Traditional Web Application VS. AJAX Web Application AJAX Web application
  • 12. Steps to do a simple ajax request to get data1. Create XMLHttpRequest Object2. Open the request, set the HTTP method and URL3. Set callback for onreadychange4. Send asynchronous request5. Create an event to call the previous steps All this is JAVASCRIPT Code
  • 13. 1- Creating the XMLHttpRequest Object
  • 14. STEPS 2,3 and 4
  • 15. readyState valuesValue Description0 Uninitialized1 Loading2 Loaded3 Interactive4 Complete
  • 16. Some status valuesValue Description200 Ok204 No content401 UnAuthorized404 Not Found411 Request Timeout
  • 17. Calling Ajax request
  • 18. Custom HTTP handler .ashx A light-weight option as it doesn’t use the full-page model. A class that implements IHttpHandler  void ProcessRequest(HttpContext context)  bool IsReusable
  • 19. Example using ASHX
  • 20. Custom HTTP handler.ashx
  • 21. .aspx that calls .ashx using ajax
  • 22. The .js file
  • 23. Ajax and Client Callbacks1. A JavaScript event fires, triggering the server callback.2. The normal page life cycle occurs.3. ASP.NET executes the server-side callback method. It accepts a single string parameter and returns a single string.4. The page receives the response from the server-side method, it uses JavaScript code to modify the web page accordingly.
  • 24. Ajax and Client Callbacks The Page must implement ICallbackEventHandler Must Implement  public void RaiseCallbackEvent(string eventArgument)  public string GetCallbackResult()
  • 25. Ajax and Client Callbacks
  • 26. ASP.NETAJAX
  • 27. ASP.NET AJAX Successor of Atlas Was first a separate component in ASP.NET 2.0 then become completely integrated. ASP.NET AJAX is made up of:  ASP.NET AJAX on the Client  ASP.NET AJAX on the Server
  • 28. ASP.NET AJAX on the Client JavaScript files, in System.Web.Extensions.dll  MicrosoftAjax.js, MicrosoftAjaxWebForms.js, and MicrosoftAjaxTimer.js.)
  • 29. ASP.NET AJAX on the Server ScriptManager,  is the brains of the server-side ASP.NET AJAX model.  No visual appearance on the page.  renders the links to the ASP.NET AJAX JavaScript libraries. Each page that uses ASP.NET AJAX requires an instance of the ScriptManager. A page can has one and only one ScriptManager.
  • 30. ASP.NETAJAX ServerControl
  • 31. The ASP.NET AJAX Server Controls Manages script libraries and scriptScriptManager files, partial-page rendering, and other functions. Enables sections of a page to beUpdatePanel partially rendered without a page postback. Provides visual feedback on theUpdateProgress browser when the contents on UpdatePanel controls refresh. Performs partial-page updates atTimer defined intervals.
  • 32. ASP.NET AJAX Server Control Create partial-page update Emit the ASP.NET AJAX script needed Disadvantage  Reduced flexibility
  • 33. Example
  • 34. ASP.NET AJAX Server Control ScriptManager  Must be added before any other AJAX control.  Control manages the client-side scripts that enable asynchronous Ajax functionality.  Only ONE ScriptManager per page.
  • 35. ASP.NET AJAX Server Control UpdatePanel  Isolating a section of a page for a partial-page update.  Intercept any submit event on it and call asynchronous callback to refresh it content.  Any content that’s outside the panel and changed is ignored.  UpdateMode Property is Always or Conditional  Always  updates with any partial update  Conditional  updated independently
  • 36. ASP.NET AJAX Server Control UpdatePanel Triggers  Triggers to render UpdatePanel on event occurrence .  Triggers link controls outside the panel  To specify when an UpdatePanel should update, you need to define an UpdatePanel trigger.  AsyncPostBackTrigger  updates only UpdatePanels with UpdateMode Always and Conditional with the trigger  PostBackTrigger
  • 37. ASP.NET AJAX Server Control Timer Control  Interval Property to set maximum number of milliseconds before next update.  If on an UpdatePanel triggers asynchronous postback  If not on one, nor linked in a trigger  causes full page postback
  • 38. ASP.NET AJAX Server Control UpdateProgress Control  Specify some content that will appear as soon as an asynchronous request is started and disappear as soon as the request is finished.  Can include a fixed message or image.
  • 39. Note When the callback is performed, the target page actually starts executing a trimmed-down life cycle.  Control events won’t execute, but the Page.Load and Page.Init event Page.IsPostBack = true, Page.IsCallback =true No page rendering. View state information is retrieved Any changes made are not sent back to the page. Only strings can be sent and received.
  • 40. Ajax Control Toolkit http://www.asp.net/ajaxlibrary/act.ashx  Open Source toolkit for AJAX controls and extenders. http://stephenwalther.com/blog/archive/2011/11/16 /ajax-control-toolkit-november-2011-release.aspx  Read about changes to 2011 release
  • 41. Lab #1 Try the lecture examples again.  Use javascript to read xml and txt files Download Ajax control toolkit Try lecture Examples
  • 42. References [1] Pro ASP.NET In C# 2010, Fourth Edition,matthew Macdonald, Adam Freeman, And Mario Szpuszta, Apress [2]Profesional ASP.NET 4 in C# and VB.NET, Bill Evjen, Scott Hanselman and Devin Rader, Wiley [3] http://www.adaptivepath.com/ideas/ajax-new- approach-web-applications