在代码中加入表第一个实体框架MVC c＃

Question

嗨，我有两个相关的问题。 首先，我无法设置代码，首先是链接的EF表。 我有一个产品型号，产品图像模型和类别模型

 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; }
    }

这是从控制器代码传递的模型

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

但我只能得到产品和类别。 我无法弄清楚如何访问productimage字段。

问题1.如何从productimage模型中显示与该产品相关的产品，类别和所有图像。

我的观点是使用

@model IEnumerable<shop.Models.Product>

由于我不需要编辑任何数据，因此全部用于查看目的。 我没有获得知识产权或访问productimage模型。

我试过这个

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

但它不起作用。 这是因为它是一个集合，我必须通过数据循环一些如何？

问题2.一旦我开始工作，我想在不同的部分显示不同的产品。 ex（新产品，促销产品，热门产品）在同一页面的不同区域。 什么是最好的方式，我该怎么做。 我的猜测是不同的视图模型，组合视图模型或一个模型，然后使用if语句循环数据。

请举个例子谢谢

Answer 1

首先，我会复制到ProductImages - 更清楚它是一个集合。 接下来，由于它是一个集合，您通常会使用网格或表来显示数据。

至于按类型分组，你可以使用一些LINQ来过滤。

这是一个bootstrap风格的例子：

<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

在史蒂夫的帮助下，这是我最终使用的代码。

@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" >

                }