Thursday, October 4

Data Binding in DropDownList Using Jquery


                     Here I have explained how to bind data in dropdownlist using jQuery.


                  In my previous article I have explained How to calculate difference between two dates using JQuery? , How to get Checkboxlist valuewith comma Separator by jquery.

Here I will explain how to bind dropdownlist using jQuery.As you wnow it will be light weight than other processes.

 Here I am doing one simple web application for binding data to dropdownlist  through JQuery.

 For this first you have to add one web page name it as your choice,here I have named it as JqueryDropDownList.aspx

 Just add some JS plugin inside Script Folder in Solution.i am using three plugin as

v  jquery-1.4.1.js

v  jquery-1.4.1.min.js

v  jquery-1.4.1-vsdoc.js

These above plugin is by default provided  by  VS-2010.

 Here is my Source code for  JqueryDropDownList.aspx:-


<%@ Page Language="C#" AutoEventWireup="true" CodeFile="JqueryDropDownList.aspx.cs"   

    Inherits="JqueryDropDownList" %>

   <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">

   <html xmlns="">

   <head runat="server">

    <link rel="shortcut icon" type="image/ico" href="  412l6srkp6t64dhat1l37vqj41/favicon.ico" />

    <title>shibashish Mohanty</title>

    <script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>

    <script type="text/javascript">

        $(document).ready(function () {


                type: "POST",

                url: "JqueryDropDownList.aspx/BindDropDown",

                data: "{}",

                contentType: "application/json; charset=utf-8",

                dataType: "json",

                success: function (msg) {



                    jQuery.each(msg.d, function () {




                error: function () {

                    alert("An error has occurred during processing your request.");







    <style type="text/css">



            color: #003300;




            background-color: #99CCFF;





    <form id="form1" runat="server">

    <h1>Om Namah Shivaya</h1>


        <fieldset style="background-position: center center; width: 200px; background-color: #66FFFF;">

            <legend><span class="style1"><strong><span class="style2">Binding DropDownList Using


            <div style="vertical-align: middle; text-align: center; width: 567px; margin-top: 78px;

                height: 58px;">

                <asp:DropDownList ID="DropDownList1" runat="server" Height="53px" Width="471px">








Here Take a look on Design View:-

Dropdownlist image

Here is my code Behind  JqueryDropDownList.aspx.cs:-


   using System;

   using System.Collections.Generic;

   using System.Linq;

   using System.Web;

   using System.Web.UI;

   using System.Web.UI.WebControls;

   using System.Collections;

   using System.Data;

   using System.Data.SqlClient;

   public partial class JqueryDropDownList : System.Web.UI.Page


    protected void Page_Load(object sender, EventArgs e)



    //Here we are created one WebMethod,Because we are calling this method by jquery


    public static ArrayList BindDropDown()


        DataClassesDataContext dc = new DataClassesDataContext();

        var x = from n in dc.Employees select n;

        DataTable dt = new DataTable();

        SqlConnection con = new SqlConnection(System.Configuration.ConfigurationManager.


        SqlCommand com = new SqlCommand("select * from Employee", con);

        SqlDataAdapter da = new SqlDataAdapter(com);


        ArrayList list = new ArrayList();

        for (int i = 0; i< dt.Rows.Count; i++)


            list.Add(new ListItem(dt.Rows[i][1].ToString(), dt.Rows[i][0].ToString()));


        return list;



Here is My Web.config:-


   <?xml version="1.0"?>



  < add name="ShibashishColapsibleGridDataBaseConnectionString"

    connectionString="Data Source=.\SQLEXPRESS; AttachDbFilename=|DataDirectory|\ShibashishColapsibleGridDataBase.mdf;

         Integrated Security=True;User Instance=True" providerName="System.Data.SqlClient"/>



   < compilation debug="true" targetFramework="4.0">

     < assemblies>

       < add assembly="System.Data.Linq, Version=, Culture=neutral,   PublicKeyToken=B77A5C561934E089"/>

     < /assemblies>

   < /compilation>




    Just take A look on my database as well as tables which I have used in my application

Inside App_data  I have used sql server database,take a look

mdf file

Now I have created two Table as

v  Employee

v  EmploeeFeedback

Employee Table OverView:-

Database Design

    I have used only Emploee table for this application hence,I have manually enter some data into Employee Table.Here is my data inside that Employee Table

Table Data

     Now run your Application And Here is the result

Before dropdown select

After dropdownlist select

As you have seen all the data bind into that dropdownlist using jQuery.

Hope you will like this article.

Keep coding……


Thanks Shibashish Mohanty

1 comment:

Please don't spam, spam comments is not allowed here.

shibashish mohanty