ASP.NET and Ajax - using XmlHttpRequest

4.22 (83 votes)

If you are not interested in using the ASP.NET AJAX library offered for ASP.NET, but would like to feature small amounts of AJAX functionality on your pages, you can do this easily with some javascript and a receptive page.

UPDATE: A much simpler way to add small doses of AJAX fuctionality to ASP.NET Web Forms can be achieved by using jQuery. Please see this article:

I only use AJAX in small doses on web sites - mainly to improve the user-experience. Typical instances will involve retrieving a full record based on a users sleection in a drop down list. I don't want to perform a full page postback, so I get the javascript xmlhttpserver object to do it for me behind the scenes. Here's an example that fetches the address details for a Northwind Traders customer.

First, a generic function to instantiate an instance of xmlhttprequest or xmlhttp, depending on the browser:

  function GetXmlHttpObject(handler)
  var objXmlHttp=null
  if (navigator.userAgent.indexOf("MSIE")>=0)
  var strName="Msxml2.XMLHTTP"
  if (navigator.appVersion.indexOf("MSIE 5.5")>=0)
  objXmlHttp=new ActiveXObject(strName)
  return objXmlHttp
  alert("Error. Scripting for ActiveX might be disabled") 
  if (navigator.userAgent.indexOf("Mozilla")>=0)
  objXmlHttp=new XMLHttpRequest()
  return objXmlHttp

Now, a simple dropdownlist populated by a SqlDataSource control that fetches the CustomerID and Customer Name. Note the empty div, CustomerDetails below the dropdownlist:

<asp:DropDownList ID="DropDownList1" 

ConnectionString="Provider=Microsoft.Jet.OLEDB.4.0;Data Source=|DataDirectory|Northwind.mdb"
SelectCommand="SELECT [CustomerID], [CompanyName] FROM [Customers]">

<div id="CustomerDetails"></div>

Two more javascript functions are needed. One to fire the GetXmlHttpObject method, and denote the page to send a request to, and one to handle the response by checking the readtState property of the object for a value of 4 or complete, then to write the reponse to the empty div:

  function GetCustomer(id)
  var url="FetchCustomer.aspx?CustomerID=" + id ;
  xmlHttp=GetXmlHttpObject(stateChanged);"GET", url , true);
  function stateChanged() 
  if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")

So now we have a page that gets called by xmlhttp (FetchCustomer.aspx) and we have a value to pass to the querystring for the page. So the next thing to do is to add an event handler to the DropDownList that will fire the GetCustomer() event and pass a CustomerID value:

  if (!Page.IsPostBack)
  DropDownList1.Items.Insert(0, "");

  DropDownList1.Attributes["onChange"] = "GetCustomer(this.value);";
  HttpResponse myHttpResponse = Response;
  HtmlTextWriter myHtmlTextWriter = new HtmlTextWriter(myHttpResponse.Output);

And finally, the code for the FetchCustomer.aspx page. Everyting has been removed from the .aspx file except the first line. We don't want DocTypes or default <form> tags disturbing the piece of html to be emitted in the response:

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

And the code-behind makes doubly sure by calling Response.Clear() before querying the database and emitting the resulting data as html:

using System;
using System.Data;
using System.Data.OleDb;
using System.Text;

public partial class FetchCustomer : System.Web.UI.Page
  protected void Page_Load(object sender, EventArgs e)
    StringBuilder sb = new StringBuilder();
    sb.Append("<br />");
    string provider = "Provider=Microsoft.Jet.OLEDB.4.0;";
    string db = "Data Source=|DataDirectory|Northwind.mdb";
    string connstr = provider + db;
    string query = "SELECT * FROM Customers WHERE CustomerID = ?";
    OleDbConnection conn = new OleDbConnection(connstr);
    OleDbCommand cmd = new OleDbCommand(query, conn);
    cmd.Parameters.AddWithValue("", Request.QueryString["CustomerID"]);
    OleDbDataReader dr = cmd.ExecuteReader();
      sb.Append(dr[1].ToString() + "<br />");
      sb.Append(dr[4].ToString() + "<br />");
      sb.Append(dr[5].ToString() + "<br />");
      sb.Append(dr[6].ToString() + "<br />");
      sb.Append(dr[7].ToString() + "<br />");
      sb.Append(dr[8].ToString() + "<br />");
      sb.Append("Tel: " + dr[9].ToString() + "<br />");

Date Posted:
Last Updated:
Posted by:
Total Views to date: 75461


- Raghav Khunger

Hi,Mikes I am Raghav Khunger Star Level Member In community .I found Ur this Article Great FOr XmlHttp Request Explanation.How ever I was facing one problem in the above code at document.getElementById('CustomerDetails').innerHTML=xmlHttp.responseText;
In IE At this point it was again and agin showing htmlfile: Unknown runtime error .There for After So many trials I found a solution .I added Response.End(); at the last of FetchCustomer.aspx.cs Thanks So much

- Mike

Thanks, Raghav. I've amended the code to cater for IE.

- Remy

This is a nice example.
Would you make the entire code available for download...
I'm struggling with the fact that .aspx only has 2 lines of code:
%@ Page Language="C#" AutoEventWireup="true"
CodeFile="FetchCustomer.aspx.cs" Inherits="FetchCustomer" %>

and where to put the javascript code and presentation code (dropdown/etc you have listed.

- Mike

Remy - all the code you need is in the article. FetchCustomer.aspx only has two lines because you don't want anything to interfere with the Response - just as it explains in the article. This article is quite old - there are other ways of using AJAX in ASP.NET, such as using jQuery with Web Services. Have a look at a more recent article here:

- Marc

Hello, I am very very new to AJAX, and here is where I am stuck...

I understand how to manipulate pages with JavaScript and DOM, and even how to send xmlHTTPrequest, but I have no clue how to access that request (specifically the information I put in it) from my server-side C# code. I can't seem to find a resource that explains this. PLEASE help!

- prashant singh

Hi Mike
I am regular reader of your blogs on .net and I have to say one thing to you.
"You are the person who always try to establish a Milestone on other's way"

Thank's a Lot for your dedication to the .net
I have a Query to U
Can jQuery-AJAX-and-ASP.NET Web Services help us to upload file?

- Syed Fasih

Full Marks!!!! I have rated 5 this article. Wonderfull Effort!

- skatedotnet

thank you very much!

Recent Comments

raphael 27/11/2015 13:59
In response to ASP.NET 5: Managing Client-side Dependencies with NPM, Bower and Gulp
i fixed it. i'm not sure *what* it is that VS does, but you get the same result if you do a "npm on...

Raphael 27/11/2015 13:02
In response to ASP.NET 5: Managing Client-side Dependencies with NPM, Bower and Gulp
There seems to be a major issue with the dependency manager in VS2015. I haven't yet figured out but...

Joaquín Bresan 26/11/2015 17:58
In response to Getting the identity of the most recently added record
Great contribution friend. Thank you so much for sharing....

sumalatha 24/11/2015 22:09
In response to ASP.NET 5 Middleware, Or Where Has My HttpModule Gone?
Great article. I have gone through hundreds of articles, finally this gives the comprehensive of...

Rajasekar 24/11/2015 12:27
In response to Import Data From Excel to Access with ASP.NET
While use this code i'm facing on error: "Unrecognized Database format C:\mydabase.accdb" can any...

Parmod 24/11/2015 07:28
In response to ASP.NET 5 Project Basics
For a new learner (Fresher) in ASP.NET there is a issue Fresher have to learn two types of , old...

Robert 22/11/2015 21:35
In response to ASP.NET 5 By Numbers
I have to agree fully with Paul, this does sound like an entire mis-mash of technologies. Sort of in...

Christian 21/11/2015 15:46
In response to MVC 5 with EF 6 in Visual Basic - Creating an Entity Framework Data Model
Many thanks Mike to introduce me in the EF6 Code First way of thinking. Exactly what I need for my...

ax plains 20/11/2015 16:29
In response to Examining the Details and Delete Methods
Hello, really great tutorial for a beginner like me! Is it possible to have an explanation on how a...

Abdul Latif 20/11/2015 14:42
In response to Reading Excel Files Without Saving To Disk In ASP.NET
Could anyone please help me, I am getting : "OfficeOpenXml.ExcelPackage" does not contain a for...