Asp.Net Study Material: Study Material for Ajax

For Asp.net Training Click Here

Written By:-Isha Malhotra

Email:-malhotra.isha3388@gmail.com

Basic of AJAX

Ajax is a platform independent technology. AJAX stands for Asynchronous JAvascript and Xml. Asynchronous refers to the events that are happening in the background Independently from the main application flow.

With the help of Ajax we can create an area in our web form Which post back and update without refreshing the whole page. It is called Partial page updating which increases the performance.

Ajax Controls

1. ScriptManager

2. ScriptManagerProxy

3. Update Panel

4. Timer Control

5. Update Progress

Script Manager

Script manager is used to control the processing of Ajax. The major responsibility of script manager is for downloading Microsoft Ajax Library down to the browser (client).

Script manager’s EnablePartialRendering property must be set True which is its default value which is necessary for the script manager to manage Partial updating.

Update Panel

Update panal control is just like a container for other control. It defines an area in your page which will be independently partially post back without refreshing the whole page. A single page can have multiple update panel.

Example

In the following example we add one script manager and update panel at our page. In update panel we take one dropdown list and filled it with some countries and there is a lable in update panel too. We create event dropdown SelectedIndexChanged. In this event we take the dropdown selected item and show it in the lable. Check the following code:-

AjaxPractise.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="AjaxPractise.aspx.cs" Inherits="AjaxPractise" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

</head>

<body>

<div>

<asp:ScriptManager ID="ScriptManager1" runat="server">

</asp:ScriptManager>

<br />

<asp:UpdatePanel ID="UpdatePanel1" runat="server">

<asp:DropDownList ID="DropDownList1" runat="server" AutoPostBack="True"

onselectedindexchanged="DropDownList1_SelectedIndexChanged">

<asp:ListItem>Select Country</asp:ListItem>

<asp:ListItem>India</asp:ListItem>

<asp:ListItem>China</asp:ListItem>

<asp:ListItem>US</asp:ListItem>

<asp:ListItem>UK</asp:ListItem>

</asp:DropDownList>

<br />

<asp:Label ID="Label1" runat="server"></asp:Label>

<br />

</ContentTemplate>

</asp:UpdatePanel>

</div>

</form>

</body>

</html>

AjaxPractise.aspx.cs

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.UI;

using System.Web.UI.WebControls;

public partial class AjaxPractise : System.Web.UI.Page

{

protected void Page_Load(object sender, EventArgs e)

{

}

protected void DropDownList1_SelectedIndexChanged(object sender, EventArgs e)

{

Label1.Text = DropDownList1.SelectedItem.Text;

}

In this example you will see that without refreshing the whole page it will update only those control which assigned in update panel.( you can check browsers refresh button for same task using without update panel. You will see the difference.)

Timer Control

Timer control is used to update a particular portion of a page at a particular time period. It is managed by firing tick event. We set interval property of a timer control which defines in millisecond.

Example:-

In this example we take one web form. In form first we add script manager and update panel.

In update panel we add timer control and a label. We create the tick event for timer control and show current date with time on label. We set the interval 1000 millisecond which is equivalent to 1 second. Every after one second the event will fire and display the time without refreshing the whole page. Run the following code:-

AjaxWithTimer.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="AjaxWithTimer.aspx.cs" Inherits="AjaxWithTimer" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

</head>

<body>

<div>

<asp:ScriptManager ID="ScriptManager1" runat="server">

</asp:ScriptManager>

<br />

<asp:UpdatePanel ID="UpdatePanel1" runat="server">

<asp:Timer ID="Timer1" runat="server" Interval="1000" ontick="Timer1_Tick">

</asp:Timer>

<br />

<asp:Label ID="Label1" runat="server"></asp:Label>

</ContentTemplate>

</asp:UpdatePanel>

</div>

</form>

</body>

</html>

AjaxWithTimer.aspx.cs

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.UI;

using System.Web.UI.WebControls;

public partial class AjaxWithTimer : System.Web.UI.Page

{

protected void Page_Load(object sender, EventArgs e)

{

}

protected void Timer1_Tick(object sender, EventArgs e)

{

Label1.Text = DateTime.Now.ToString();

}

UpdateProgressControl

Update progress control provides feedback in the browser when the update panel are updated. We can add multiple update progress control in the page.

AjaxPractise.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="AjaxPractise.aspx.cs" Inherits="AjaxPractise" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

</head>

<body>

<div>

<asp:ScriptManager ID="ScriptManager1" runat="server">

</asp:ScriptManager>

<br />

<asp:UpdatePanel ID="UpdatePanel1" runat="server">

<asp:DropDownList ID="DropDownList1" runat="server" AutoPostBack="True" OnSelectedIndexChanged="DropDownList1_SelectedIndexChanged">

<asp:ListItem>Select Country</asp:ListItem>

<asp:ListItem>India</asp:ListItem>

<asp:ListItem>China</asp:ListItem>

<asp:ListItem>US</asp:ListItem>

<asp:ListItem>UK</asp:ListItem>

</asp:DropDownList>

<br />

<asp:Label ID="Label1" runat="server"></asp:Label>

<br />

</ContentTemplate>

</asp:UpdatePanel>

<asp:UpdateProgress ID="UpdateProgress1" runat="server" AssociatedUpdatePanelID="UpdatePanel1">

update is in progress..........

</ProgressTemplate>

</asp:UpdateProgress>

</div>

</form>

</body>

</html>

AjaxPractise.aspx.cs

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.UI;

using System.Web.UI.WebControls;

public partial class AjaxPractise : System.Web.UI.Page

{

protected void Page_Load(object sender, EventArgs e)

{

}

protected void DropDownList1_SelectedIndexChanged(object sender, EventArgs e)

{

System.Threading.Thread.Sleep(10000);

Label1.Text = DropDownList1.SelectedItem.Text;

}

Output

Asp.Net Study Material

Asp.net Study Material

Tuesday, 5 March 2013

Study Material for Ajax

Basic of AJAX

2 comments: