Aspdotnet-Suresh

aspdotnet-suresh offers C#.net articles and tutorials,csharp dot net,asp.net articles and tutorials,VB.NET Articles,Gridview articles,code examples of asp.net 2.0 /3.5,AJAX,SQL Server Articles,examples of .net technologies

how to bind dropdownlist in asp.net using jquery or JSON

Jul 18, 2012
Introduction

Here I will explain how to bind dropdownlist using JQuery ajax or JSON in asp.net.
Description:
  
In previous articles I explained
Bind gridview using JQuery in asp.net  and AutoComplete textbox with JQuery using asp.net. Now I will explain how to bind dropdownlist using JQuery or JSON in asp.net.
To implement this concept first design table in database and give name as Country as shown below
Column Name
Data Type
Allow Nulls
CountryId
int(set identity property=true)
No
CountryName
varchar(50)
Yes
After completion table design enter some of Country details in database to work for our sample and write the following code in your aspx page

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Bind Dropdownlist with JQuery in asp.net</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$.ajax({
type: "POST",
contentType: "application/json; charset=utf-8",
url: "Default.aspx/BindDatatoDropdown",
data: "{}",
dataType: "json",
success: function(data) {
$.each(data.d, function(key, value) {
$("#ddlCountry").append($("<option></option>").val(value.CountryId).html(value.CountryName));
});
},
error: function(result) {
alert("Error");
}
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:DropDownList ID="ddlCountry" runat="server" />
</div>
</form>
</body>
</html>
If you observe above code in header section I added script file link by using that file we have a chance to interact with JQuery. If you want to know about script function mentioned in header section check these posts JQuery AutoComplete textbox with database in asp.net and call asp.net page methods in JQuery.

Now open code behind file and add following namespaces


using System;
using System.Collections.Generic;
using System.Data;
using System.Data.SqlClient;
using System.Web.Services;
After that write the following code

C#.NET Code

protected void Page_Load(object sender, EventArgs e)
{

}
[WebMethod]
public static CountryDetails[] BindDatatoDropdown()
{
DataTable dt = new DataTable();
List<CountryDetails> details = new List<CountryDetails>();

using (SqlConnection con = new SqlConnection("Data Source=SureshDasari;Initial Catalog=MySampleDB;Integrated Security=true"))
{
using (SqlCommand cmd = new SqlCommand("SELECT CountryID,CountryName FROM Country", con))
{
con.Open();
SqlDataAdapter da = new SqlDataAdapter(cmd);
da.Fill(dt);
foreach (DataRow dtrow in dt.Rows)
{
CountryDetails country = new CountryDetails();
country.CountryId = Convert.ToInt32(dtrow["CountryId"].ToString());
country.CountryName = dtrow["CountryName"].ToString();
details.Add(country);
}
}
}
return details.ToArray();
}
public class CountryDetails
{
public int CountryId { get; set; }
public string CountryName { get; set; }
}
VB.NET Code:


Imports System.Collections.Generic
Imports System.Data
Imports System.Data.SqlClient
Imports System.Web.Services

Partial Class _Default
Inherits System.Web.UI.Page
Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs)

End Sub
<WebMethod()> _
Public Shared Function BindDatatoDropdown() As CountryDetails()
Dim dt As New DataTable()
Dim details As New List(Of CountryDetails)()

Using con As New SqlConnection("Data Source=SureshDasari;Initial Catalog=MySampleDB;Integrated Security=true")
Using cmd As New SqlCommand("SELECT CountryID,CountryName FROM Country", con)
con.Open()
Dim da As New SqlDataAdapter(cmd)
da.Fill(dt)
For Each dtrow As DataRow In dt.Rows
Dim country As New CountryDetails()
country.CountryId = Convert.ToInt32(dtrow("CountryId").ToString())
country.CountryName = dtrow("CountryName").ToString()
details.Add(country)
Next
End Using
End Using
Return details.ToArray()
End Function
Public Class CountryDetails
Public Property CountryId() As Integer
Get
Return m_CountryId
End Get
Set(ByVal value As Integer)
m_CountryId = Value
End Set
End Property
Private m_CountryId As Integer
Public Property CountryName() As String
Get
Return m_CountryName
End Get
Set(ByVal value As String)
m_CountryName = Value
End Set
End Property
Private m_CountryName As String
End Class
End Class
Now run your application and check the output that would be like this

Download sample code attached


If you enjoyed this post, please support the blog below. It's FREE!

Get the latest Asp.net, C#.net, VB.NET, jQuery, Plugins & Code Snippets for FREE by subscribing to our Facebook, Twitter, RSS feed, or by email.

subscribe by rss Subscribe by RSS subscribe by email Subscribe by Email

17 comments :

Ravi said...

This same code is not working without database
i.e., with static data of list, it is not working.
Please give me solution.

Anonymous said...

sir ur wats wrong wid ur web site,no body can see the demo and download the code

Suresh Dasari said...

it's working for us please check your internet connection and network permissions..

Anonymous said...

sir ur site is not looking good now and also it has design like menu bar wrong going on.This site is very helpful to every1,please check ur blog sir.and i cannot see the demo and also download the code.

Anonymous said...

may b network permissions does not allowed during office timing.but i will check my pc.thanks 4 reply.

Anonymous said...

thank you so much nice example

Anonymous said...

It is not worked with content page

Suresh Dasari said...

it will work in all pages. Please check your code and check the path what u have given to access the values...

Sam said...

Sir,thanx for this code, it working fine. But my requirement is that the dropdownlist should populate on a btn click. I tried to write same code in $(#btnID).click() but its not working for single click for double click data gets binded to ddl. Please Help!

Tapan said...

Hello sir,
How to populate one dropdownlist to another using Jquery or json ?

Parag Ghadge said...

The values comes in dropdownlist without refreshing page.
But now how to see values of selected index. Because we have disabled auto post back.

Thanks,
Parag.

Anonymous said...

sir i m creating dropdown dynamically using javascript and binded it with my databse but how we can set default text as --select-- and value as 0 in newly created dropdown.
and second thing : i have to remove those item that are already selected from dynamically created dropdown . that mean if i have 4 item in 1st and we have selected one item then the second drop down that is generated dynamically should contain only 3 item(except 1st dropdown selected item).
Thanks

Anonymous said...

Hi sir I am developing Windows Phone 7 App using phonegap.

i have one drop down list i want data added to ddl by using ajax json webservice .

how to do this ..?

Anonymous said...

Your way of explanation is appreciable. I like it...

Muhammad Raheel said...

Also share example of google chart sir ur blog is too useful for begineers as well as professionals

Anonymous said...

Hi Sir,
I have seen in many of the examples we use only web services to fetch the data and bind the controls.
Do we have any other option other than using web services?

Please provide your valuable information...!!!

Thanks in advance.

Anonymous said...

Can anyone please clarify the above mentioned comment/question?

Give your Valuable Comments

Other Related Posts

© 2010-2012 Aspdotnet-Suresh.com. All Rights Reserved.
The content is copyrighted to Suresh Dasari and may not be reproduced on other websites without permission from the owner.