How to populate dropdown on client side using Web service and Jquery ?



Hi
If we populate the dropdown on client side using web service and jquery, it will give very good performance as compare to server side method.

These are the few steps to do this task
It is very much similar to this post. Here we have to do the few changes in web service
1. Add this namespace in web service
using System.Web.Script.Services;
2. Add this code below the web method
[ScriptMethod(ResponseFormat = ResponseFormat.Json, UseHttpGet = true)]

Complete code is like this

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Services;
using Test;
using System.Data.SqlClient;
using System.Data;
using System.Web.Script.Services;

///

/// Summary description for WebService
///

[WebService(Namespace = “http://tempuri.org/”)]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
// To allow this Web Service to be called from script, using ASP.NET AJAX, uncomment the following line.

[System.Web.Script.Services.ScriptService]
public class WebService : System.Web.Services.WebService {

[WebMethod]
[ScriptMethod(ResponseFormat = ResponseFormat.Json, UseHttpGet = true)]
public List FindAllCountries()
{
List locations = new List();
string connectionString =
“Data Source=.;Initial Catalog=Test;Integrated Security=True”;
using (SqlConnection connection = new SqlConnection(connectionString))
{
using (SqlCommand command = new SqlCommand())
{
command.Connection = connection;
command.CommandText = “SelectAllCountries”;
command.CommandType = CommandType.StoredProcedure;
connection.Open();
using (SqlDataReader dataReader = command.ExecuteReader())
{
Location location;
if (dataReader != null)
while (dataReader.Read())
{
location = new Location();
location.CountryID = (int)dataReader[“CountryID”];
location.CountryName = Convert.ToString(dataReader[“CountryName”]);
locations.Add(location);
}
}
}
}
return locations;
}

}

In default page we have to call the web service using Jquery like this

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default_Jquery1.aspx.cs" Inherits="WebService_Test_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;

<html xmlns="http://www.w3.org/1999/xhtml"&gt;
<head id="Head1" runat="server">
<title></title>
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script&gt;

<script language="javascript" type="text/javascript">
$(document).ready(function() {
$.ajax({
type: "GET",
url: "../WebService.asmx/FindAllCountries",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function(response) {
var ddl1 = response.d;
for (var i = 0; i < ddl1.length; i++) {
var selectOption = $(document.createElement(‘option’));
$(‘#ddl1’).append(selectOption.val(ddl1[i].CountryID).html(ddl1[i].CountryName)
);
}
},
failure: function(errMsg) {
$(‘#errMessage’).text(errMsg);
}
});
});
</script>

</head>
<body>
<form id="form1" runat="server">
<div>

<select id="ddl1">
<option>Select</option>
</select>
<div id="errMessage"></div>

</div>
</form>
</body>
</html>

Advertisement

16 thoughts on “How to populate dropdown on client side using Web service and Jquery ?

  1. I don’t even know the way I ended up right here, but I assumed this post was good. I don’t understand
    who you are but definitely you are going to a well-known blogger for
    those who aren’t already. Cheers!

    • Chandra Dev June 5, 2013 / 5:21 pm

      Thank for your kind words and motivating me to do good work.

  2. Ada June 5, 2014 / 2:41 am

    It’s tгuly a greeat and helpful piece of info.
    I’m satisfied tҺat you just shared thіs helpful
    infoгmation wіtɦ սs. Pleaase keep uѕ up to date like this.
    Thanks forr sharing.

  3. technique based sales June 8, 2014 / 9:11 am

    I just liқe thhe helpfjl іnformation you provide oon ʏоur
    articles. ӏ’ll bookmark your blopg ɑnd test oncе moгe hегe
    frequently. I am գuite ceгtain I’ll bе informed
    many new stuff prooper herе! Bеst оf luck for the next!

  4. Venetta June 11, 2014 / 9:38 pm

    Thesse aare in fsct fantastic iideas in abot blogging.
    Youu hawve ttouched some gkod thins here.
    Any wayy keep upp wrinting.

  5. Genital Herpes Cures June 14, 2014 / 2:50 am

    Howdy! I know this is kinda off topic however I’d figured I’d ask.
    Would you be interested in trading links or maybe guest writing a
    blog article or vice-versa? My blog covers a lot of the
    same subjects as yours and I believe we could greatly benefit from each other.
    If you might be interested feel free to send me an e-mail.
    I look forward to hearing from you! Awesome
    blog by the way!

  6. car purchasing company June 14, 2014 / 5:49 pm

    Hеllo There. I fοund your weblog the use of msn. Thiѕ is ɑ гeally well written article.

    Ι will make sure to bookmark it and cߋme Ƅack to read extra ߋf yoour
    helpful info. Ƭhanks fօr tɦе post. I ԝill defіnitely return.

  7. schönheitschirurgie September 10, 2014 / 8:22 am

    Pretty nice post. I just stumbled upon your blog and wanted to
    say that I have really enjoyed surfing around your blog posts.
    After all I will be subscribing to your rss feed and I hope you write again soon!

  8. nasenkorrektur September 26, 2014 / 11:22 am

    Simply desire to say your article is as astounding.
    The clearness in your post is simply excellent and i can assume you’re an expert on this subject.
    Fine with your permission allow me to grab your feed to keep up to date with forthcoming post.
    Thanks a million and please keep up the rewarding work.

    • Chandra Dev September 27, 2014 / 10:36 am

      Thank you for posting sweet feedback.

  9. Danieloi October 8, 2014 / 1:00 am

    Interesting post )

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.