Introduction:
Here I will explain how to bind dropdownlist using JQuery ajax or JSON in asp.net.
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.
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 Email
|
|||
20 comments :
This same code is not working without database
i.e., with static data of list, it is not working.
Please give me solution.
sir ur wats wrong wid ur web site,no body can see the demo and download the code
it's working for us please check your internet connection and network permissions..
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.
may b network permissions does not allowed during office timing.but i will check my pc.thanks 4 reply.
thank you so much nice example
It is not worked with content page
it will work in all pages. Please check your code and check the path what u have given to access the values...
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!
Hello sir,
How to populate one dropdownlist to another using Jquery or json ?
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.
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
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 ..?
Your way of explanation is appreciable. I like it...
Also share example of google chart sir ur blog is too useful for begineers as well as professionals
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.
Can anyone please clarify the above mentioned comment/question?
hi, Thank you.. It worked in single page. But it does not work while using master page and content page. Is there any extra details to work in it ?
hi,
It works in single webform. But not working correctly in master page using webservice.asmx. The data is coming to browser. I saw by inspecting browser. But not showing in dropdown. Please help me. Got stucked.
i have done this code but they are not proprly work
Note: Only a member of this blog may post a comment.