We will learn how to call asp.net page method using jQuery ajax with dropdownlist binding from database for that 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
|
If you observe above example we are calling [Web Method] in asp.net page using jQuery ajax method. Now run your application and check the output that would be like this
 |
Download sample code attached
.png)
0 comments:
Post a Comment
Note: only a member of this blog may post a comment.