Редактирование каскадного выпадающего списка asp.net mvc 5

Question

Я создал каскадный выпадающий список категорий и подкатегорий

Это прекрасно работает, когда я создаю свой список продуктов, он отображает как категорию опций, так и подкатегорию, но

У меня проблемакогда я выполняю свою функцию редактирования на моей странице редактирования, она показывает список категорий, но не заполняет подкатегорию

заранее спасибо

    enter code here

В этом представлении вы можете увидеть код раскрывающегося списка как категории, так и подкатегории.

Create.cshtml

@model Masonic_Masoinc.Product

@{
    ViewBag.Title = "Create";
}

<h2>Product</h2>

<h1>@ViewBag.IsSuccess</h1>


@using (Html.BeginForm("Create", "Home", FormMethod.Post, new { @class = "form-horizontal", enctype = "multipart/form-data" }))
{
    @Html.AntiForgeryToken()

    <div class="form-horizontal">

        <hr />
        @Html.ValidationSummary(true, "", new { @class = "text-danger" })
        <div class="form-group">
            @Html.LabelFor(model => model.ProductName, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.ProductName, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.ProductName, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.ProductCode, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.ProductCode, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.ProductCode, "", new { @class = "text-danger" })
            </div>
        </div>


        <div class="form-group">
            @Html.LabelFor(model => model.Price, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.Price, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.Price, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.Image, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">

                <input type="file" name="file" value="file" />

                @*@Html.EditorFor(model => model.Image, new { htmlAttributes = new { @class = "form-control" } })*@
                @Html.ValidationMessageFor(model => model.Image, "", new { @class = "text-danger" })

            </div>
        </div>

        <hr />
        <h2>Category</h2>
        <div class="form-group">
            @Html.LabelFor(model => model.Categories.CategoryName, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @if (ViewBag.CategoryList != null)
                {
                    @Html.DropDownListFor(model => model.CatId, new SelectList(ViewBag.CategoryList, "CatId", "CategoryName"), "Select Your Category", new { @Class = "form-control" })
                }


                @*@Html.EditorFor(model => model.Category.CategoryName, new { htmlAttributes = new { @class = "form-control" } })*@
                @Html.ValidationMessageFor(model => model.Categories.CategoryName, "", new { @class = "text-danger" })
            </div>
        </div>
        <div class="form-group">
            @Html.LabelFor(model => model.SubCategories.SubCategory, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.DropDownListFor(model => model.SubCatId, new SelectList(""), "Sub-Category", new { @class = "form-control" })
                @*@Html.EditorFor(model => model.Category.CategoryName, new { htmlAttributes = new { @class = "form-control" } })*@
                @Html.ValidationMessageFor(model => model.SubCategories.SubCategory, "", new { @class = "text-danger" })
            </div>
        </div>


        <div class="form-group">
            <div class="col-md-offset-2 col-md-10">
                <input type="submit" value="Create" class="btn btn-default" />
            </div>
        </div>
    </div>
}

<div>
    @Html.ActionLink("Back to List", "Index")
</div>



<script src="~/Scripts/jquery-3.4.1.min.js"></script>

<script>


    $(document).ready(function () {

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

            $.get("/Home/GetSubCatList",
                { CatId: $("#CatId").val() },
                function(data) {
                    $("#SubCatId").empty();
                    $.each(data,
                        function(index, row) {
                            $("#SubCatId")
                                .append("<option value='" + row.SubCatId + "'>" + row.SubCategory + "</option>");

                        });
                });
        });
    });

</script>

это метод действия в контроллере

контроллер

public JsonResult GetSubCatList(int catId)
        {


            MasonicMasterEntities db = new MasonicMasterEntities();

            db.Configuration.ProxyCreationEnabled = false;
            List<SubCategories> subcategory = db.SubCategories.Where(x => x.CatId == catId).ToList();


            return Json(subcategory, JsonRequestBehavior.AllowGet);



        }

Редактировать метод действия в контроллере

public ActionResult Edit (int id) {

        MasonicMasterEntities db = new MasonicMasterEntities();

        var product = db.Product.SingleOrDefault(m => m.ProId == id);
        if (product == null)
        {
            return HttpNotFound();
        }

        var category = db.Categories.ToList();
        var subcategory = db.SubCategories.ToList();
        var ViewModel = new ProductViewModel()
        {
            Products = product,
            Categorieses = category,
            SubCategorieses = subcategory

        };
        return View("Edit",ViewModel);
    }