trouble joining tables in code first entity framework MVC c#

Question

Hi I have 2 questions both related. First I a having trouble setting up code first EF tables that link. I have a product model, productimage model and category model as 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 string DescriptionShort { get; set; }


        public decimal Weight { get; set; }
        public string Size { get; set; }
        public decimal Price { get; set; }
        public int WebStatus { get; set; }
        public int CategoryId { get; set; }
        public decimal SalePrice { get; set; }
        public DateTime SaleDateExpires { get; set; }
        public Boolean FeaturedProduct { get; set; }
        public Boolean NewProduct { get; set; }
        public Boolean TopRated { get; set; }
        public Boolean BestSellers { get; set; }
        public string ImageUrl { get; set; }
        public string ImageName { get; set; }
        public string ImageExtension { get; set; }

        public Category Category { get; set; }
        public ICollection<ProductImage> ProductImage { get; set; }   
    }   

 public class ProductImage
        {        
            public int ProductImageID { get; set; }
            public int ProductID { get; set; }
            public string ImageType { get; set; }
            public string ImageUrl { get; set; }
            public string ImageName { get; set; }

            public Product Product { get; set; }      
        }

public class Category
    {
        public int CategoryId { get; set; }
        public string Name { get; set; }
        public string Description { get; set; }
    }

Here is model passed from the controller code

var products = _context.Products.Include(c => c.Category).Include(i => i.ProductImage);

But I can only get the products and the category. I cant figure out how to have access to the productimage fields.

Question 1. How can I display the products, category and all images associated with that product from the productimage model.

My view is using

@model IEnumerable<shop.Models.Product>

Since I don't need to edit any data it's all for view purposes. I don't get intelisense or access to the productimage model.

I have tried this

<img class="full-width img-responsive" src="@product.ProductImage.>

but it doesn't work. Is this because it is a collection and I have to loop thru the data some how?

Question 2. Once I get that working, I want to display different products in different sections. ex ( new products, sale products , popular products) in different areas of the same page. What is the best way and how do I do this. My guess is different viewmodels, combined viewmodels, or one model and then looping thru the data with if statements.

Please give an example thank you

Answer 1

First, I would pluralize to ProductImages - much clearer that it is a collection. Next, since it is a collection you would typically use a grid or table to display the data.

As for grouping by type, you could just use some LINQ to filter.

Here is a bootstrap styled example:

<h2>New Products</h2>
<table class="table table-condensed table-striped">
    <tr>
        <th class="col-md-4">Product Name</th>
        <th class="col-md-4">SKU</th>
        <th class="col-md-4">Description</th>
    </tr>
    // filter just the new products. could add an `if` to check if empty
    @foreach (var product in Model.Products.Where(pi => pi.NewProduct))
    {
        <tr>
            <td>
                @Html.DisplayFor(m => product.Name)
            </td>
            <td>
                @Html.DisplayFor(m => product.SKU)
            </td>
            <td>
                @Html.DisplayFor(m => product.Description)
            </td>
        </tr>
        <tr>   // Add another row (or column) for image(s)
            <table>
                // header here
                // loop thru multiple images for this product
                @foreach (var image in product.ProductImages)
                {
                    <tr>
                        <td>image.Name</td>
                        // other columns
                    </tr>
                }
            <table>

        </tr>

    }

</table>

// Repeat for other sections.


@foreach (var product in Model.Where(pi => pi.FeaturedProduct == true))
            {
                foreach (var image in product.ProductImage.Where(it => it.ImageType == "Thumb"))
                {
                    <img class="full-width img-responsive" src="@image.ImageUrl" >

            }

Answer 2

With help from Steve this is the code I ended up using that worked.

@foreach (var product in Model.Where(pi => pi.FeaturedProduct == true))
            {
                foreach (var image in product.ProductImage.Where(it => it.ImageType == "Thumb"))
                {
                    <img class="full-width img-responsive" src="@image.ImageUrl" >

                }