How to populate asp.net drop down list from database by passing radio button list’s selected value as parameter with J Query, J Son?
In my project I am taking off asp.net update panel where ever possible and replacing it with J Query Ajax. J Query Ajax is far better then asp.net Ajax and asp.net update panel. I am populating 259 countries list on the basis of parameter passed from asp.net radio button list’s selected text. Using asp.net radio button list and drop down list inside asp.net update panel keeping Radio button list’s auto post back property to true. First time running application from visual studio and clicking on the radio button list item populated drop down list in “176ms” and when chose same option second time it took “76ms” while same Ajax request using J query took “79ms” for first time and when chose same option second time it took “32ms”.
J Query code to decode j son result and populate asp.net drop down list
<script type=”text/javascript”>
function getCountries()
{
var elementId = ‘<%=rblUKInternational.ClientID%>’;
var elementRef = document.getElementById(elementId);
var checkBoxArray = elementRef.getElementsByTagName(‘input’);
var checkedValue =“”;
var isChecked = false;
for (var i = 0; i < checkBoxArray.length; i++) {
if (document.getElementById(elementId + “_” + i.toString()).checked == true) {
var checkBoxRef = checkBoxArray[i];
checkedValue=checkBoxRef.value;
Chekced = false;
break;
}
}
$.ajax({
type:“POST”,
url:“WebService/WsCountry.asmx/getCountryList”,
data:“{optionvalue:’”+checkedValue+“‘}”,
contentType:“application/json; charset=utf-8″,
dataType:“json”,
success:function(response)
{
if (response.length<=4)
{
alert (response);
}
else
{
var myObject= eval(“(“+ eval(response)+ “)”);
$(‘#<%=DropDownListCountry.ClientID %>>option’).remove();
$(“#<%=DropDownListCountry.ClientID %>”).append($(‘<option></option>’).val(”).html(“Please select…”));
for (var i=0;i<=myObject.length-1;i++) {
$(“#<%=DropDownListCountry.ClientID %>”).append($(‘<option></option>’).val(myObject[i].countrycode).html(myObject[i].name));
}
}
},
error: function (response)
{
if (response.length!=0)
alert(response.status + ‘ ‘ + response.statusText);
}
});
}</script>
Web service code to get data from SQL server 2005 and encode into J Son format
using System;
using System.Data;
using System.Web;
using System.Collections;
using System.Web.Services;
using System.Web.Services.Protocols;
using System.ComponentModel;
using System.Web.Script.Services;
using System.Web.Script.Serialization;
using System.Text;
using System.Collections.Generic;
{
/// <summary>
/// Summary description for WsCountry
/// </summary>
[ScriptService]
public class WsCountry : System.Web.Services.WebService
{
[WebMethod]
public string getCountryList(string optionvalue)
{
try
{
StringBuilder sbcountriesList = new StringBuilder();
if ((optionvalue != “GB”) &&
(optionvalue != “INT”))
throw new ApplicationException(string.Format(“Country code GB or INT expected, {0} received”, optionvalue));
CountryService cs = new CountryService();
TList<Country> countries = cs.GetAll(optionvalue);
List<Dictionary<string, string>> rows = new List<Dictionary<string, string>>();
foreach (Country country in countries)
{
Dictionary<string, string> Dictionary = new Dictionary<string, string>();
Dictionary.Add(“name”, country.DisplayName);
Dictionary.Add(“countrycode”, country.CountryCode);
rows.Add(Dictionary);
}
JavaScriptSerializer js = new JavaScriptSerializer();
js.Serialize(rows, sbcountriesList);
return sbcountriesList.ToString();
}
catch (Exception ex)
{
return ex.Message;
}
}
}
}
C# code to call JavaScript function on the radio button list selected item
this.rblUKInternational.Attributes.Add(“onclick”,“getCountries()”);
