Fill Dropdown Using Ajax

Read The Full Tutorial.

In this tutorial you will know how to bind the dropdwon in another dropdown change event using ajax,create the function in your database, and Change the name of the database in web.config file

 Collapse

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
Collapse

<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
Collapse

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 we used SQL functions to get the Tabs

Collapse

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
)