使用 JQuery 和 ajax.googleapis.com 问题在 ASP.NET Core 7 MVC 中构建级联下拉列表问题

Question

在尝试学习如何构建级联下拉列表时，我一直在使用 ASP.NET Core 7 搜索示例。从不同的 StackOverflow 帖子中给出了一个示例referenceing this site.

子类别下拉列表只返回未定义的值，但我一直无法弄清楚原因。我已经追踪到 JSON 返回类型的问题，但我无法超越这一点。

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"));
    }

正如我提到的，如果我用这个手动设置值

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

子类别列表下拉列表中填充了数据。如果我进入 switch 语句，我可以看到子类别列表选项正在填充。虽然返回类型发生了一些变化，但我没有看到那是什么。