How To create Cascade dropdownlist using asp.net callback.


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;

    }
}

Post a Comment

Please do not post any spam link in the comment box😊

Previous Post Next Post

Blog ads

CodeGuru