JQuery return an array of drop down list items from asmx web service and then bind to drop down list?

Question

All,

How can I bind the array of drop down list items returned from the web service method to the ddlSubCategory asp.net server control? Here is my code. See comments in the jquery OnSuccess method:

<script type="text/javascript">
    $(document).ready(function () {
        $('#<%=ddlParentCategory.ClientID%>').change(function () {
            var selectedParentCategory = getParentCategorySelectedValue();
var params=  []; 
params[id] = selectedParentCategory;  

          $.ajax({
                              type: "POST",
                              url: "MyWebService.asmx/GetSubCategoryItems",
                              data: params,               
                              contentType: "application/json; charset=utf-8",               
                              dataType: "json",               
                              success: OnSuccess,               
                              error: OnError
           });
                      });

    function OnSuccess(data, status) {
;// need to populate ddlSubCategory <asp:DropDownList on UI now
;// using returned array of drop down list items from the web service
    }        

    function OnError(request, status, error) {
                   alert(request.statusText);
    }

        function getParentCategorySelectedValue() {
            var SelectedVal = $('#<%=ddlParentCategory.ClientID %>').val();
            return SelectedVal;
        }

   });    
</script>

Here is my web service web method returning the array of list items:

[WebMethod]
        public ListItem []  GetSubCategoryItems(int id)
        {
            using (var dc = MyDataContext.Open())
            {
                return dc.SubCategory
                    .OrderBy(sc => sc.Name)
                    .Select(sc => new ListItem()
                                     {
                                         Value = sc.ID.ToString(),
                                         Text = sc.Name
                                     })
                    .Prepend(new ListItem() {Value = "", Text = "Please Select"})
                    .ToArray();
            }
        }

thanks for any help!

Answer 1

You can try something like this:

function OnSuccess(data, status) {
    // create a variable to the array
    var list = data;
    //get your combobox
    var $select = $('#<%=ddlParentCategory.ClientID %>'); 
    //check if it contains some items
    if (list.length > 0) {
        $select.empty().append('<option value="0">Please select...</option>');
        $.each(list, function () {
            $select.append($("<option></option>").val(this['Value']).html(this['Text']));
        });
        // $select.val(valueselected); //if you want to select a value... add this line
    }
    else //empty result from array
        $select.empty().append('<option selected="selected" value="0">Empty...<option>');
}

I don't know hwo you are returning your array from the web method in the web service, but you have to consider this items to get it work:

• your web service has to be accessible by scripts, so add [System.Web.Script.Services.ScriptService] attribute on your web service class.
• make your web service method to become accessible via get (try to access directly from the browser). You can do something like this on the web.config file.
• return on the json format, look at this link
• be sure that your parameter data on the OnSuccess function, has no properties with the array, e.g., data.items