how to bind dropdownlist in asp.net using jquery or JSON
|
|
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
Categories: JQUERY, C#, ASP.NET
Post a Comment
Oops!
The words you entered did not match the given text. Please try again.
Oops!
Oops, you forgot something.