I had wrote this article sometime ago, the developer had a requirement to fill ASP.NET dropdownlist by fetching JSON data using jquery. I have used Employee class to get ID and Full Name to populate Dropdownlist by fetching JSON data using jquery on page load. Let’s start.
Open Your Visual Studio 2010. Click File -> New -> Website. Choose ASP.NET Website from the list of installed template, and target plate-form as .NET framework 4.0,now choose your Language Visual C#/Visual VB and enter the path where you want to create the website. I have created Dropdownjquery web site, Click OK Button to continue as shown below figure.
Website is created as you can see in Solution Explorer, Default.aspx, About.aspx pages are created. jQuery is also avaible in Website when you create a project/webstite in Visual Studio 2010.
Open your Default.aspx Page.Add jQuery Reference in your Default.aspx page. Drag and Drop Dropdownlist control from toolbar.
Add following script into your Default.aspx page as shown below.
<script src="Scripts/jquery-1.4.1.js"type="text/javascript"></script>
<script language="javascript">
$.ajax({
type: "POST",
url: "Default.aspx/fetchData",
data: "{}",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (response) {
var Dropdown = $('#<%=DropDownList1.ClientID %>');
Dropdown.append(new Option("SELECT", 0));
$.each(response.d, function (index, item) {
Dropdown.append(new Option(item.Fullname, item.ID));
});
},
error: function () {
alert("Failed to load data");
}
});
$(document).ready(function () {
var dropdown = $('#<%=DropDownList1.ClientID %>');
dropdown.change(function () {
$("#<%=msg.ClientID%>").text(dropdown.val());
});
});
</script>
Add Following code under the content of Default.aspx page
<h2>Fill Dropdown list using jQuery,JSON object</h2>
<p>
<asp:DropDownList ID="DropDownList1"runat="server"/>
</p>
<asp:Label ID="msg"runat="server"></asp:Label>
Open your Default.aspx.cs/.vb, create a WebMethod which will fetch Employee list as shown below code.
VB.NET
Imports System.Web.Services
Partial Class_Default
Inherits System.Web.UI.Page
<WebMethod()> _
Public Shared Function fetchData() As List(Of Employee)
Return New List(OfEmployee)() With { _
New Employee() With { _
.Fullname = "Aamir Hasan", _
.ID = 1 _
}, _
New Employee() With { _
.Fullname = "Awais Ahmed", _
.ID = 2 _
}, _
New Employee() With { _
.Fullname = "Mahwish Khan", _
.ID = 3 _
}, _
New Employee() With { _
.Fullname = "Saba Khan", _
.ID = 4 _
}, _
New Employee() With { _
.Fullname = "Hina Ahmed", _
.ID = 5 _
}, _
New Employee() With { _
.Fullname = "Gill Gate", _
.ID = 6 _
} _
}
EndFunction
EndClass
Public Class Employee
Public Property Fullname() AsString
Get
Return m_Fullname
End Get
Set(ByVal value AsString)
m_Fullname = value
End Set
End Property
Private m_Fullname AsString
Public Property ID() AsInteger
Get
Return m_ID
EndGet
Set(ByVal value AsInteger)
m_ID = value
EndSet
End Property
Private m_ID AsInteger
EndClas
C#
[WebMethod]
public static List<Employee> fetchData()
{
return new List<Employee>()
{
new Employee{ Fullname="Aamir Hasan", ID=1},
new Employee{ Fullname="Awais Ahmed", ID=2},
new Employee{ Fullname="Mahwish Khan", ID=3},
new Employee{ Fullname="Saba Khan", ID=4},
new Employee{ Fullname="Hina Ahmed", ID=5},
new Employee{ Fullname="Gill Gate", ID=6}
};
}
}
public class Employee
{
public string Fullname { get; set; }
public int ID { get; set; }
}
Note:Web Method should be static to call a function from client side to server side.
Press Cltr+F5 to save and display the Fill Dropdown list as shown in below figure.
Download
DropdownjQuery.zip (138.61 kb)
See live demo