1 / 14

Understanding ASP.NET AJAX: Enhancing Web Applications with Asynchronous JavaScript

This guide explores the powerful capabilities of ASP.NET AJAX for creating interactive and responsive web applications. Learn how to implement partial page updates without refreshing the entire page, utilizing AJAX’s asynchronous communication to improve user experience. Discover key components like ScriptManager, UpdatePanel, and Timer controls to efficiently manage server requests and responses. Through practical examples, we’ll cover how to harness these tools to create dynamic web pages that respond quickly to user actions, ultimately enhancing the richness of internet applications.

moeshe
Télécharger la présentation

Understanding ASP.NET AJAX: Enhancing Web Applications with Asynchronous JavaScript

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. ASP.Net AJAX

  2. AJAX • Asynchronous JavaScript and XML: • JavaScript, Document Object Model, Cascade Style Sheet, XML, server-side script such as .Net, etc. • Partial refresh: It lets you update part of a web page without having to reload the entire page. • RIA: Rich Internet Application • Quick response time, interactive page

  3. How AJAX Updates a Page • When an event happens, JavaScript (AJAX engine) prepares a request and sends it to the web sever. • The server receives the request and processes it. • The server prepares a response and sends it back to the browser. • The JavaScript parses the response to update the page.

  4. ASP.Net AJAX Server Controls • ScriptManager: Enables the use of other AJAX controls. • UpdatePanel: A control that encloses standard ASP.net controls to be updated asynchronously (asynchronous postback) • Timer control: Trigger partial refresh at a set time interval.

  5. Creating Page with AJAX • 1. Add a ScriptManager control • 2. Add UpdatePanel control • 3. Add ASP.Net controls to the UpdatePanel

  6. Postback or Asynchronous PostBack • Page.IsPostBack • ScriptManager1.IsInAsyncPostBack

  7. Example 1: Two Counters

  8. Dim PostbackCounter, AsyncCounter As Integer Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load If Not Page.IsPostBack Then Session("PCounter") = PostbackCounter Session("Acounter") = AsyncCounter Else PostbackCounter = Session("PCounter") End If If ScriptManager1.IsInAsyncPostBack Then AsyncCounter = Session("Acounter") End If End Sub Protected Sub Button1_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles Button1.Click PostbackCounter += 1 TextBox1.Text = PostbackCounter.ToString Session("PCounter") = PostbackCounter End Sub Protected Sub Button2_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles Button2.Click AsyncCounter += 1 TextBox2.Text = AsyncCounter.ToString Session("Acounter") = AsyncCounter End Sub

  9. Example 2: Retrieve Customer Name

  10. Page.IsPostBack and ScriptManager1.IsInAsyncPostBack Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load If Not Page.IsPostBack Then TextBox3.Text = "First time" Else TextBox3.Text = "PostBack" End If If ScriptManager1.IsInAsyncPostBack Then TextBox2.Text = " IsAsyncPostBack" Else TextBox2.Text = " Not AsyncPostBack" End If End Sub

  11. Protected Sub Button2_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles Button2.Click Dim strConn As String = "Provider=Microsoft.Jet.OLEDB.4.0;Data Source = c:\salesDB.mdb" Dim objConn As New OleDbConnection(strConn) Dim strSQL As String = "select * from customer where cid='" & TextBox1.Text & "';" Dim objComm As New OleDbCommand(strSQL, objConn) objConn.Open() Dim objDataReader As OleDbDataReader objDataReader = objComm.ExecuteReader() objDataReader.Read() TextBox2.Text = objDataReader("cname") objDataReader.Close() End Sub

  12. AJAX Timer • Add inside the UpdatePanel • Add Timer as a Trigger to the UpdatePanel • UpdateTriggers property • Timer’s interval and tick event

  13. Code Example Protected Sub Timer1_Tick(ByVal sender As Object, ByVal e As EventArgs) Handles Timer1.Tick Label1.Text = DateTime.Now.ToLongTimeString() End Sub

More Related