cascading dropdownlist with partial view issue

Question

I have a problem with cascading dropdownlists where the second ddl should appear in a partial view and I can't handle it by myself. Please help me to figure out why I have the following bag?

So, I have a view with the first ddl where the user can choose a brand:

@Html.DropDownList("brands", new SelectList(
@ViewBag.Brands, "Id", "BrandName"),
"--select a Brand--",
new
{
id = "ddlBrands",
data_url = Url.Action("ChooseModel", "Home")
})
<div id="divModel"></div>

The ChooseModel method returns the following partial view :

<div id="chooseModel">
<div class="lead">Model</div>
@Html.DropDownList("models", new SelectList(Enumerable.Empty<SelectListItem> 
(), "Id", "ModelName"),
"--select a Model--",
new { id = "ddlModels" })
</div>

When a user selects an item in ddlBrands another dropdownlist for models should appear. So, the script looks like this:

  $(function () {
    $("#ddlBrands").change(function () {

        var url = $(this).data('url');
        var value = $(this).val();
        $('#divModel').load(url, { id: value });

        var brandId = $(this).val();
        $('#divModel').html("");
        $.getJSON("../Home/LoadModels", { brandId: brandId },
            function (modelData) {
                var select = $("#ddlModels");
                select.empty();
                select.append($('<option/>', {
                    value: 0,
                    text: "-- select a Model --"
                }));
                $.each(modelData, function (index, itemData) {
                    select.append($('<option/>', {
                        value: itemData.Value,
                        text: itemData.Text
                    }));
                });
            });
    });
});

And, finally, LooksModels method loading the models for the particular brand:

public JsonResult LoadModels(string brandId)
{
   if (string.IsNullOrEmpty(brandId))
         return Json(HttpNotFound());

        var modelList = unitOfWork.ModelRepository
                        .GetModelListByBrand(Convert.ToInt32(brandId)).ToList();
        var modelData = modelList.Select(m => new SelectListItem()
            {
                Text = m.ModelName,
                Value = m.Id.ToString()
            });

        return Json(modelData, JsonRequestBehavior.AllowGet);
    }

So, when I launch the application and choose a brand in the first ddl, the child models showing fine in second one. Then I choose another brand, and again the right models appeared. But when I choose the brand that I chose first time, I can't choose any models - ddlModels shows me only --select a Model--.

Can you please tell me what error in script (I suppose) I have?

Answer 1

Use This at Controller:

public JsonResult LoadModels(string fstValue)
        {
            YourClassname obj= new YourClassname ();
            int Id = 0;
            if (fstValue != "")
                Id = Convert.ToInt32(fstValue);
            var result = obj.GetModelListByBrand(Convert.ToInt32(Id ));

            IList<SelectListItem> Data = new List<SelectListItem>();
            for (int i = 0; i < result.Count; i++)
            {
                Data.Add(new SelectListItem()
                {
                    Text = result[i].Text,
                    Value = result[i].Value,
                });
            }
            return Json(Data, JsonRequestBehavior.AllowGet);
        }

Answer 2

Try this Script :

<script type="text/javascript">
          $(document).ready(function () {
             $("#ddlBrands").change(function () {
              firstDDLValue = $("#ddlBrands").val();
               $.post('@Url.Action("LoadModels", "Home")', { fstValue: firstDDLValue },               function (result) {
                       var select = $("#ddlModels");
                       select.empty();
                       select.append($('<option/>', { value: '', text: '--Select--' }));
                       $.each(result, function (index, Data) {
                       select.append($('<option/>', {
                       value: Data.Value,
                       text: Data.Text
                       }));
                    });
               });
                    });
                  });
    </script>