json cascading drop down list asp.net mvc

Question

I am currently following the tutorial in order to create cascading drop down list in asp.net mvc.

https://chsakell.com/2013/09/25/master-detail-dropdown-lists-and-partial-views-with-jquery-ajax-in-mvc/

However the first drop down box is not loaded with the manufacturer data. I assume that there is an error with the JSON? I can't figure out what is wrong with the code.

Controller:

 public ActionResult ManufacturerList()
        {
            var manufacturers = Models.Manufacturer.GetManufacturers();

            if (HttpContext.Request.IsAjaxRequest())
            {
                return Json(new SelectList(manufacturers.ToArray(), "ManCode", "ManName"), JsonRequestBehavior.AllowGet);
            }

        return RedirectToAction("Index");
    }

In the model:

class Manufacturer
    {
        public string ManCode { get; set; }
        public string ManName { get; set; }

        public static IQueryable<Manufacturer> GetManufacturers()
        {
            return new List<Manufacturer>
{
new Manufacturer {
ManCode = "AC",
ManName = "ACER"
},
}.AsQueryable();
        }
    }

In the View:

@using (Html.BeginForm("Index", "Home", FormMethod.Post,

                new

                {

                    id = "OrderLaptopFormID"

                }))

{

    <fieldset>

        <legend>Make an order</legend>

        <div>

            <label for="Manufacturers">Manufacturer</label>

        </div>

        <select id="ManufacturersID" name="Manufacturers"></select>

                </fieldset>

    <input type="submit" value="Return" id="SubmitID" />

}



<script src="@Url.Content("~/Scripts/jquery-1.8.2.min.js")" type="text/javascript"></script>

<script src="@Url.Content("~/Scripts/GetManufacturer.js")"></script>

JS File:

    $(document).ready(function () {
    var URL = 'home/ManufacturerList/';
    $.getJSON(URL, function (data) {
        var items = '<option value="">Select Manufacturer</option>';
        $.each(data, function (i, manufacturer) {
            items += "<option value='" + manufacturer.Value + "'>" + manufacturer.Text
            + "</option>";
        });
        $('#ManufacturersID').html(items);
    });
});

From this code I would assume the manufacturer drop down list should be populated, but it is not. Really appreciate anyones help as new to MVC and JSON. Thanks. Appreciate your time.

Update: So when I debug I get the following error: Unhandled exception at line 1, column 1 in http://localhost:42523/Scripts/countryState.js 0x800a1391 - JavaScript runtime error: '$' is undefined

Answer 1

Hard to tell where the problem is, but off the bat, your Manufacturer class does not have Value or Text properties. Instead, it has ManCode and ManName.

Try:

    $.each(data, function (i, manufacturer) {
        items += "<option value='" + manufacturer.ManCode + "'>" + manufacturer.ManName
        + "</option>";
    });

Also, no need to return IQueryable, simply return IEnumerable. So no need to .AsQueryable():

   public static IEnumerable<Manufacturer> GetManufacturers()
   {
       return new List<Manufacturer> {
            new Manufacturer {
                ManCode = "AC",
                ManName = "ACER"
           }
       };
   }

Finally, don't return a SelectList from the method, simply return the list

        if (HttpContext.Request.IsAjaxRequest())
        {
            return Json(manufacturers, JsonRequestBehavior.AllowGet);
        }