Dropdown Binding Using Ajax

• Download BindDropdown.zip - 34.2 KB

Introduction

This artical tells you how to bind the dropdwon in another dropdown change event using ajax

Background

(Optional) Is there any background to this article that may be useful such as an introduction to the basic ideas presented?

Using the code

Download the file from this site, Create the tables which i mentioned in the down of the artical,create the function in your database, and Change the name of the database in web.config file

Blocks of code should be set as style "Formatted" like this:

In Code Behind

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 Ganesh;
namespace MyAjaxSample
{
public partial class SampleforDatabind : System.Web.UI.Page
{
public static string connectionString = (string)ConfigurationManager.AppSettings["ConnectionString"];
public DataSet ds = new DataSet();
DBClass MyClass = new DBClass();
protected void Page_Load(object sender, EventArgs e)
{
AjaxPro.Utility.RegisterTypeForAjax(typeof(SampleforDatabind));
if (!IsPostBack)
{
ddlList.DataSource = MyClass.GetDataSet("Select * from Users");
ddlList.DataTextField = "UserName";
ddlList.DataValueField = "UserID";
ddlList.DataBind();
ddlList.Items.Add("--Select table--");
ddlList.SelectedIndex = ddlList.Items.Count - 1;
}
}

[AjaxPro.AjaxMethod]
public DataSet GetDataSet() 
{
SqlConnection myConnection = new SqlConnection(connectionString); 
SqlDataAdapter ad = new SqlDataAdapter("SELECT * FROM Tabs",myConnection);
ad.Fill(ds, "Tabs");
return ds;
}
[AjaxPro.AjaxMethod]
public DataSet GetTabSet(int UserId)
{
SqlConnection myConnection = new SqlConnection(connectionString);
SqlDataAdapter ad = new SqlDataAdapter("SELECT * FROM GetRoleTabs(" + UserId + ")", myConnection);
ad.Fill(ds, "Tabs");
return ds;
}
}
}
Remember to set the Language of your code snippet using the Language dropdown.

In Html Side

<script language="javascript"></script><script language="javascript">
function BindDatatoTable()
{
     MyAjaxSample.SampleforDatabind.GetDataSet(BindDatatoTable_callback);
}
function BindDatatoTable_callback(responce)
{
if(responce.error == null) 
{ 
var ds = responce.value;
if(ds!= null && typeof(ds) == "object" && ds.Tables!=null)
{
var s = new Array();
s[s.length] = "<table border = 1 cellpadding=0 cellspacing=0 bordercolor=blue >";
for(var i=0;i<ds.Tables[0].Rows.length;i++)
{
s[s.length] = "<tr>";
s[s.length] = "<td>" + ds.Tables[0].Rows[i].TabID + "</td>";
s[s.length] = "<td>" + ds.Tables[0].Rows[i].TabName + "</td>";
s[s.length] = "<td>" + ds.Tables[0].Rows[i].Remarks + "</td>";
s[s.length] = "</tr>";
}
s[s.length] = "</table>";
document.getElementById("Display1").innerHTML = s.join("");
} 
} 
}
function GetTabSet()
{
var countryId = document.getElementById("ddlList").value;// ddlList.options[ddlList.selectedIndex].value;

MyAjaxSample.SampleforDatabind.GetTabSet(countryId, GetTabSet_CallBack);
}
function GetTabSet_CallBack(response)
{
if (response.error != null)
{
alert(response.error); 
return;
}
var states = response.value; 
if (states == null || typeof(states) != "object")
{
return;
}
var statesList = document.getElementById("ddlItemList");
statesList.options.length = 0; 
for (var i = 0; i < response.value.Tables[0].Rows.length; ++i)
{
statesList.options[statesList.options.length] = new Option(response.value.Tables[0].Rows[i].TabName,response.value.Tables[0].Rows[i].TabID);
}
}
</script>

//See the Change event call here

<div>
<input id="btnLoad" type="button" value="Load Data" onclick="BindDatatoTable();" /></div>
<span id="Display1" title="Loading the Data from the Database using Ajax">Loading the Data from the Database using Ajax</span>
<br /><p>Menu</p>
<asp:DropDownList ID="ddlList" onchange="GetTabSet()" runat="server"></asp:DropDownList>
<asp:DropDownList ID="ddlItemList" runat="server" ></asp:DropDownList>
</div>

Tables Used in this Example

CREATE TABLE Tabs (TabID varchar(50) ,TabName varchar(50),Remarks varchar(50) )
Create Table RolePermission (PermissionID varchar(50),RoleID varchar(50),TabID varchar(50),Show Varchar(50))
Create Table UserRole (UserRoleID Varchar(50),UserID Varchar(50),RoleID Varchar(50))
Create Table Roles (RoleID Varchar(50),RoleName Varchar(50),Remarks Varchar(50))
Create Table Users (UserID varchar(50),Username varchar(50),Password(10))

Here i have used SQL functions to get the Tabs, The Function is

ALTER FUNCTION [dbo].[GetRoleTabs] 
( 
@UserID varchar(20)
)
RETURNS TABLE 
AS
RETURN 
(
Select A.TabID,A.TabName from Tabs A,RolePermission B,UserRole C where A.TabID=B.TabID and b.RoleID=C.RoleID AND B.Show=1
AND "mailto:C.UserID=@UserID)">C.UserID=@UserID
)

Create the Above mentioned tables and Fuction in a database , enter some values in those tables.

Note : All the table first column as consider as Primary key. and Dont' forget to change the name of the database in the web.config file

Use the "var" button to to wrap Variable or class names in <code> tags like this.

Points of Interest

You can easily bind the dropdown list in another dropdown change event using ajax easily by following this sample and more over i have included the another functionality is in click event you can bind the repeater with out page post back

History

Keep a running update of any changes or improvements you've made here.