Recently in one of my project, I need to create a cascading dropdown list. There is no such control in asp.net out of the box. So I decided to create my own. Check out the following code snippet.
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="AppCallBack.aspx.cs" Inherits="AppCallBack" %>
<!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 runat="server">
<title></title>
<script type="text/javascript">
function ReceiveServerData(arg, context) {
var cmd_content = arg.split(',');
if (cmd_content[0] == 'LoadSubCategory') {
document.getElementById('ddlSubcategories').innerHTML = cmd_content[1];
}
else {
document.getElementById('grvProducts').innerHTML = cmd_content[1];
}
}
function CallSrv(ddl) {
if (ddl.id == 'ddlCategories') {
if (ddl.value != 'Select') {
CallServer('LoadSubCategory' + ',' + ddl.value, '');
}
}
else {
CallServer('LoadProducts' + ',' + ddl.value, '');
}
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<b>Categories:</b>
<br />
<asp:DropDownList ID="ddlCategories" runat="server" Width="100" onchange="CallSrv(this);">
</asp:DropDownList>
<br />
<b>Subcategories</b>:
<div id="ddlSubcategories">
</div>
<b>Products:</b>
<div id="grvProducts">
</div>
</div>
</form>
</body>
</html>
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data;
using System.Text;
using System.IO;
public partial class AppCallBack : System.Web.UI.Page, ICallbackEventHandler
{
public string RenderedOutput = "";
protected void Page_Load(object sender, EventArgs e)
{
ClientScriptManager scriptMgr = Page.ClientScript;
String cbReference = scriptMgr.GetCallbackEventReference(this, "arg", "ReceiveServerData", "");
String callbackScript = "function CallServer(arg, context) {" + cbReference + "; }";
scriptMgr.RegisterClientScriptBlock(this.GetType(), "CallServer", callbackScript, true);
if (!Page.IsPostBack)
{
//Load Products Data
this.ddlCategories.Items.Add("Select");
this.ddlCategories.Items.Add("Autos");
this.ddlCategories.Items.Add("Electronics");
}
}
public void RaiseCallbackEvent(string eventArgument)
{
string[] commands = eventArgument.Split(",".ToCharArray());
if (commands[0].Equals("LoadSubCategory"))
{
DropDownList ddlSubcategories = new DropDownList();
switch (commands[1])
{
case "Autos":
ddlSubcategories.Items.Add("Cars");
ddlSubcategories.Items.Add("Bikes");
break;
case "Electronics":
ddlSubcategories.Items.Add("Computers");
ddlSubcategories.Items.Add("TV");
break;
}
ddlSubcategories.Attributes.Add("onchange", "CallSrv(this);");
StringBuilder sb = new StringBuilder();
StringWriter sw = new StringWriter(sb);
HtmlTextWriter htw = new HtmlTextWriter(sw);
ddlSubcategories.RenderControl(htw);
this.RenderedOutput = "LoadSubCategory," + sb.ToString();
}
else if (commands[0].Equals("LoadProducts"))
{
DataTable dtProducts = new DataTable();
dtProducts.Columns.Add("Name");
dtProducts.Columns.Add("Description");
dtProducts.Columns.Add("Price");
DataRow drProduct;
switch (commands[1])
{
case "Cars":
drProduct = dtProducts.NewRow();
drProduct["Name"] = "Car1";
drProduct["Description"] = "XXX CCC";
drProduct["Price"] = "$1000";
dtProducts.Rows.Add(drProduct);
drProduct = dtProducts.NewRow();
drProduct["Name"] = "Car2";
drProduct["Description"] = "YYY CC";
drProduct["Price"] = "$800";
dtProducts.Rows.Add(drProduct);
break;
case "Bikes":
drProduct = dtProducts.NewRow();
drProduct["Name"] = "Bike1";
drProduct["Description"] = "XXX CCC";
drProduct["Price"] = "$100";
dtProducts.Rows.Add(drProduct);
drProduct = dtProducts.NewRow();
drProduct["Name"] = "Bike2";
drProduct["Description"] = "YYY CC";
drProduct["Price"] = "$150";
dtProducts.Rows.Add(drProduct);
break;
case "Computers":
drProduct = dtProducts.NewRow();
drProduct["Name"] = "Computer1";
drProduct["Description"] = "P4 ";
drProduct["Price"] = "$400";
dtProducts.Rows.Add(drProduct);
drProduct = dtProducts.NewRow();
drProduct["Name"] = "Computer2";
drProduct["Description"] = "P III";
drProduct["Price"] = "$350";
dtProducts.Rows.Add(drProduct);
break;
case "TV":
drProduct = dtProducts.NewRow();
drProduct["Name"] = "TV1";
drProduct["Description"] = "Flat";
drProduct["Price"] = "$600";
dtProducts.Rows.Add(drProduct);
drProduct = dtProducts.NewRow();
drProduct["Name"] = "TV2";
drProduct["Description"] = "B &W";
drProduct["Price"] = "$550";
dtProducts.Rows.Add(drProduct);
break;
}
GridView grvProducts = new GridView();
grvProducts.DataSource = dtProducts;
grvProducts.DataBind();
StringBuilder sb = new StringBuilder();
StringWriter sw = new StringWriter(sb);
HtmlTextWriter htw = new HtmlTextWriter(sw);
grvProducts.RenderControl(htw);
this.RenderedOutput = "LoadProducts," + sb.ToString();
}
}
public string GetCallbackResult()
{
return RenderedOutput;
}
}