Editing cascading drop down list asp.net mvc 5 - asp.net-mvc

Question

I have created a cascading dropdown list of category and subcategory
This is perfectly working when i create my product list it show both the option category and subcategory but
i am having a problem when i perform my Edit function on my edit page it shows category list but doesnt populate subcategory
thanks in advance
enter code here
This is view where you can see both category and subcategory dropdown list code
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>
this is action method in controller
controller
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);
}
Edit action method in conntroller
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);
}