Dropdown Binding Using AJAX

• Download source code - 31.9 KB

Introduction

This article tells you how to bind a dropdown list in another dropdown list's change event using AJAX.

Using the code

Download the source file from above. Create the tables which I have mentioned in the article, and create the required functions in your database. Update the name of the database in your web.config file.

In the 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;
        }
    }
}

In the HTML side:

<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()
{
    // ddlList.options[ddlList.selectedIndex].value;
    var countryId = document.getElementById("ddlList").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>

Here are the 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 is the SQL function used to get the tabs:

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 C.UserID=@UserID
)

Create the above tables and function in a database, and enter some values in those tables.

Note: In all the tables, the first column is considered the Primary key. Don't forget to change the name of the database in the web.config file.

Points of Interest

You can easily bind a dropdown list in another dropdown list's change event using AJAX by following this sample. Moreover, I have included another functionality in the Click event so you can bind a Repeater without page post back.