Category >
ASP.NET
|| Published on :
Friday, January 15, 2016 || Views:
10021
||
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