Compare two lists and pass it to View

Question

E-commerce website on ASP.NET Core 3.0

There are two model classes:

1. Products
2. Images

The multiple images of a single Product are stored in Images table. I am trying to create an All Products Page, but I am struggling with the logic of matching Image with Product Code and pass it to View which displays all the Products in shop along with thumbnail image from Images.cs and Product Title and its price from Product.cs table. How will I match data from two Model classes and make sure all the matching images and products are displayed relevantly.

Image.cs

public class Image
    {

        [Key]
        [DatabaseGenerated(DatabaseGeneratedOption.Identity)]
        public int ImageID { get; set; }
        public string ProductCode { get; set; }
        public virtual Product Product { get; set; }
        public byte[] Pic { get; set; }
        public string FileName { get; set; }
        public string ContentType { get; set; }

    }

Product.cs

public class Product
    {
        public Product()
        {
            ICollection<Category> Categories = new HashSet<Category>();
            ICollection<Image> Images = new HashSet<Image>();
        }
        [Key]
        [DatabaseGenerated(DatabaseGeneratedOption.Identity)]
        public int ProductID{ get; set; }
        [Required, StringLength(150)]
        public string ProductCode{ get; set; }
        [Required, StringLength(150)]
        public string Title { get; set; }

        [StringLength(500)]
        public string Description { get; set; }
        
        public int Price { get; set; }

        [StringLength(150)]
        public string Type { get; set; }

        [ForeignKey("Category")]
        [Required]
        public int CategoryId { get; set; }
        public virtual Category Category { get; set; }

        public virtual ICollection<Category> Categories { get; set; }
        public virtual ICollection<Image> Images { get; set; }

    }

Want to create something like this:

Answer 1

Something like this?

If you have relationships between products and images in database,

var list = _context.Product.Include(x => x.Image).ToList();

If you don't have relationship,

var imageslist = _context.Image;
var list = _context.Product.Select(x => new Product()
          {
              ProductId = x.ProductId,
              Title = x.Title,
              Price = x.Price,
              Description = x.Description,
              Images = imageslist.Where(y => y.ProductCode == x.ProductCode).ToList()
          }).ToList();

then pass list to view and use @model List< Products > in your view to display all products.

EDITED 2

Your view page

@model IEnumerable<Product>

@{
    foreach (var item in Model)
    {
        var base64image = Convert.ToBase64String(item.Images.FirstOrDefault().Pic);
        <div class="col-xs-6 col-sm-4 col-md-3 col-lg-3">
            <table>
                <tr>
                    <td>
                        <img src="data:image/png;base64,@base64image" height="100">
                    </td>
                </tr>
                <tr>
                    <td>@item.Title</td>
                </tr>
                <tr>
                    <td>@item.Price</td>
                </tr>
            </table>
        </div>
    }
}