Click here to Skip to main content
Click here to Skip to main content
Articles » Web Development » Ajax » General » Downloads
 
Add your own
alternative version

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.
AJAXTestWebSite.zip
AJAXTestWebSite
App_Code
App_Data
countriesDb.mdf
countriesDb_log.LDF
JS
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %>

<!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>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
    $(document).ready(OnReady);
    
    function OnReady() 
    {  
        //Handle the change event for the drop down list
        $("#drpContinent").change(onChange);        
    }    
        
    function onChange()
    { 
        //create the ajax request
        $.ajax
        ( 
            {
                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];
            
            dropDown.options.add(option);
        }
    }
    
    //Handle the callback on error
    function onError()
    {
        alert('something went wrong');
    }
    
    </script>
    
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <asp:ScriptManager ID="ScriptManager1" runat="server">
            </asp:ScriptManager>
            Select Continent:
            <asp:DropDownList ID="drpContinent" runat="server">
            </asp:DropDownList><br />
            <br />
            Select Country: &nbsp;
            <asp:DropDownList ID="drpCountry" runat="server">
            </asp:DropDownList>
        </div>
    </form>
</body>
</html>

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.

License

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): Windows Communication Foundation Development with Microsoft .NET Framework 4
 
If you like my articles, please visit my website for more: www.rahulrajatsingh.com[^]
Follow on   Twitter   Google+   LinkedIn

| Advertise | Privacy | Mobile
Web03 | 2.8.140721.1 | Last Updated 14 Jan 2013
Article Copyright 2012 by Rahul Rajat Singh
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid