Binding Wijmo Combobox with WebService in jQuery

Wijmo Combobox can be data bound at server side like other controls. However, Wijmo Combobox is a jQuery based control; so ideally we should databind it at client side in order to make best use of this control. In this blog, we will see how we can do it with the help of the WebService and AJAX call. Consider a scenario in which we are displaying Countries in one Combobox and on the basis of user selection, we will display the cities for that country in another ComboBox. In this case, we can force a postback and bind the second Combobox on basis of value selected in first Combobox. We also have the option to use UpdatePanel to avoid full postback. However, there is one more alternative for this i.e. retrieve data from WebService through AJAX call and then, bind it to the Combobox. To begin with, we use a Combobox bound to DataTable 'Customers' for displaying Countries using simple Server side binding technique.

protected void Page_Load(object sender, EventArgs e)  
 {  
    //bind the combobox to country column  
    string strConn = System.Configuration.ConfigurationManager.ConnectionStrings["AccessDB"].ConnectionString;  
    string queryStudio = "SELECT DISTINCT [Country] FROM [Customers]";  

    OleDbDataAdapter da = new OleDbDataAdapter(queryStudio, strConn);  
    DataTable dtCountries = new DataTable();  
    da.Fill(dtCountries);  

    C1ComboBox1.DataTextField = "Country";  
    C1ComboBox1.DataSource = dtCountries;  
    C1ComboBox1.DataBind();  
 }  

Now, we will expose a WebMethod in WebService for retrieving the names of cities present in that country. Since, there is no direct way to pass datatable in jQuery from webservice, we will create a collection object from the table and return it as a List< T >.

[WebMethod]  
 [ScriptMethod(ResponseFormat = ResponseFormat.Json)]  
 public object GetCityNames(string countryName)  
 {  
   //retrieve the data  
   DataTable ds = new DataTable();  
   string queryProduct = "SELECT DISTINCT [City] FROM [Customers] where Country='" + countryName + "'";  
   string strConn = System.Configuration.ConfigurationManager.ConnectionStrings["AccessDB"].ConnectionString;  
   OleDbDataAdapter da = new OleDbDataAdapter(queryProduct, strConn);  
   DataTable dtCity = new DataTable();  
   da.Fill(dtCity);  

   //create list of CityNames  
   List<CityNames> cityNames = new List<CityNames>();  
   for (int i = 0; i < dtCity.Rows.Count; i++)  
   {  
   //set the values  
   CityNames cn = new CityNames();  
   cn.CityName = dtCity.Rows[i]["City"].ToString();  
   cn.CityId = i;  
   cityNames.Add(cn);  
   }  
   return cityNames;  
 }  

Class structure for 'CityNames' is shown below.

public class CityNames  
{  
   public string CityName  
   {  
      get;  
      set;  
   }  

   public int CityId  
   {  
      get;  
      set;  
   }  
}  

Since, we are doing all the things at client side, we will handle the OnClientSelect method of the Wijmo Combobox and call the WebService from it. The script is shown below:

<script type="text/javascript">  
 function getSelectedItem(e, item) {  
    var cmb_Product = $("#C1ComboBox2");  
    cmb_Product.c1combobox({  
      data: null  
    });  

    //call the service  
    GetCityNamesFromService(item.label);  
 }  

 function GetCityNamesFromService(country) {  
   //ajax call to get the data  
   $.ajax({  
     type: "POST",  
     url: "GetDetails.asmx/GetCityNames",  
     contentType: "application/json; charset=utf-8",  
     dataType: "json",  
      //pass the country name  
     data: "{countryName:'" + country + "'}",  
     success: function (data) {  
            var arr = [];  
            try {  
            //push the data in an array  
                 $.each(data.d, function (i, elem) {  
                     arr.push({  
                          label: elem.CityName,  
                          value: elem.CityId  
                     });  
                  });  
                FillComboWithData(arr);  
              }  
            catch (e) {  
                alert(e);  
                return;  
              }  
           },  
         error: function (result, status) {  
                if (status = "error") {  
                   alert(status);  
           }  
       }  
   });  
 }  

 function FillComboWithData(productArray) {  
       var cmb_Product = $("#C1ComboBox2");  
       //set the datasource of the combobobox  
       cmb_Product.c1combobox({  
           data: productArray  
       });  
   }  
 </script>  

You can download the attached sample for complete implementation. Download Sample