Create a Website using Visual Studio 2010 then in Solution Explorer you will see Default.aspx, About.aspx pages are created.
Open your Default.aspx Page.Add jQuery Reference in your Default.aspx page either by google CDN or from local script directory. 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.
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 = "Sarvesh Mathur", _
.ID = 1 _
}, _
New Employee() With { _
.Fullname = "Rakesh Sinha", _
.ID = 2 _
}, _
New Employee() With { _
.Fullname = "Rounak Sinha", _
.ID = 3 _
}, _
New Employee() With { _
.Fullname = "Soumya Verma", _
.ID = 4 _
}, _
New Employee() With { _
.Fullname = "Terence Thakar", _
.ID = 5 _
}, _
New Employee() With { _
.Fullname = "Sanyara singh", _
.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
@ the end save and rin the project.