This blog is containing detailed information about DropDownList with jQuery. To Bind DropDownList in jQuery We have to write below code in <script> block.

<script type="text/javascript">

function CallService() {

var txtValue = $("#TextBox1").val();

$.ajax({

type: "POST", //GET or POST or PUT or DELETE verb

url: "Service.svc/getCityList", // Location of the service

data: '{"str": "' + txtValue + '"}', //Data sent to server

contentType: "application/json; charset=utf-8", // content type sent to server

dataType: "json", //Expected data format from server

processdata: true, //True or False

success: function (msg) {//On Successfull service call

if (msg.getCityListResult == '') {

$("#divCity").html("No Data found");

}

else {

var ddl = $('#ddlCity');

ddl.append("<option value='0'>-select-</option>");

for (var i = 0; i < msg.getCityListResult.length; i++) {

var City = msg.getCityListResult[i].split('~')[0];

var Code = msg.getCityListResult[i].split('~')[1];

ddl.append("<option value='" + Code + "'>" + City + "</options>");

}

}

}

});

}

</script>

With the above code you get all city name and code against State name.
If the state name not exist in the database,

divCity(div id) shows "No Data found".

Write below code in WCF .cs file

using System;

using System.Collections.Generic;

using System.Linq;

using System.Runtime.Serialization;

using System.ServiceModel;

using System.Text;

using System.ServiceModel.Activation;

using System.Data.SqlClient;

using System.Data;

// NOTE: If you change the class name "Service" here, you must also update the reference to "Service" in Web.config.

[AspNetCompatibilityRequirements(RequirementsMode =

AspNetCompatibilityRequirementsMode.Allowed)]

public class Service : IService

{

SqlConnection cn = new SqlConnection("Data Source=BCILGGN13\\SQLEXPRESS;

Initial Catalog=Test; Uid=sa; Pwd=bcil; ");

SqlDataAdapter adap;

DataTable dt;

public List<string> getCityList(string State)

{

List<string> objList = new List<string>();

adap = new SqlDataAdapter("select city,count from City_List where State='" + State.Trim() + "'", cn);

dt = new DataTable();

adap.Fill(dt);

if (dt.Rows.Count > 0)

{

for (int i = 0; i < dt.Rows.Count; i++)

{

objList.Add(dt.Rows[i]["city"].ToString() + "~" + dt.Rows[i]["count"].ToString());

}

}

return objList;

}

}

Write below code in .aspx file

I called the CallService() function on textbox onblur event.

<body>

<form id="form1" runat="server">

<div>

Enter State Name :-

<asp:TextBox ID="TextBox1" runat="server" onblur="CallService();"></asp:TextBox>

</div>

<br />

<br />

<br />

<div id="divCity" style="width: 200px; height: 50px;">

</div>

City List : -

<select id="ddlCity">

</select>

</form>

</body>

Write below code in Iservice.cs file

using System;

using System.Collections.Generic;

using System.Linq;

using System.Runtime.Serialization;

using System.ServiceModel;

using System.Text;

using System.ServiceModel.Web;

using System.ServiceModel.Activation;

using System.Data;

// NOTE: If you change the interface name "IService" here, you must also

update the reference to "IService" in Web.config.

[ServiceContract]

public interface IService

{

[OperationContract]

[WebInvoke(Method = "POST",

BodyStyle = WebMessageBodyStyle.Wrapped,

ResponseFormat = WebMessageFormat.Json)]

List<string> getCityList(string str);

}


Table in SQL Server containing below data. .

Note :- WCF service method always return Collection type. Please find enclosed attachment to see further information.