ASP.Net AJAX

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

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.

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.

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

Postback or Asynchronous PostBack Page.IsPostBack ScriptManager1.IsInAsyncPostBack

Example 1: Two Counters

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

Example 2: Retrieve Customer Name

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

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

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

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