Issue building cascading dropdown lists in ASP.NET Core 7 MVC using JQuery and ajax.googleapis.com Issue

Question

While attempting to learn how to build cascading dropdown lists, I've been searching for examples using ASP.NET Core 7. From a different StackOverflow post an example was given referencing this site.

The subcategory dropdown only returns a value of undefined though, and I haven't been able to figure out why. I've tracked the issue to the JSON return type, but I've not been able to progress past that point.

DisplayCategories.cshtml:

@{
    ViewBag.Title = 
        "Cascading DropDownList example in ASP.NET MVC - GeeksArray.com";
}

<h2>Cascading DropDownList example in ASP.NET MVC - GeeksArray.com</h2>
@using (Html.BeginForm("CategoryChosen", "Home",
                FormMethod.Get))
{
    <table cellspacing="2" cellpadding="2">
        <tr>
            <td>
                Category Type :
            </td>
            <td>
               @Html.DropDownList("CategoryType")     
            </td>
        </tr>
        
        <tr>
            <td>
                Sub Category:
            </td>
            <td>
                @Html.DropDownList("SubCategory", 
                    new SelectList(string.Empty,
                         "Value", "Text"),
                    "Please select a Sub Category", 
                    new { style = "width:250px" })
            </td>
        </tr>
    </table>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
    <script type="text/javascript">

    $(document).ready(function () {

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

        $("#SubCategory").empty();

        $.ajax({

            type: 'POST',

            url: '@Url.Action("GetSubCategories")', 
            dataType: 'json',
            data: { id: $("#CategoryType").val() },
            success: function (subcategories) {

                $.each(subcategories, function (i, subcategory) {
                    $("#SubCategory").append('<option value="' + subcategory.Value + '">' + subcategory.Text + '</option>');
                });
            },
            error: function (ex) {
                alert('Failed to retrieve Sub Categories : ' + ex);
            }
        });
        return false;
    })
    });
    </script>
}

HomeController.cs:

    public ActionResult DisplayCategories()
    {
        List<SelectListItem> items = new List<SelectListItem>();

        items.Add(new SelectListItem
        {
            Text = "Select Category",
            Value = "0",
            Selected = true
        });

        items.Add(new SelectListItem { Text = "Beverage", Value = "1" });

        items.Add(new SelectListItem { Text = "Condiment", Value = "2" });

        items.Add(new SelectListItem { Text = "Confection", Value = "3" });

        items.Add(new SelectListItem { Text = "Dairy", Value = "4" });

        items.Add(new SelectListItem { Text = "Grains", Value = "5" });

        items.Add(new SelectListItem { Text = "Meat", Value = "6" });

        items.Add(new SelectListItem { Text = "Produce", Value = "7" });

        items.Add(new SelectListItem { Text = "Seafood", Value = "8" });

        ViewBag.CategoryType = items;

        return View();
    }

    public JsonResult GetSubCategories(string id)
    {
        List<SelectListItem> subCategories = new List<SelectListItem>();

        subCategories.Add(new SelectListItem
        {
            Text = "Select",
            Value = "0"
        });

        switch (id)
        {
            case "1":
                subCategories.Add(new SelectListItem { Text = "Coffee", Value = "1" });
                subCategories.Add(new SelectListItem { Text = "Energy", Value = "2" });
                subCategories.Add(new SelectListItem { Text = "Tea", Value = "3" });
                subCategories.Add(new SelectListItem { Text = "Cold", Value = "4" });
                break;

            case "2":
                subCategories.Add(new SelectListItem { Text = "Garlic", Value = "1" });
                subCategories.Add(new SelectListItem { Text = "Pickles", Value = "2" });
                subCategories.Add(new SelectListItem { Text = "Raita", Value = "3" });
                subCategories.Add(new SelectListItem { Text = "Sauce", Value = "4" });
                break;

            case "3":
                subCategories.Add(new SelectListItem { Text = "Desserts", Value = "1" });
                subCategories.Add(new SelectListItem { Text = "Sweet", Value = "2" });
                break;

            case "4":
                subCategories.Add(new SelectListItem { Text = "Cheese", Value = "1" });
                break;

            case "5":
                subCategories.Add(new SelectListItem { Text = "Crackers", Value = "1" });
                subCategories.Add(new SelectListItem { Text = "Pasta", Value = "2" });
                break;

            case "6":
                subCategories.Add(new SelectListItem { Text = "Prepared", Value = "1" });
                break;

            case "7":
                subCategories.Add(new SelectListItem { Text = "Dried Fr", Value = "1" });
                break;

            case "8":
                subCategories.Add(new SelectListItem { Text = "Fish", Value = "1" });
                subCategories.Add(new SelectListItem { Text = "Crab", Value = "2" });
                break;

            default:
                subCategories.Add(new SelectListItem { Text = "Coffee", Value = "1" });
                subCategories.Add(new SelectListItem { Text = "Tea", Value = "3" });
                subCategories.Add(new SelectListItem { Text = "Colddrinks", Value = "4" });
                break;
        }

        return Json(new SelectList(subCategories, "Value", "Text"));
    }

As I mentioned, if I manually set the values with this

$.each(subcategories, function (i, subcategory) {
    $("#SubCategory").append('<option value="5">Testing</option>');
});

The subcategory list dropdown is populated with the data. If I step into the switch statement I can see the subCategories list options are populating. Something has changed with the return type though and I'm not seeing what that is.

Answer 1

Finally figured it out. The .each should read

$.each(subCategories, function (i, subCategory) {
     $("#SubCategory").append('<option value="' + subCategory["value"] + '">' + subCategory["text"] + '</option>');