Pages

Ruchi Tech

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 

22 comments:

  1. nice for more visit changevssame
    changevssame.blogspot.com

    ReplyDelete
  2. Croma campus is best IT training institute and best class IT trainer provides croma campus is great jquery training in noida wiht jo b placement support. croma campus best facilities and lab provides then best option for you join us croma campus

    ReplyDelete
  3. Thank you. I got much useful information from this post. Please keep sharing
    ASP.NET Training in Delhi

    ReplyDelete
  4. All are saying the same thing repeatedly, but in your blog I had a chance to get some useful and unique information, I love your writing style very much, I would like to suggest your blog in my dude circle, so keep on updates.
    python Training in Pune
    python Training in Chennai
    python Training in Bangalore

    ReplyDelete
  5. I simply wanted to write down a quick word to say thanks to you for those wonderful tips and hints you are showing on this site.
    Python Online certification training
    python Training institute in Chennai
    Python training institute in Bangalore

    ReplyDelete
  6. Very nice post here and thanks for it .I always like and such a super contents of these post.Excellent and very cool idea and great content of different kinds of the valuable information's.
    AWS Training in pune
    AWS Online Training

    ReplyDelete
  7. Nice tips. Very innovative... Your post shows all your effort and great experience towards your work Your Information is Great if mastered very well.
    Data Science Training in Indira nagar
    Data Science Training in btm layout
    Data Science Training in Kalyan nagar
    Data Science training in Indira nagar
    Data science training in bangalore

    ReplyDelete
  8. I ReGreat For Your Information The Information U have Shared Is Fabulous And Interesting So Please keep Updating Us The Information Shared Is Very Valuable Time Just Went On Reading The Article Python Online Course AWS Online Course Data Science Online Course Hadoop Online Course

    ReplyDelete
  9. I ReGreat For Your Information The Information U have Shared Is Fabulous And Interesting So Please keep Updating Us The Information Shared Is Very Valuable Time Just Went On Reading The Article Python Online Course AWS Online Course Data Science Online Course Hadoop Online Course

    ReplyDelete

  10. Its a wonderful post and very helpful, thanks for all this information.
    ASP.Net Training in Delhi

    ReplyDelete
  11. Thanks for your great and helpful presentation I like your good service. I always appreciate your post. That is very interesting I love reading and I am always searching for informative information like this. Also Checkout:CEH Training In Hyderabad

    ReplyDelete
  12. Amazing article. Your blog helped me to improve myself in many ways thanks for sharing this kind of wonderful informative blogs in live.
    IT Institute in KK nagar | angularjs training in chennai | dot net training in chennai | Web Designing Training in Chennai

    ReplyDelete
  13. MP Board 12th Class Blueprint 2021 English Medium & Hindi Medium PDF download, MPBSE 12th Blueprint 2021 Pdf Download, mpbse.nic.in 12th Blue Print, Marking Scheme and Arts, Commerce and Science Streams Chapter wise Weightage pdf download. MP Board 12th Blue Print || MPBSE 12th Model Papers || MPBSE 10th Model Papers

    Manabadi AP Intermediate 2nd Year Model Question Paper 2021 MPC, BIPC, CEC, MEC group TM, EM Subject wise Blue Print, Download BIEAP Intermediate Second Year Model Question Papers, AP Senior Inter Test Papers, Chapter wise important Questions download. || AP Inter MPC, Bi.PC, CEC Blue Print || AP Inter 1st / 2nd Year Model Papers || AP 2nd year inter Test Papers

    Kar 1st / 2nd PUC Blue Print

    ReplyDelete