Cascading DropDownList in Asp.Net Mvc - asp.net

Question

I get this error in my PartialView when I run my project "An exception of type 'Microsoft.CSharp.RuntimeBinder.RuntimeBinderException' occurred in Unknown Module.
but was not handled in user code
Additional information: System.Web.Mvc.SelectListItem contains no definition for value"
I have two tables category and Product in my databse, using EntityFramework ADO.ENTITY and the project is ASP.NET MVC
In Product table I have ProductId, ProductName and CategoryId
I want to create Cascading from Category DropDownList to Product DropDownList , I mean I want first to chose Category and then all product with the same CategoryId.
But does not working as it is, and please Help me.
This is my Controller:
public class CasController : Controller
{
// GET: Cas
public ActionResult Index()
{
Db db = new Db();
ViewBag.Categories = new SelectList(GetCategoryList(), "CategoryId", "CategoryName");
return View();
}
public List<Category> GetCategoryList()
{
Db db = new Db();
List<Category> categories = db.Category.ToList();
return categories;
}
public ActionResult GetProductList(int catId)
{
using (Db db = new Db())
{
List<Product> prList = db.Product.Where(x => x.CatId == catId).ToList();
ViewBag.ProductOPtions = new SelectList(prList, "ProductId", "ProductName");
return PartialView("DisplayProduct");
}
}
}
And this is my Cascadingclass
public class CasCadingClass
{
public int CatId { get; set; }
public int PrId { get; set; }
}
This is Index view
#model Market.Models.CasCadingClass
#{
ViewBag.Title = "Index";
}
<h2>Index</h2>
#if (ViewBag.Categories != null)
{
#Html.DropDownListFor(m => m.CatId, ViewBag.Categories as SelectList, "---Select Category---", new { #class = "form-control" })
}
#Html.DropDownListFor(m => m.PrId, new SelectList(""), "--Select Product--", new { #class = "form-control" })
<script src="~/Scripts/jquery-3.3.1.min.js"></script>
<script>
$(document).ready(function () {
$("#CatId").change(function () {
var catId = $(this).val();
debugger
$.ajax({
type: "Post",
url: "/Cas/GetProductList?catId=" + catId,
contentType: "html",
success: function (response) {
debugger
$("#PrId").empty();
$("#PrId").append(response);
}
})
})
});
</script>
// Here in PartielView goes error
#model Market.Product
<option value="">--- select Product---</option>
#if (ViewBag.ProductOPtions != null)
{
foreach (var item in ViewBag.ProductOPtions)
{
<option value="#item.value">#item.Text</option>
}
}