Bind dropdown list using JSON,JQuery in asp.net

Tuesday, 19 June 2012

Bind dropdown list using JSON,JQuery in asp.net

In this article i will show you how to bind a DropDownList using JSON, JQuery to avoid page refresh via a Web Method .It is very useful and many time we require to use Jquery Ajax.

Code to Bind dropdownlist in asp.net

Add code in "Default.aspx" page

download jquery.js

 
<head runat="server">
<title></title>
    
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript" language="javascript">
        $().ready(function () {
            $.ajax({
                type: "POST",
                url: "Default2.aspx/GetGenders",
                data: "{}",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (msg) {
                
                    $("#ddlGender").get(0).options.length = 0;
                    $("#ddlGender").get(0).options[0] = new Option
("Select Gender", "-1");

                    $.each(msg.d, function (index, item) {
                        $("#ddlGender")
.get(0).options[$("#ddlGender").get(0).options.length] = 
new Option(item.Display, item.Value);
                    });

                    $("#ddlGender").bind("change", function () {
                        GetNames($(this).val());
                    });
                },
                error: function () {
                    alert("Failed to load Genders");
                }
            });
        });

        function GetNames(genderID) {
            if (genderID > 0) {
                $("#ddlName").get(0).options.length = 0;
                $("#ddlName").get(0).options[0] = 
new Option("Loading names", "-1");

                $.ajax({
                    type: "POST",
                    url: "Default2.aspx/GetNames",
                    data: "{genderID:" + genderID + "}",
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    success: function (msg) {
                        $("#ddlName").get(0).options.length = 0;
                        $("#ddlName").get(0).options[0] = 
new Option("Select name", "-1");

                        $.each(msg.d, function (index, item) {
                            $("#ddlName")
.get(0).options[$("#ddlName").get(0).options.length] = 
new Option(item.Display, item.Value);
                        });
                    },
                    error: function () {
                        $("#ddlName").get(0).options.length = 0;
                        alert("Failed to load names");
                    }
                });
            }
            else {
                $("#ddlName").get(0).options.length = 0;
            }
        }
    </script>
    <style type="text/css">
        #ddlGender
        {
            width: 149px;
        }
        #ddlName
        {
            width: 146px;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div style="border:1px solid gray; width:400px;">
    <table border="0" cellpadding="0" cellspacing="0" 
        style="width: 353px; height: 149px">
                <tr align="center">
                    <th>
                        Gender
                    </th>
                    <td>
                        <select id="ddlGender">
                        </select>
                    </td>
                </tr>
                <tr align="center">
                    <th>
                        Name
                    </th>
                    <td>
                        <select id="ddlName">
                        </select>
                    </td>
                </tr>
            </table>
            </div>
    </form>
</body>

and in "Default.aspx.cs"


[WebMethod]
    public static ArrayList GetGenders()
    {
        return new ArrayList()
            {
                new { Value = 1, Display = "Male" },
                new { Value = 2, Display = "Female" }
            };
    }

    [WebMethod]
    public static ArrayList GetNames(int genderID)
    {
        if (genderID.Equals(1))
        {
            return new ArrayList()
                {
                    new { Value = 1, Display = "John" },
                    new { Value = 1, Display = "Tom" },
                    new { Value = 1, Display = "Harry" },
                    new { Value = 1, Display = "Bob" }
                };
        }
        else if (genderID.Equals(2))
        {
            return new ArrayList()
                {
                    new { Value = 1, Display = "Gauri" },
                    new { Value = 1, Display = "Rihana" },
                    new { Value = 1, Display = "Kate" },
                };
        }
        else
        {
            throw new ApplicationException("Invalid Gender ID");
        }
    }

The result is shown as