Jump to content

Check out our Community Blogs

Register and join over 40,000 other developers!

Recent Status Updates

View All Updates

* * * * - 1 votes

Awesomeness of Ajax with Gridview

innerHTML gridview ajax grid

  • Please log in to reply
2 replies to this topic

#1 gokuajmes


    CC Devotee

  • Senior Member
  • PipPipPipPipPipPip
  • 483 posts

Posted 27 September 2010 - 12:28 AM

Hi welcome to this ASP.NET tutorial on Ajaxing the gridview.


In this tutorial we will use the Visual Studio 2010 / 2008 Express edition IDE to design an 'aspx' page to perform ajax request on the gridview. If you are new to using .NET or ASP.NEt, gridview is a Server control which will display Data from many sources (there are restrictions though which is not needed at this point of time).


Here is the action, we place a gridview which binds( reads data ) to a List Collection. We also place a HTML button which makes a AJAX request to change the List Collection to something else and then re-bind the grid to it. That was simple wasn't it?


Visual Studio 2010 / 2008 IDE

Solution/Project Setup:

Create a new ASP.NET web application by going to File->NewWebsite-->ASP.NET Website
language C#, location HTTP [you need to create a virtual directory before doing this else the IDE will prompt you to create it] name your website to your liking.
note: Ajax can only be realized when you host your application in a web server like IIS, XAMPP etc

Ajaxing the Gridview:

Now that you have created your first ajax application, let us start utilizing it. Add a new javascript file to your project and name it "ajax.js". Copy and paste in the below code,
function changeSource(_pageName,_id){

//set a Default value
var xhr = false;

//Initialize the Xml http request object based on browser
//browser is Firefox,Opera,Chrome etc
xhr = new XMLHttpRequest();
//Browser is ie6 +
xhr = new ActiveXObject("Microsoft.XMLHTTP");

//When ever we recieve the status of request from server
xhr.onreadystatechange = function(){
//If request is completed and Status succeeded
if(xhr.readyState == 4 && xhr.status == 200){
//replace the grid with new one
document.getElementById('ctl00_Main_GridView1').parentNode.innerHTML = xhr.responseText;

//Open a Connection and Wait for response

//Send No data to the Page

Now link your ajax.js file in default.aspx page like below
<script type="text/javascript" src="ajax.js"></script>

which comes in b/w head html tag.

The server side:

Now that our client code is setup let us take care of the Server side [asp.net] process. Here is steps we will take in short :

1. Create a string List<>
2. Set the datasource property of the gridview to string list<> we ha declared earlier
3. Bind the string list<> with gridview
4. If request was made with ajax , set a different dataSource

hope the process is clear,
Now for the server side code,
Default.aspx.cs [ CodeBehind ] Rightclick--> View Code
using System;
using System.Data;
using System.Configuration;
using System.Collections.Generic;
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 System.IO;

public partial class Default : System.Web.UI.Page
protected void Page_Load(object sender, EventArgs e)
List<string> lstSource = null;
if (Request.QueryString["id"] != null)
lstSource = new List<string>();
//Begin the Ajax Response
Response.ContentType = "";
//Set the DataSource to List<>
GridView1.DataSource = lstSource;
//Now Start to produce the Output of the Databinded Gridview
StringWriter sw = new StringWriter();
HtmlTextWriter htw = new HtmlTextWriter(sw);
Response.End();//Required Statement
//End the Ajax Response
lstSource = new List<string>();
//Assign the list as source
GridView1.DataSource = lstSource;
//Bind the companies list to Gridview

public override void VerifyRenderingInServerForm(Control control)

Default.aspx Designer

Now here comes our simple design
<%@ Page language="C#" autoeventwireup="true" codefile="default.aspx.cs"
inherits="default" title="Ajaxed!!" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head runat="server">
<script type="text/javascript" src="ajax.js"></script>
<form id="form1" runat="server">
<asp:GridView id="GridView1" runat="server"></asp:GridView>
<input id="btnRequest" type="button" value="makeRequest" onclick="changeSource('test.aspx','1')" />

you can align it any way you like using a css class.
note: most important part is highlighted in Red which is onclick event of the button.

Launching 5, 4, 3, 2, 1 blast off!!

Go to visual studio's Debug menu and click Start Debugging [F5]

let's get Clicky

I would however recommend you to Install Firebug addon if you are using Firefox to monitor the ajax request int the console panel.
Enable the firebug first and then click the console panel from the list of panels that the addon has to offer. i recommend you to see my video on firebug to know more

Click!! the button that says makeRequest then immediately note the request made in the console panel. Click the request to know more details. See the request as plain text, xml etc.

Off to the Explanation:

Probably pointless to explain i suppose. The code is well commented. Viewver is assumed to be javascript Intermediate. If you still think a explanation is needed ping back,
thank you all for reading this wonderfull tutorial
  • 1

#2 gokuajmes


    CC Devotee

  • Senior Member
  • PipPipPipPipPipPip
  • 483 posts

Posted 30 September 2010 - 03:00 AM

0 votes, 40 views and 0 replies ==> Not much people are into .NET framework or C# or ASP.NET.
Hope Microsoft could expand their span about the framework
  • 0

#3 jasv


    CC Lurker

  • Just Joined
  • Pip
  • 1 posts
  • Programming Language:C#, (Visual) Basic, Python, Delphi/Object Pascal, Visual Basic .NET, Transact-SQL, VBScript
  • Learning:Objective-C, PHP

Posted 02 February 2013 - 07:21 AM

Thanks for the simple but excellent example

  • 0

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download