Dotnetplace.com

.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

Advertise

Loading...


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">
       $.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

Category: All | ASP.NET | jQuery | VB.NET
Protected by Copyscape Online Plagiarism Tool

Comments (10) -

aamirhasan
aamirhasan United Kingdom
10/6/2011 5:07:38 AM #

If you have alternative solution, Please comments here to share with us.

jquerynewbie
jquerynewbie United States
2/8/2012 11:16:58 AM #

Thanks for the above.  With dynamically creating the dropdownlist1, how are you handling any click events?  I had to disable 'EnableEventValidation' to reach my code behind (fine for testing, will find alternative when its live).  On a click event when I try to save the selecteditem.value from dropdownlist1 I get 'object reference not set to an instance of an object'.  How are you handing that?

Thanks!

shubham saxena
shubham saxena India
2/13/2012 1:55:32 AM #

Given code will not work with Internet Explorer.Please provide me solution..

asdfasdf
asdfasdf United States
4/10/2012 4:42:28 PM #

adsfasdf

Accept
Accept United States
4/29/2012 1:12:09 PM #

adfasdfsdf

test
test Singapore
5/18/2012 11:31:23 PM #

www.developerscode.com/search/label/Sessions

SimpleScripts
SimpleScripts United States
7/7/2012 11:29:16 PM #

Very detailed post! To be sure with above poster! I’ve your site bookmarked!

Carroll B. Merriman
Carroll B. Merriman United States
1/5/2015 10:28:20 AM #

thank you

Mongoose BMX
Mongoose BMX United States
1/13/2015 12:44:08 PM #

@Admin, is this a Wordpress theme? Can you point me to where you purchased it?

Kurt Reino
Kurt Reino United States
1/29/2015 8:13:20 PM #

Way cool! Some very valid points! I appreciate you writing this post and also the rest of the site is extremely<br />good. http://www.bararabere.com

Wilber Rosamond
Wilber Rosamond United States
6/14/2015 1:49:06 AM #

Wow, superb blog layout! How long have you been blogging for? you make blogging look easy. The overall look of your site is fantastic, as well as the content!

sun
sun United States
6/22/2015 4:00:51 AM #

Heya i am for the first time here. I found this board and I find It truly useful & it helped me out much. I hope to give something back and aid others like you aided me.

Myron Mcdannell
Myron Mcdannell United States
6/28/2015 12:42:31 PM #

Hey there would you mind letting me know which hosting company you're using? I've loaded your blog in 3 different web browsers and I must say this blog loads a lot quicker then most. Can you recommend a good hosting provider at a fair price? Kudos, I appreciate it!|

Olympia Westwood
Olympia Westwood United States
7/1/2015 7:42:14 AM #

I'll immediately grasp your rss as I can't find your email subscription link or e-newsletter service. Do you've any? Kindly allow me recognize so that I could subscribe. Thanks.|

Photo Video Booth Rental
Photo Video Booth Rental United States
7/8/2015 6:56:54 PM #

Hi there, just became aware of your blog through Google, and found that it is really informative. I'm gonna watch out for brussels. I'll be grateful if you continue this in future. Lots of people will be benefited from your writing. Cheers!

Alyson Romesburg
Alyson Romesburg United States
7/9/2015 12:15:39 PM #

I will immediately snatch your rss feed as I can not find your email subscription link or newsletter service. Do you have any? Please permit me know so that I may just subscribe. Thanks.|

Cicely Pomo
Cicely Pomo United States
7/13/2015 3:20:34 AM #

I go to see every day some blogs and sites to read articles, but this webpage provides feature based content.|

Add comment

  Country flag

biuquote
  • Comment
  • Preview
Loading

Advertizement 1
Advertizement 2
Advertizement 3
Advertizement 4
Advertizement 5