Multiple ViewModels in View asp.net MVC

Question

I am new to asp.net mvc and viewmodels are new to me as well. I have a view that shows products. In the view I want to show all the Products in one div. then in another div I want to show just the featuredProducts and in another div the Toprated. I am trying to use different viewmodels for each because I am going to use these again on different page. Is this the correct way to go about doing this and if not what is. Also how can I do this with viewmodels just for the exercise.

Domain Model

public class Product
{
    public int ProductId { get; set; }
    public string SKU { get; set; }
    public string Name { get; set; }
    public string Title { get; set; }
    public string Description { get; set; }
    public Boolean FeaturedProduct { get; set; }
    public Boolean NewProduct { get; set; }
    public Boolean TopRated { get; set; }
    public Boolean BestSellers { get; set; }
}

ViewModelProductsMain (Parent)

public class ViewModelProductsMain 
{
    public ViewModelProducts Products{ get; set; }
    public ViewModelTopRated TopRated{ get; set; }
    public ViewModelFeatured Featured{ get; set; }
}

ViewModels (children)

public class  ViewModelProducts (Child)
//all products
{
    public int ProductId { get; set; }
    public string SKU { get; set; }
    public string Name { get; set; }
    public string Title { get; set; }
    public string Description { get; set; }
}
public class ViewModelTopRated (Child)
//all products with TopRated true
{
    public int ProductId { get; set; }
    public string SKU { get; set; }
    public string Name { get; set; }
    public string Title { get; set; }
    public string Description { get; set; }
}

public class ViewModelFeatured (Child)
//all products with Featured true
{
    public int ProductId { get; set; }
    public string SKU { get; set; }
    public string Name { get; set; }
    public string Title { get; set; }
    public string Description { get; set; }
}

Controller

public ActionResult Index()
{
    //How do I, instantiate and populate the model
    var model = new ViewModelProductsMain ();
    return View(model);
}

View

@model IEnumerable<myProject.ViewModels.ViewModelProductsMain >

Answer 1

First you should change ViewModelProductsMain to this:

public class ViewModelProductsMain
    {
        public List<ViewModelProducts> Products { get; set; }

        public List<ViewModelTopRated> TopRated { get; set; }

        public List<ViewModelFeatured> Featured { get; set; }
    }

and for display your product in your view should write this code:

@model  WebApplication1.Models.ViewModelProductsMain

@{
    ViewBag.Title = "Index";
}

<div id="AllProducts">
    @foreach (var item in Model.Products.ToList())
    {
        @item.Name
        <hr/>
    }
</div>

<div id="TopRated">
    @foreach (var item in Model.TopRated.ToList())
    {
        @item.Name
        <hr />
    }
</div>

    <div id="Featured">
        @foreach (var item in Model.TopRated.ToList())
        {
            @item.Name
            <hr />
        }
    </div>

Answer 2

i see public int ProductId { get; set; } in all of your models. seems you have some think like Foreign Keys in your data so you can make your view model better than what we see in ViewModelProductsMain.

so:

    public class Product
{
    public int ProductId { get; set; }
    public string SKU { get; set; }
    public string Name { get; set; }
    public string Title { get; set; }
    public string Description { get; set; }
}

public class ViewModelProducts {
    public virtual List<Product> Products { get; set; }
}

do what you see at top to ViewModelFeatured and ViewModelTopRated to

then:

public class ViewModelProductsMain
{

    public ViewModelProductsMain()
    {
        this.Products = new List<ViewModelProducts>();
        this.TopRated = new List<ViewModelTopRated>();
        this.Featured = new List<ViewModelFeatured>();
    }
    public List<ViewModelProducts> Products { get; set; }

    public List<ViewModelTopRated> TopRated { get; set; }

    public List<ViewModelFeatured> Featured { get; set; }

}

don't forget to write a constructor for your ViewModelProductsMain if you dont make constructor ..it brings null reference error