Friday, December 26, 2008

Fill DropDownList By Using Professional Ajax (AjaxMethod Attribute and CallBack)

Hi..
Today I am going to post a very Basic but very important example .This is the example of the professional Ajax showing the usage of the "[Ajax.AjaxMethod()]" attrubute.
Here in this example i am just showing a string message and bind a dropdownList in javascript by calling the server side methods in javascript.
This is very basic example You can modify it according to your need .
Before doing all this you have to add refernce of ajax.dll in bin folder.
you can download the a sample project from HERE . This Project includs the ajax.dll also. you can get the dll from this link by downloading the sample project.

The step taken in this example are as given below.


Step 1.) Modification in web.config file
put the "< add verb="POST,GET...." in the HttpHandlers section in web.config as given below.

[system.web]
[httpHandlers]
[add verb="POST,GET" path="ajax/*.ashx"
type="Ajax.PageHandlerFactory, Ajax"/]
[/httpHandlers]


Step 2.) Make the AjaxMethod which we have to call in Javascript in Desgn file of the page Suppose we have the page
Test1.aspx in the folder "Sanjeev" (Sanjeev/Test1.aspx)
so the .cs file of the page looks like as given below..
Here the important things are :
A.) Ajax.Utility.RegisterTypeForAjax(typeof(Sanjeev_Test1));
Where "Sanjeev_Test1" is the Name of the ppartial class of the page.
B.) We have to put "[Ajax.AjaxMethod()]" attrubute before the method body.
=========================================================
using System;
using System.Data;
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;
public partial class Sanjeev_Test1 : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
Ajax.Utility.RegisterTypeForAjax(typeof(Sanjeev_Test1));
}
[Ajax.AjaxMethod()]
public string GetName()
{
//to alert the simple string message to test
return "Sanjeev Kumar Chauhan";
}
[Ajax.AjaxMethod()]
public DataSet getDataSet()
{
//use to get the DataSet by which we have to bind the
//DropdownList
DataSet ds = new DataSet();
DataTable dt = new DataTable();
DataColumn dcText = getDataColumn("Text");
DataColumn dcValue = getDataColumn("Value");
dt.Columns.Add(dcText);
dt.Columns.Add(dcValue);
string strName = "Name";
string strValue = "sanjeev";
for (int i = 0; i < 6; i++)
{
DataRow dr = dt.NewRow();
dr[dcText] = strName + i.ToString();
dr[dcValue] = strValue + i.ToString();
dt.Rows.Add(dr);
}
ds.Tables.Add(dt);
return ds;
}
public DataColumn getDataColumn(string ColName)
{
DataColumn dc = null;
dc = new DataColumn(ColName, System.Type.GetType("System.String"));
return dc;
}
}
==================================================
3.) the aspx file of the page :

[%@ Page Language="C#" AutoEventWireup="true" CodeFile="Test1.aspx.cs" Inherits="Sanjeev_Test1" %]
[!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" ]
[head id="Head1" runat="server"]
[title]Untitled Page[/title]
[script language="javascript" type="text/javascript"]
// function GetTasks() //Using Call Back
// {
// Sanjeev_Test1.GetName(GetName_CallBack);
// }
//function GetName_CallBack(response)//The CallBack function
// {
// alert(response.value);
// return false;
// }
// Without Using Call Back this also works properly
function GetTasks()
{
var str = Sanjeev_Test1.GetName();
alert(str.value);
}
function getDS()
{
var resp = Sanjeev_Test1.getDataSet();
var ds = resp.value;
if(ds.Tables[0].Rows.length == 0 )
{

// document.getElementById("ddl").options.length=0;
alert("There is no Term");
}
else
{
document.getElementById("ddl").options.length=0;
if(ds.Tables[0].Rows.length ] 0 )
{
for(var i=0; i[ds.Tables[0].Rows.length; i++)
{
var o = document.createElement("option");
o.value = ds.Tables[0].Rows[i].Value;
o.text = ds.Tables[0].Rows[i].Text;
document.getElementById('ddl').add(o);
}
}
}
}
[/script]
[/head]
[body]
[form id="form1" runat="server"]
[div]
[input type="button" id="btnHTML" value="ShowName" onclick="return GetTasks();" /]
[br /]
[input type="button" value="Fill DropDown" onclick="getDS();" /]
[asp:DropDownList ID="ddl" runat="server"]
[/asp:DropDownList]
[/div]
[/form]
[/body]
[/html]
================================================================
I hope you will enjoy this.
Thanks :
Sanjeev Kumar
HelpOnDeskTeam

11 comments:

helpondesk said...

Hi sanjeev This is code block is Excelent and i used it in my project for fill dropdowns of subcategory and available user name. This is so
simple. Thanks a lot

Priyank said...

Simple and sober
Nice work.

Anonymous said...
This comment has been removed by a blog administrator.
Anonymous said...
This comment has been removed by a blog administrator.
Anonymous said...
This comment has been removed by a blog administrator.
Anonymous said...
This comment has been removed by a blog administrator.
Anonymous said...
This comment has been removed by a blog administrator.
Anonymous said...
This comment has been removed by a blog administrator.
Anonymous said...
This comment has been removed by a blog administrator.
Anonymous said...
This comment has been removed by a blog administrator.
Anonymous said...
This comment has been removed by a blog administrator.