I have a mistake in ASP.NET MVC - asp.net

Question

Index.cshtml
#using eCommerceStatic.Models;
#model IEnumerable<ProductModel>
#{
//ViewBag.Title = "Index";
}
<!--Carousel Wrapper-->
<div id="carousel-example-1z" class="carousel slide carousel-fade pt-4" data-ride="carousel">
<!--Indicators-->
<ol class="carousel-indicators">
<li data-target="#carousel-example-1z" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-1z" data-slide-to="1"></li>
<li data-target="#carousel-example-1z" data-slide-to="2"></li>
</ol>
<!--/.Indicators-->
<!--Slides-->
<div class="carousel-inner" role="listbox">
<!--First slide-->
<div class="carousel-item active">
<div class="view" style="background-image: url('https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/8-col/img%282%29.jpg'); background-repeat: no-repeat; background-size: cover;">
<!-- Mask & flexbox options-->
<div class="mask rgba-black-strong d-flex justify-content-center align-items-center">
<!-- Content -->
<div class="text-center white-text mx-5 wow fadeIn">
<h1 class="mb-4">
<strong>Learn Bootstrap 4 with MDB</strong>
</h1>
<p>
<strong>Best & free guide of responsive web design</strong>
</p>
<p class="mb-4 d-none d-md-block">
<strong>
The most comprehensive tutorial for the Bootstrap 4. Loved by over 500 000 users. Video and
written versions
available. Create your own, stunning website.
</strong>
</p>
<a target="_blank" href="https://mdbootstrap.com/education/bootstrap/" class="btn btn-outline-white btn-lg">
Start
free tutorial
<i class="fas fa-graduation-cap ml-2"></i>
</a>
</div>
<!-- Content -->
</div>
<!-- Mask & flexbox options-->
</div>
</div>
<!--/First slide-->
<!--Second slide-->
<div class="carousel-item">
<div class="view" style="background-image: url('https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/8-col/img%283%29.jpg'); background-repeat: no-repeat; background-size: cover;">
<!-- Mask & flexbox options-->
<div class="mask rgba-black-strong d-flex justify-content-center align-items-center">
<!-- Content -->
<div class="text-center white-text mx-5 wow fadeIn">
<h1 class="mb-4">
<strong>Learn Bootstrap 4 with MDB</strong>
</h1>
<p>
<strong>Best & free guide of responsive web design</strong>
</p>
<p class="mb-4 d-none d-md-block">
<strong>
The most comprehensive tutorial for the Bootstrap 4. Loved by over 500 000 users. Video and
written versions
available. Create your own, stunning website.
</strong>
</p>
<a target="_blank" href="https://mdbootstrap.com/education/bootstrap/" class="btn btn-outline-white btn-lg">
Start
free tutorial
<i class="fas fa-graduation-cap ml-2"></i>
</a>
</div>
<!-- Content -->
</div>
<!-- Mask & flexbox options-->
</div>
</div>
<!--/Second slide-->
<!--Third slide-->
<div class="carousel-item">
<div class="view" style="background-image: url('https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/8-col/img%285%29.jpg'); background-repeat: no-repeat; background-size: cover;">
<!-- Mask & flexbox options-->
<div class="mask rgba-black-strong d-flex justify-content-center align-items-center">
<!-- Content -->
<div class="text-center white-text mx-5 wow fadeIn">
<h1 class="mb-4">
<strong>Learn Bootstrap 4 with MDB</strong>
</h1>
<p>
<strong>Best & free guide of responsive web design</strong>
</p>
<p class="mb-4 d-none d-md-block">
<strong>
The most comprehensive tutorial for the Bootstrap 4. Loved by over 500 000 users. Video and
written versions
available. Create your own, stunning website.
</strong>
</p>
<a target="_blank" href="https://mdbootstrap.com/education/bootstrap/" class="btn btn-outline-white btn-lg">
Start
free tutorial
<i class="fas fa-graduation-cap ml-2"></i>
</a>
</div>
<!-- Content -->
</div>
<!-- Mask & flexbox options-->
</div>
</div>
<!--/Third slide-->
</div>
<!--/.Slides-->
<!--Controls-->
<a class="carousel-control-prev" href="#carousel-example-1z" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carousel-example-1z" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
<!--/.Controls-->
</div>
<!--/.Carousel Wrapper-->
<!--Main layout-->
#Html.Partial("_GetCategories")
<main>
<div class="container">
<!--Navbar-->
<!--/.Navbar-->
#Html.Partial("_ProductList",Model)
</div>
</main>
<!--Main layout-->
HomeController.cs
public PartialViewResult _GetCategories()
{
return PartialView(_context.Categories.ToList());
}
_GetCategories.cshtml
#model IEnumerable<eCommerceStatic.Entity.Category>
eCommerceStatic.Entity
<nav class="navbar navbar-expand-lg navbar-dark mdb-color lighten-3 mt-3 mb-5">
<!-- Navbar brand -->
<span class="navbar-brand">Kategoriler :</span>
<!-- Collapse button -->
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#basicExampleNav"
aria-controls="basicExampleNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<!-- Collapsible content -->
<div class="collapse navbar-collapse" id="basicExampleNav">
<!-- Links -->
#foreach (var category in Model)
{
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" href="/Home/List/#category.Id">#category.Name</a>
</li>
</ul>
}
<!-- Links -->
<form class="form-inline">
<div class="md-form my-0">
<input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
</div>
</form>
</div>
<!-- Collapsible content -->
</nav>
Error
Additional information: The model item passed into the dictionary is of type 'System.Collections.Generic.List1[eCommerceStatic.Models.ProductModel]', but this dictionary requires a model item of type 'System.Collections.Generic.IEnumerable1[eCommerceStatic.Entity.Category]'
How can I fix this?

Answer 1

It is because, your Partial View which is:
_GetCategories.cshtml requires #model IEnumerable<eCommerceStatic.Entity.Category>
but your Index.cshtml which is your Main View in this case, requires
#model IEnumerable<ProductModel>
So, you should be using #model IEnumerable<ProductModel> in your _GetCategories.cshtml
In these cases, consider using a common model class. You can do something similar to this:
Create a new Model class,
Create List<ProductModel> and List<Category> properties.
public class ProductsAndCategories
{
public List<ProductModel> Products { get; set; }
public List<Category> Categories { get; set; }
}
So in your Index :
public IActionResult Index()
{
var model = new ProductsAndCategories
{
//Define your IEnumerable<ProductModel>
//Below is an example...
Products = _context.ProductModel.ToList()
};
return View(model);
}
And in your _GetCategories :
public PartialViewResult _GetCategories()
{
var model = new ProductsAndCategories
{
Categories = _context.Categories.ToList()
};
return PartialView(model);
}
CSHTML
Index.cshtml:
#model ProductsAndCategories
and in your _GetCategories.cshtml:
#model ProductsAndCategories
<nav class="navbar navbar-expand-lg navbar-dark mdb-color lighten-3 mt-3 mb-5">
<!-- Navbar brand -->
....