Drop Down Cascading MVC 2

Question

I am binding A drop down on the change of first one. But I am getting Undefined.

Here is what I have tried. in the view

   <select id="BreakOutValue" class="input1_drop" onchange="onChange()" >
                                                                </select>
<%:Html.DropDownList("DropClient", new SelectList(Model.DropClient, "Value", "Text", Model.txtDropClient), "-- Select  --", new { @class = "input1_drop", id = "DropClient", @onchange = "onClientChange();"})%>

  if ($("#DropClient").val() != '') {
                                   $.ajax({
                                       async: false,
                                       type: 'post',
                                       url: '/Report/BindBreakOutsWithClient_ID',
                                       data: { Client_ID: $("#DropClient").val() },
                                       success: function (data) {

                                           debugger;
                                           // var responseID = eval("(" + data + ")");
                                           // var SystemField = responseID.List;
                                           var items = "";
                                           $.each(data, function (i, data) {
                                              items += "<option value='" + data.Client_ID + "'>" + data.labelname + "</option>";
                                           });
                                           $("#BreakOutValue").html(items);


                                           //                                           $("#BreakOutValue option").remove();
                                           //                                           $("#BreakOutValue").append("<option value=''>-- Select --</option>");
                                           //                                           for (var i = 0; i < data.length; i++) {
                                           //                                               $("#BreakOutValue").append("<option selected='selected' value=" + data.Data[i] + ">" + data.Data[i] + "</option>");
                                           //                                           }
                                       },
                                       error: function (jqXHR, textStatus, errorThrown) {
                                       }
                                   });
                            }
                            return false;
        }

In controller

   public ActionResult BindBreakOutsWithClient_ID(string Client_ID)
            {
                int Client = Convert.ToInt32(Client_ID);
               // var qBreakOut = from c in DBReport.ClientMappings orderby c.labelname ascending where c.Client_ID == Client && c.availableinui == true select c;
                var BreakOut = dbReport.ClientMappings.Where(m => m.Client_ID == Client && m.availableinui == true).OrderBy(m => m.labelname).ToList();
                return Json(new { Data = BreakOut });
            }

But I am not getting anything in the dropdown . I am getting undefined.

Answer 1

In your controller action you have prefixed your Json response with a Data property:

return Json(new { Data = BreakOut });

So make sure that on the client you are looping on this property:

var items = "";
$.each(data.Data, function (i, item) {
    items += "<option value='" + item.Client_ID + "'>" + item.labelname + "</option>";
});
$("#BreakOutValue").html(items);

or if you want to keep your current code then return directly the list:

return Json(BreakOut);

Also I would more than strongly recommend you getting rid of the async: false parameter in your $.ajax call. By setting this parameter you are making a blocking request to the server which completely defeats the whole purpose of an AJAX call.