Join Dotnetcodes DotnetCodes.com is online Discussion Forum for Software professionals . It lets you find friends around the world and Create professional network that share similar interests as you. Get help on ur projects by industry specialists. Also get answers to all ur technical/placement related querries.Get an edge over others.
Already MemberClick here to login
ASP.net MVC Interview Questions Answers Interview Questions
Serial Number in SSRS Articles
How to Print a Crystal Report direct to printer Articles
Get Started Developing for Android Apps with Eclipse Articles
Razor View Engine Interview Questions Answers Interview Questions
.Net framework 4.0 Interview Questions Answers Interview Questions
SQL server reporting services Interview Questions (SSRS) part 1 Articles
Whats New in ASP.NET 4.0 Part 2 Articles
Difference between Encapsulation and Abstraction Interview Questions
Explaining SDLC -System Development Life Cycle Articles
SPIRE PDF Library Articles
Infosys Interview Questions Interview Questions
Html5 interview questions and answers Interview Questions
Dynamic Menu using HTML List Tag and CSS in ASP.Net Articles
SharePoint 2010 interview Questions Answers Interview Questions
Submit Articles | More Articles..

Populate or bind Dropdownlist in Asp.net using Jquery and Json

Posted By: rakesh On:3/18/2013 11:16:29 AM in:Articles Category:JQwery Hits:8074
Here you will learn how to populate dropdownlist in Asp.net using Jquery and JSON 

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.


comments powered by Disqus
User Profile
Rakesh Sinha
Sr. Technical Lead
New Delhi , India
Email :You must Log In to access the contact details.
Latest Post from :rakesh
Hacked By 4xroix
View: 36 | Submitted on: 5/28/2019 9:07:35 PM
Which party you want to vote in Loksabha elections 2019?
View: 805 | Submitted on: 10/12/2018 5:59:06 PM
Response.Redirect vs Server.Transfer
View: 509 | Submitted on: 12/27/2015 2:26:38 PM
The test form is only available for requests from the local machine.
View: 778 | Submitted on: 11/3/2015 9:54:36 PM
Difference between web service WCF and Web API
View: 7988 | Submitted on: 10/28/2015 9:23:51 PM
Submit Articles | All Post of This User..


Advertise About Us Private Policy Terms of use
All rights reserved to dotnetcodes. Logos, company names used here if any are only for reference purposes and they may be respective owner's right or trademarks.
Best viewed at 1024 x 768 resolution with Internet Explorer 5.0 or Mozila Firefox 3.5 or Google Crome and higher