Click here to Skip to main content
13,090,299 members (90,285 online)
Click here to Skip to main content
Articles » Web Development » Ajax » General » Downloads


112 bookmarked
Posted 12 Jun 2012

AJAX for Beginners (Part 2) - Using XMLHttpRequest and jQuery AJAX to implement a cascading dropdown

, 14 Jan 2013
This article talks about using XMLHttpReqqest and jQuery AJAX in ASP.NET applications.
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
<html xmlns="">
<head runat="server">
    <title>Ajax - jQuery AJAX Powered Cascaded drop down list</title>
    <script type="text/javascript" src="JS/jquery-1.7.2.js"></script>
    <script type="text/javascript">
    //When the socument is ready call the function OnReady
    function OnReady() 
        //Handle the change event for the drop down list
    function onChange()
        //create the ajax request
                type: "POST", //HTTP method
                url: "Default2.aspx/OnContinentChange", //page/method name
                data: "{'continentName':'"+$('#drpContinent').val() +"'}", //json to represent argument
                contentType: "application/json; charset=utf-8", 
                dataType: "json",
                success: callback,
                error: onError
    //Handle the callback on success
    function callback(msg)
        //handle the callback to handle response                
        //request was successful. so Retrieve the values in the response.
        var countries = msg.split(';');
        var length = countries.length;
        //Change the second dropdownlists items as per the new values foudn in response.
        //let us remove existing items
        document.getElementById('<%=drpCountry.ClientID %>').options.length = 0;
        //Now add the new items to the dropdown.
        var dropDown = document.getElementById('<%=drpCountry.ClientID %>');
        for(var i = 0; i < length - 1; ++i) 
            var option = document.createElement("option");
            option.text = countries[i];
            option.value = countries[i];
    //Handle the callback on error
    function onError()
        alert('something went wrong');
    <form id="form1" runat="server">
            <asp:ScriptManager ID="ScriptManager1" runat="server">
            Select Continent:
            <asp:DropDownList ID="drpContinent" runat="server">
            </asp:DropDownList><br />
            <br />
            Select Country: &nbsp;
            <asp:DropDownList ID="drpCountry" runat="server">

By viewing downloads associated with this article you agree to the Terms of Service and the article's licence.

If a file you wish to view isn't highlighted, and is a text file (not binary), please let us know and we'll add colourisation support for it.


This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


About the Author

Rahul Rajat Singh
Software Developer (Senior)
India India

I Started my Programming career with C++. Later got a chance to develop Windows Form applications using C#. Currently using C#, ASP.NET & ASP.NET MVC to create Information Systems, e-commerce/e-governance Portals and Data driven websites.

My interests involves Programming, Website development and Learning/Teaching subjects related to Computer Science/Information Systems. IMO, C# is the best programming language and I love working with C# and other Microsoft Technologies.

  • Microsoft Certified Technology Specialist (MCTS): Web Applications Development with Microsoft .NET Framework 4
  • Microsoft Certified Technology Specialist (MCTS): Accessing Data with Microsoft .NET Framework 4
  • Microsoft Certified Technology Specialist (MCTS): Windows Communication Foundation Development with Microsoft .NET Framework 4

If you like my articles, please visit my website for more:[^]

  • Microsoft MVP 2015

You may also be interested in...

Permalink | Advertise | Privacy | Terms of Use | Mobile
Web02 | 2.8.170813.1 | Last Updated 14 Jan 2013
Article Copyright 2012 by Rahul Rajat Singh
Everything else Copyright © CodeProject, 1999-2017
Layout: fixed | fluid