.NET Articles, Web Devploment, ASP.NET, HTML, Sharepoint 2010, Aamir Hasan
Advertise Here
Advertise Here
Advertise Here
Advertise Here
Advertise Here
Advertise Here
Advertise Here
Advertise Here
Advertise Here



Posted by Aamir Hasan   on Sunday, October 2, 2011 Total Views:  

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">
           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 () {

Add Following code under the content of Default.aspx page
  <h2>Fill Dropdown list using jQuery,JSON object</h2>
       <asp:DropDownList ID="DropDownList1"runat="server"/>
   <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 = "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 _
        } _

Public Class Employee
   Public Property Fullname() AsString
           Return m_Fullname
       End Get
       Set(ByVal value AsString)
           m_Fullname = value
       End Set
   End Property
   Private m_Fullname AsString
   Public Property ID() AsInteger
           Return m_ID
       Set(ByVal value AsInteger)
           m_ID = value
   End Property
   Private m_ID AsInteger






   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 (138.61 kb)

See live demo

Category: All | ASP.NET | jQuery | VB.NET
Protected by Copyscape Online Plagiarism Tool
championship riven
championship riven United States
7/1/2016 1:43:27 PM #

Brilliant article - thank you a big amount for creating this. Keep going!

Lynsey Topolski
Lynsey Topolski United States
7/11/2016 5:37:16 PM #

I wanted to thank you for this great read!! I certainly loved every bit of it. I have got you book-marked to check out new stuff you post¡­

Jannette Ferrio
Jannette Ferrio United States
7/13/2016 8:03:03 AM #

Thanks for your write-up on this web site. From my personal experience, often times softening up a photograph may provide the photographer with a little bit of an imaginative flare. Sometimes however, that soft clouds isn't what precisely you had as the primary goal and can often times spoil a normally good image, especially if you anticipate enlarging it.

Add comment

  Country flag

  • Comment
  • Preview

Advertizement 1
Advertizement 2
Advertizement 3
Advertizement 4
Advertizement 5