Cascading dropdown in ASP.NET using JQuery Http Handler

Category > ASP.NET || Published on : Friday, January 15, 2016 || Views: 9010 || Cascading dropdown in ASP.NET using JQuery Http Handler


Introduction

Here Pawan Kumar will explain how to Cascading drop down in ASP.NET using JQuery HTTP Handler

Description

In previous post I have explained How to sum the value of gridview column using jquery in asp.net with example, How to compress response in asp.net with example, How to display progress indicator during ajax call in asp.net using jQuery, How to rotating image with ASP.NET 4.0 and C# with example, How to turn off submit button when it pressed in ASP.Net, Code Snippets - Sending SMS through ASP.NET, and many more articles.

Now I will explain How to Cascading dropdown in ASP.NET using JQuery Http Handler

So follow the steps to learn Cascading dropdown in ASP.NET using JQuery Http Handler

Cascading dropdown in ASP.NET using JQuery Http Handler

Default.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Untitled Page</title>
    <script src="_scripts/jquery-1.2.6.js" type="text/javascript"></script>
    <script language="javascript">
        $(document).ready(function () {
            $("#ddlStates").change(function () {
                $("#ddlCities").html("");
                var StateID = $("#ddlStates > option[@selected]").attr("value");
                if (StateID != 0) {
                    $.getJSON('LoadCities.ashx?StateID=' + StateID, function (cities) {
                        $.each(cities, function () {
                            //$("#ddlCities").append("<option value=" + this['ID'] + ">" + this['City'] + "</option>");

                            $("#ddlCities").append($("<option></option>").val(this['ID']).html(this['City']));

                        });
                    });
                }
            });

        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <table>
            <tr>
                <td>
                    State
                </td>
                <td>
                    <asp:DropDownList ID="ddlStates" runat="server">
                        <asp:ListItem Value="0">Select</asp:ListItem>
                        <asp:ListItem Value="1">Tamil Nadu</asp:ListItem>
                        <asp:ListItem Value="2">Karnataka</asp:ListItem>
                    </asp:DropDownList>
                </td>
            </tr>
            <tr>
                <td>
                    Cities
                </td>
                <td>
                    <select id="ddlCities" runat="server">
                    </select>
                </td>
            </tr>
            <tr>
                <td colspan="2">
                    <asp:Button ID="btnSave" runat="server" Text="Save" />
                </td>
            </tr>
        </table>
    </div>
    </form>
</body>
</html>

LoadCities.ashx

<%@ WebHandler Language="C#" Class="LoadCities" %>

using System;
using System.Web;
using System.Text;

public class LoadCities : IHttpHandler {
    
    public void ProcessRequest (HttpContext context) { 
        string StateID = context.Request.QueryString["StateID"];        
        //Contact Database to get th elist of cities based on StateID
        StringBuilder strCities = new StringBuilder();
        if (StateID == "1")
        {
            strCities.Append("[");

            strCities.Append("{");
            strCities.Append("\"City\":\"Chennai\",");
            strCities.Append("\"ID\":\"1\"");
            strCities.Append("},");

            strCities.Append("{");
            strCities.Append("\"City\":\"Coimbatore\",");
            strCities.Append("\"ID\":\"2\"");
            strCities.Append("}");

            strCities.Append("]");
        }
        else if (StateID == "2")
        {
            strCities.Append("[");

            strCities.Append("{");
            strCities.Append("\"City\":\"Bangalore\",");
            strCities.Append("\"ID\":\"1\"");
            strCities.Append("},");

            strCities.Append("{");
            strCities.Append("\"City\":\"Belgaum\",");
            strCities.Append("\"ID\":\"2\"");
            strCities.Append("}");

            strCities.Append("]");
        }
        context.Response.ContentType = "application/json";
        context.Response.ContentEncoding = Encoding.UTF8;
        context.Response.Write(strCities.ToString());
        context.Response.End();
    } 
    public bool IsReusable {
        get {
            return false;
        }
    }
}

 

Conclusion:

So, In this tutorial we have learned, Cascading dropdown in ASP.NET using JQuery Http Handler

Download Source Codes