title: Cascading DropDownList doesn't populate automatically while performing Edit function
body: <p>When I try to edit my product profile list it shows all the fields but in cascading drop down list doesn't show the list which I selected while creating my product,those fields doesn't populate accurately. On view you can also see jQuery code.<br>
  I am new in Mvc and this is the second time asking same question could you please help me out. I just enclosed Controller and View. Thanks in advance.</p>
  
  <pre><code>    public ActionResult ProductProfile(int id)
  
       {
  
          MasonicMasterEntities db = new MasonicMasterEntities();
  
          var product=db.Product.Find(id);
  
          var categoryList = db.Categories.ToList();
  
          product.CatList= new SelectList(categoryList, "CatId", "CategoryName");
  
  
  
          return View(product);
  
      }
  
      [HttpPost]
      public ActionResult ProductProfile(HttpPostedFileBase file,Product product)
      {
  
          MasonicMasterEntities db = new MasonicMasterEntities();
  
          if (file != null)
          {
  
              Guid RandomName = Guid.NewGuid();
  
  
              var fileExtention = Path.GetExtension(file.FileName);
              var FileName = RandomName + fileExtention;
              var path = Path.Combine(Server.MapPath("~/Images"), RandomName + fileExtention);
              file.SaveAs(path);
              product.Image = FileName;
  
          }
  
  
  
          db.Entry(product).State = System.Data.Entity.EntityState.Modified;
          db.SaveChanges();
  
  
          return RedirectToAction("ProductProfile", new { id = product.ProId });
      }
  
  
  ****View**** 
  
  @model Masonic_Masoinc.Product
  
  @{
      ViewBag.Title = "Create";
  }
  &lt;link href="~/CustmiseSheet/StyleSheet.css" rel="stylesheet" /&gt;
  
  &lt;h2&gt;Product&lt;/h2&gt;
  
  &lt;h1&gt;@ViewBag.IsSuccess&lt;/h1&gt;
  
  
  @using (Html.BeginForm("ProductProfile", "Home", FormMethod.Post, new { @class = "form-horizontal", enctype = "multipart/form-data" }))
  {
      @Html.AntiForgeryToken()
  
      @Html.HiddenFor(model=&gt;model.ProId)
  
      &lt;div class="form-horizontal"&gt;
          @Html.ValidationSummary(true, "", new { @class = "text-danger" })
          &lt;div class="form-group"&gt;
              @Html.LabelFor(model =&gt; model.ProductName, htmlAttributes: new { @class = "control-label col-md-2" })
              &lt;div class="col-md-10"&gt;
                  @Html.EditorFor(model =&gt; model.ProductName, new { htmlAttributes = new { @class = "form-control" } })
                  @Html.ValidationMessageFor(model =&gt; model.ProductName, "", new { @class = "text-danger" })
              &lt;/div&gt;
          &lt;/div&gt;
  
          &lt;div class="form-group"&gt;
              @Html.LabelFor(model =&gt; model.ProductCode, htmlAttributes: new { @class = "control-label col-md-2" })
              &lt;div class="col-md-10"&gt;
                  @Html.EditorFor(model =&gt; model.ProductCode, new { htmlAttributes = new { @class = "form-control" } })
                  @Html.ValidationMessageFor(model =&gt; model.ProductCode, "", new { @class = "text-danger" })
              &lt;/div&gt;
          &lt;/div&gt;
  
          &lt;div class="form-group"&gt;
              @Html.LabelFor(model =&gt; model.Price, htmlAttributes: new { @class = "control-label col-md-2" })
              &lt;div class="col-md-10"&gt;
                  @Html.EditorFor(model =&gt; model.Price, new { htmlAttributes = new { @class = "form-control" } })
                  @Html.ValidationMessageFor(model =&gt; model.Price, "", new { @class = "text-danger" })
              &lt;/div&gt;
          &lt;/div&gt;
  
          &lt;div class="form-group"&gt;
              @Html.LabelFor(model =&gt; model.Image, htmlAttributes: new { @class = "control-label col-md-2" })
              &lt;div class="col-md-10"&gt;
  
                  &lt;input type="file" name="file" value="file" /&gt;
  
                  @*@Html.EditorFor(model =&gt; model.Image, new { htmlAttributes = new { @class = "form-control" } })*@
                  @Html.ValidationMessageFor(model =&gt; model.Image, "", new { @class = "text-danger" })
  
              &lt;/div&gt;
          &lt;/div&gt;
  
          &lt;hr /&gt;
          &lt;h2&gt;Category&lt;/h2&gt;
          &lt;div class="form-group"&gt;
              @Html.LabelFor(model =&gt; model.Categories.CategoryName, htmlAttributes: new { @class = "control-label col-md-2" })
              &lt;div class="col-md-10"&gt;
  
  
                      @Html.DropDownListFor(model =&gt; model.CatId,Model.CatList, new { @Class = "form-control" })
  
  
  
                  @*@Html.EditorFor(model =&gt; model.Category.CategoryName, new { htmlAttributes = new { @class = "form-control" } })*@
                  @Html.ValidationMessageFor(model =&gt; model.Categories.CategoryName, "", new { @class = "text-danger" })
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="form-group"&gt;
              @Html.LabelFor(model =&gt; model.SubCategories.SubCategory, htmlAttributes: new { @class = "control-label col-md-2" })
              &lt;div class="col-md-10"&gt;
                  @Html.DropDownListFor(model =&gt; model.SubCatId, new SelectList(""), new { @class = "form-control" })
                  @*@Html.EditorFor(model =&gt; model.Category.CategoryName, new { htmlAttributes = new { @class = "form-control" } })*@
                  @Html.ValidationMessageFor(model =&gt; model.SubCategories.SubCategory, "", new { @class = "text-danger" })
              &lt;/div&gt;
          &lt;/div&gt;
  
  
          &lt;div class="form-group"&gt;
              &lt;div class="col-md-offset-2 col-md-10"&gt;
                  &lt;input type="submit" value="submit" class="btn btn-default" /&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  }
  
  &lt;div&gt;
      @Html.ActionLink("Back to List", "Index")
  &lt;/div&gt;
  
  
  
  &lt;script src="~/Scripts/jquery-3.4.1.min.js"&gt;&lt;/script&gt;
  
  &lt;script&gt;
  
  
      $(document).ready(function () {
  
          $("#CatId").change(function() {
  
              $.get("/Home/GetSubCatList",
                  { CatId: $("#CatId").val() },
                  function(data) {
                      $("#SubCatId").empty();
                      $.each(data,
                          function(index, row) {
                              $("#SubCatId")
                                  .append("&lt;option value='" + row.SubCatId + "'&gt;" + row.SubCategory + "&lt;/option&gt;");
  
                          });
                  });
          });
      });
  
  &lt;/script&gt;
  </code></pre>
  
  <p>******controller****** </p>
  
  <pre><code>****//  when i try to edit my product profile list it shows all the fields but in cascading drop down list doesn't show the list which i selected while creating my product,those fields doesn't populate accurately ..I am new in Mvc and this is the second time asking same question could you please help me out  .i just enclosed Controller and View .Thanks in advance ****   
  
  
      public ActionResult ProductProfile(int id)
  
       {
  
          MasonicMasterEntities db = new MasonicMasterEntities();
  
          var product=db.Product.Find(id);
  
          var categoryList = db.Categories.ToList();
  
          product.CatList= new SelectList(categoryList, "CatId", "CategoryName");
  
  
  
          return View(product);
  
      }
  
      [HttpPost]
      public ActionResult ProductProfile(HttpPostedFileBase file,Product product)
      {
  
          MasonicMasterEntities db = new MasonicMasterEntities();
  
          if (file != null)
          {
  
              Guid RandomName = Guid.NewGuid();
  
  
              var fileExtention = Path.GetExtension(file.FileName);
              var FileName = RandomName + fileExtention;
              var path = Path.Combine(Server.MapPath("~/Images"), RandomName + fileExtention);
              file.SaveAs(path);
              product.Image = FileName;
  
          }
  
  
  
          db.Entry(product).State = System.Data.Entity.EntityState.Modified;
          db.SaveChanges();
  
  
          return RedirectToAction("ProductProfile", new { id = product.ProId });
      }
  
  
  ****View**** 
  
  @model Masonic_Masoinc.Product
  
  @{
      ViewBag.Title = "Create";
  }
  &lt;link href="~/CustmiseSheet/StyleSheet.css" rel="stylesheet" /&gt;
  
  &lt;h2&gt;Product&lt;/h2&gt;
  
  &lt;h1&gt;@ViewBag.IsSuccess&lt;/h1&gt;
  
  
  @using (Html.BeginForm("ProductProfile", "Home", FormMethod.Post, new { @class = "form-horizontal", enctype = "multipart/form-data" }))
  {
      @Html.AntiForgeryToken()
  
      @Html.HiddenFor(model=&gt;model.ProId)
  
      &lt;div class="form-horizontal"&gt;
          @Html.ValidationSummary(true, "", new { @class = "text-danger" })
          &lt;div class="form-group"&gt;
              @Html.LabelFor(model =&gt; model.ProductName, htmlAttributes: new { @class = "control-label col-md-2" })
              &lt;div class="col-md-10"&gt;
                  @Html.EditorFor(model =&gt; model.ProductName, new { htmlAttributes = new { @class = "form-control" } })
                  @Html.ValidationMessageFor(model =&gt; model.ProductName, "", new { @class = "text-danger" })
              &lt;/div&gt;
          &lt;/div&gt;
  
          &lt;div class="form-group"&gt;
              @Html.LabelFor(model =&gt; model.ProductCode, htmlAttributes: new { @class = "control-label col-md-2" })
              &lt;div class="col-md-10"&gt;
                  @Html.EditorFor(model =&gt; model.ProductCode, new { htmlAttributes = new { @class = "form-control" } })
                  @Html.ValidationMessageFor(model =&gt; model.ProductCode, "", new { @class = "text-danger" })
              &lt;/div&gt;
          &lt;/div&gt;
  
          &lt;div class="form-group"&gt;
              @Html.LabelFor(model =&gt; model.Price, htmlAttributes: new { @class = "control-label col-md-2" })
              &lt;div class="col-md-10"&gt;
                  @Html.EditorFor(model =&gt; model.Price, new { htmlAttributes = new { @class = "form-control" } })
                  @Html.ValidationMessageFor(model =&gt; model.Price, "", new { @class = "text-danger" })
              &lt;/div&gt;
          &lt;/div&gt;
  
          &lt;div class="form-group"&gt;
              @Html.LabelFor(model =&gt; model.Image, htmlAttributes: new { @class = "control-label col-md-2" })
              &lt;div class="col-md-10"&gt;
  
                  &lt;input type="file" name="file" value="file" /&gt;
  
                  @*@Html.EditorFor(model =&gt; model.Image, new { htmlAttributes = new { @class = "form-control" } })*@
                  @Html.ValidationMessageFor(model =&gt; model.Image, "", new { @class = "text-danger" })
  
              &lt;/div&gt;
          &lt;/div&gt;
  
          &lt;hr /&gt;
          &lt;h2&gt;Category&lt;/h2&gt;
          &lt;div class="form-group"&gt;
              @Html.LabelFor(model =&gt; model.Categories.CategoryName, htmlAttributes: new { @class = "control-label col-md-2" })
              &lt;div class="col-md-10"&gt;
  
  
                      @Html.DropDownListFor(model =&gt; model.CatId,Model.CatList, new { @Class = "form-control" })
  
  
  
                  @*@Html.EditorFor(model =&gt; model.Category.CategoryName, new { htmlAttributes = new { @class = "form-control" } })*@
                  @Html.ValidationMessageFor(model =&gt; model.Categories.CategoryName, "", new { @class = "text-danger" })
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="form-group"&gt;
              @Html.LabelFor(model =&gt; model.SubCategories.SubCategory, htmlAttributes: new { @class = "control-label col-md-2" })
              &lt;div class="col-md-10"&gt;
                  @Html.DropDownListFor(model =&gt; model.SubCatId, new SelectList(""), new { @class = "form-control" })
                  @*@Html.EditorFor(model =&gt; model.Category.CategoryName, new { htmlAttributes = new { @class = "form-control" } })*@
                  @Html.ValidationMessageFor(model =&gt; model.SubCategories.SubCategory, "", new { @class = "text-danger" })
              &lt;/div&gt;
          &lt;/div&gt;
  
  
          &lt;div class="form-group"&gt;
              &lt;div class="col-md-offset-2 col-md-10"&gt;
                  &lt;input type="submit" value="submit" class="btn btn-default" /&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  }
  
  &lt;div&gt;
      @Html.ActionLink("Back to List", "Index")
  &lt;/div&gt;
  
  
  
  &lt;script src="~/Scripts/jquery-3.4.1.min.js"&gt;&lt;/script&gt;
  
  &lt;script&gt;
  
  
      $(document).ready(function () {
  
          $("#CatId").change(function() {
  
              $.get("/Home/GetSubCatList",
                  { CatId: $("#CatId").val() },
                  function(data) {
                      $("#SubCatId").empty();
                      $.each(data,
                          function(index, row) {
                              $("#SubCatId")
                                  .append("&lt;option value='" + row.SubCatId + "'&gt;" + row.SubCategory + "&lt;/option&gt;");
  
                          });
                  });
          });
      });
  
  &lt;/script&gt;
  </code></pre>