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
|
|||
|
|
10 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 ?