Introduction:
In this article I will show you how you can use the power of DHTML and AJAX to make cool effects with ASP.NET Server Controls.
The article is also accompanied with source code at the end which you can download and see what is going on behind the scenes. I will start off with simple DHTML tooltips and later bind tool tips with the GridView control and other ASP.NET server controls.
Displaying a Simple DHTML ToolTip:
Let’s start by displaying a very simple tool tip. In this case you will have a hyperlink and when you click on the hyperlink you will see the text displayed in the div element.
Let’s first make the hyperlink:
<ahref="#"onclick="SimpleToolTip()">Show Simple ToolTip</ a>
As you can notice we have set up the href property of the hyperlink to ‘#’ which means that when you click it will not navigate to any url. The onclick event fires the SimpleToolTip method. Let’s check out the SimpleToolTip method implementation:
function SimpleToolTip()
{
document.getElementById("Display").style.backgroundColor = "lightYellow";
document.getElementById("Display").style.visibility = "visible";
document.getElementById("Display").innerHTML = "This is a Tooltip";
}
You might be wondering that what is “Display”. Well, “Display” is the id of the <div> element. The only thing I am doing is changing the background color of the div element and setting its visibility to “visible” so that you will be able to see it. At the end I just set the innerHTML property to some random text so you will be able to see some thing on the screen.
Using AJAX to display data from the Database:
The previous example was very simple and did not do much. It would be cool that if we can get some data from the database and bind it to the div element. But it would be more cool if no postback happens, this means that we will bind the data to the div element without refreshing the page. The first thing you need to do is to download the AJAX.NET library.
Downloading AJAX.NET Library:
First of all you need to download AJAX.NET library created by Michael Schwarz. Now that you have downloaded the library and made the reference to the dll in your project we can start with some dirty stuff.
Configuration Settings in Web.Config File:
After downloading and referencing the Library you need to make few modifications in the web.config file. Simply put this code in the web.config file and you are done.
<system.web> <!-- Ajax Library Configuration Settings --> <httpHandlers> <add verb=" POST,GET" path=" ajax/*.ashx" type ="Ajax.PageHandlerFactory, Ajax" /> </httpHandlers> </system.web>
Initializing the Library:
Now, you only need to initialize the library. This can be done in the page_load event of the page.
// Initializes the AJAX.NET Library Ajax.Utility.RegisterTypeForAjax(typeof(_Default));
_Default is the name of your class.
Making a Server Side Method to return Data:
Let’s make a Server Side method that will get the data from the database and return it to the client.
[Ajax.AjaxMethod]
public string GetCategories()
{
DataSet ds = GetDataSet();
StringBuilder sb = new StringBuilder();
foreach (DataRow row in ds.Tables[0].Rows)
{
sb.Append(row["CategoryName"] as String);
sb.Append("<BR>");
}
return sb.ToString();
}
The method simply goes through the dataset which is already filled with data and appends the “CategoryName” into the StringBuilder object. In order to use the StringBuilder class you must include the namespace using System.Text.
As, you might have already noticed the [Ajax.AjaxMethod] attribute which declares this method as the method that will be called from the client side.
Calling the Server Side Method from the Client:
The method is called when you click another hyperlink.
<a href="#" onclick="GetCategoryName()">Get Data from Table</a>
As, you can see the hyperlink calls the “GetCategoryName” method. Let’s see the implementation of the GetCategoryName method.
function GetCategoryName()
{
_Default.GetCategories(GetCategoryName_Callback);
}
“GetCategoryName” method calls another method. It is very interesting that you understand this correctly.
_Default is the name of my class
GetCategories is a public or protected method in my class file.
Here is the screen shot which shows that _Default is the name of the class.
Now, let’s see the implementation of the GetCategoryName_Callback which gets the data back from the client.
function GetCategoryName_Callback(response)
{
if(response == null) return;
document.getElementById("Display").style.backgroundColor = "lightYellow";
document.getElementById("Display").style.visibility = "visible";
document.getElementById("Display").innerHTML = response.value;
}
The response object contains the value returned from the GetCategories method which is simply assigned to the div element.
Take a look at the screen shot below to view the effect.
GridView control and DHTML tool tips using AJAX:
You can even use DHTML tool tips with the GridView control.
In this small example I will show how you can get the data by clicking on the column and without making a postback.
Populate the GridView Control:
Your first task is to populate the GridView Control.
privatevoid BindGridView()
{
DataSet ds = GetDataSet();
myDatagrid.DataSource = ds;
myDatagrid.DataBind();
}
private DataSet GetDataSet()
{
// make the query
string query = "SELECT * FROM Categories";
SqlConnection myConnection = new SqlConnection(ConnectionString);
SqlDataAdapter ad = new SqlDataAdapter(query, myConnection);
DataSet ds = new DataSet();
ad.Fill(ds, "Categories");
return ds;
}
Here is the screen shot of the GridView. Notice that the last column is the says select which is just a template column and has a href tag. You can download the complete code and view it in detail.
Now, when you click the select link the “CategoryID” is send to the database and then it returns the “Description” of the particular Category.
Implementing the Server Side Method:
[Ajax.AjaxMethod]
publicstring GetDescriptionByID(int categoryID)
{
StringBuilder sb = newStringBuilder();
DataSet ds = GetDataSet();
foreach (DataRow row in ds.Tables[0].Rows)
{
if (Convert.ToInt32(row["CategoryID"]) == categoryID)
{
sb.Append(row["Description"] asString);
sb.Append("<BR>");
}
}
return sb.ToString();
}
The method “GetDescriptionByID” simply takes an ID and iterate through the DataSet and appends the “Description” of the matching categoryID to the StringBuilder object.
Calling the server method from the client – AJAX:
The first thing you need to do is to make the href object in the template column. This is the column which says “Select”.
<asp:GridViewID="myDatagrid"runat="server"AutoGenerateColumns="False"BackColor="White"
<FooterStyleBackColor="#99CCCC"ForeColor="#003399"/>
<Columns>
<asp:BoundFieldDataField="CategoryID"HeaderText="CategoryID"/>
<asp:BoundFieldDataField="CategoryName"HeaderText="CategoryName"/>
<asp:TemplateFieldHeaderText="Select">
<ItemTemplate>
<ahref="#"id="MyHyperlink"onclick="GetDescriptionByID('<%# Eval("CategoryID") %>')">Select</a>
</ItemTemplate>
</asp:TemplateField>
</Columns>
<RowStyleBackColor="White"ForeColor="#003399"/>
<SelectedRowStyleBackColor="#009999"Font-Bold="True"ForeColor="#CCFF99"/>
<PagerStyleBackColor="#99CCCC"ForeColor="#003399"HorizontalAlign="Left"/>
<HeaderStyleBackColor="#003399"Font-Bold="True"ForeColor="#CCCCFF"/>
</asp:GridView>
BorderColor="#3366CC"BorderStyle="None"BorderWidth="1px"CellPadding="4">
The href calls the “GetDescriptionByID” method.
function GetDescriptionByID(categoryID)
{
_Default.GetDescriptionByID(categoryID,GetDescriptionByID_Callback);
}
function GetDescriptionByID_Callback(response)
{
if(response == null) return;
document.getElementById(“Display”).style.backgroundColor = “lightYellow”;
document.getElementById(“Display”).style.visibility = “visible”;
document.getElementById(“Display”).innerHTML = response.value;
}
Let’s check how this looks.
As, you can see the description is displayed at the bottom of the GridView control. Please keep in mind that this is done without any postback hence the page will not refresh and will increase performance.
I hope you like the article, happy coding!