DotNet Tutorials

V4 Dot Net Tutorials

Server Intellect Cloud Hosting

Navigator : Home > Tutorials > AJAX Tutorials > ...

 AJAX using ASP.NET 2.0 and C#

AJAX, short for Asynchronous JavaScript And XML, isn't a technology but rather a grouping of technologies. AJAX uses a communication technology (typically SOAP and XML) to send and receive an asynchronous request/response to the server, and then leverages presentation technologies (JavaScript, DOM, HTML, and CSS) to process the response. Applications using AJAX are legitimate today, because most browsers support the necessary technology. AJAX, short for Asynchronous JavaScript And XML, isn't a technology but rather a grouping of technologies. AJAX uses a communication technology (typically SOAP and XML) to send and receive an asynchronous request/response to the server, and then leverages presentation technologies (JavaScript, DOM, HTML, and CSS) to process the response. Applications using AJAX are legitimate today, because most browsers support the necessary technology.

First, you  need to import the  Ajax namespace from Ajax.DLL.The Ajax namespace contains Ajax.dll encapsule Asynchronous Javascript and XML in Bin folder. This is an combination of Javascript and XML. The data is transfered in the form of XML.

We are using Server Intellect and have found that by far, they are the most friendly, responsive, and knowledgeable support team we've ever dealt with!

using Ajax;

In tutorial, the only configuration step beyond that is to add the following code in the web.config file, inside the <system.web> element.
<httpHandlers>
<add verb="POST,GET" path="ajax/*.ashx" type="Ajax.PageHandlerFactory, Ajax"/>
</httpHandlers>
In order to make server-side functions available through JavaScript, two things must be done. First, the function or functions in question must be marked with the Ajax.AjaxMethodAttribute. Second, the class containing these functions must be registered through a call to Ajax.Utility.RegisterTypeForAjax during the page load event. Then we use GetData() even of btnGetData and display() event of DropDownList  to do the work.  The button btnGetData is a html button. It display employee data without page post-back. When chose a particular record in the Dropdownlist, the employee name and employee ID will be displayed in the label.

function GetData()
{
var response;
Ajax_CSharp.GetData(GetData_CallBack);
}

function GetData_CallBack(response)
{
var response=response.value;

if(response=="Empty")
{
alert("No Record Found !!!");
}
else if(response=='Error')
{
alert("An Error occured in accessing the DataBase !!!");
}
else
{
var arr=response.split("~");
var empID=arr[0].split(",");
var empName=arr[1].split(",");

document.getElementById('dlistEmployee').length=0;
for(var i=0;i<empID.length;i++)
{
var o = document.createElement("option");
o.value = empID[i];
o.text = empName[i];
document.getElementById('dlistEmployee').add(o);
}
}
}

function display()
{
var selIndex=document.getElementById("dlistEmployee").selectedIndex;
var empName=document.getElementById("dlistEmployee").options(selIndex).text;
var empID=document.getElementById("dlistEmployee").options(selIndex).value;

document.getElementById("lblResult").innerHTML="You have selected " + empName + " ( ID : " + empID + " )";
}

If you're looking for a really good web host, try Server Intellect - we found the setup procedure and control panel, very easy to adapt to and their IT team is awesome!


Register Ajax in PageLoad and get data from the employee table of Database.

protected void Page_Load(object sender, EventArgs e)
{
Ajax.Utility.RegisterTypeForAjax(typeof(Ajax_CSharp));
}

[Ajax.AjaxMethod(HttpSessionStateRequirement.ReadWrite)]
public string GetData()
{
try
{
SqlConnection con = new SqlConnection(ConfigurationManager.AppSettings["conn"]);
SqlCommand cmd = new SqlCommand("SELECT * FROM employee", con);
cmd.Connection.Open();

SqlDataAdapter adapter = new SqlDataAdapter(cmd);
DataSet ds = new DataSet("DataSet");
adapter.Fill(ds, "Table");

if ((ds.Tables[0].Rows.Count <= 0))
{
return "Empty";
}
else
{
string empID = "";
string empName = "";
for (int i = 0; i <= ds.Tables[0].Rows.Count - 1; i++)
{
empID += ds.Tables[0].Rows[i][0].ToString() + ",";
empName += ds.Tables[0].Rows[i][1].ToString() + ",";
}
empID = empID.Substring(0, empID.Length - 1);
empName = empName.Substring(0, empName.Length - 1);

return empID + "~" + empName;
}
}
catch
{
return "Error";
}
}

The front end AjaxDataSearchCSharp.aspx page looks something like this:

<div align="center">
<input id="btnGetData" onclick="GetData();" type="button" value="To Get Employee Data From DB" style="width: 203px" />
&nbsp;&nbsp;
<asp:DropDownList ID="dlistEmployee" runat="server" onchange="display();">
</asp:DropDownList><asp:Label ID="lblResult" runat="server" Text="No Record Selected"></asp:Label>
</div>

We used over 10 web hosting companies before we found Server Intellect. Their dedicated servers and add-ons were setup swiftly, in less than 24 hours. We were able to confirm our order over the phone. They respond to our inquiries within an hour. Server Intellect's customer support and assistance are the best we've ever experienced.

The flow for the code behind page is as follows.

using System;
using System.Data;
using System.Data.SqlClient;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
using Ajax;

public partial class Ajax_CSharp : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
Ajax.Utility.RegisterTypeForAjax(typeof(Ajax_CSharp));
}

[Ajax.AjaxMethod(HttpSessionStateRequirement.ReadWrite)]
public string GetData()
{
try
{
SqlConnection con = new SqlConnection(ConfigurationManager.AppSettings["conn"]);
SqlCommand cmd = new SqlCommand("SELECT * FROM employee", con);
cmd.Connection.Open();

SqlDataAdapter adapter = new SqlDataAdapter(cmd);
DataSet ds = new DataSet("DataSet");
adapter.Fill(ds, "Table");

if ((ds.Tables[0].Rows.Count <= 0))
{
return "Empty";
}
else
{
string empID = "";
string empName = "";
for (int i = 0; i <= ds.Tables[0].Rows.Count - 1; i++)
{
empID += ds.Tables[0].Rows[i][0].ToString() + ",";
empName += ds.Tables[0].Rows[i][1].ToString() + ",";
}
empID = empID.Substring(0, empID.Length - 1);
empName = empName.Substring(0, empName.Length - 1);

return empID + "~" + empName;
}
}
catch
{
return "Error";
}
}
}

Looking for the VB.NET2005 Version? Click Here!

Looking for more ASP.NET Tutorials? Click Here!