如何在 MVC 5 的 @foreach 中只显示一次外键

Question

我有一个项目（如下），其中有类别和产品。每个类别都有多个产品，从模型中可以看出，类别 ID 被引用为外键。我想要做的是让每个类别显示为一个 div，相应的产品显示在下面的无序列表中。使用我拥有的代码，我不断得到一个 div 和一个产品，每个产品的类别都重复。

我已经搜索和搜索，但似乎无法找到解决方案。我哪里错了？

视图模型

使用系统； 使用 System.Collections.Generic； 使用 System.ComponentModel.DataAnnotations； 使用 System.ComponentModel.DataAnnotations.Schema； 使用 System.Linq； 使用 System.Web； 使用 System.Web.Mvc；

namespace WebApplication1.Web.Models
{
public class Category
{
    public int CategoryID { get; set; }

    [Required, Display(Name = "Category Name")]
    public string CategoryName { get; set; }

    public bool IsDisplayedInMainMenu { get; set; }
}

public class Product
{
    public int ProductID { get; set; }

    public int CategoryID { get; set; }

    [ForeignKey("CategoryID")]
    [Display(Name = "Category Name")]
    public Category CategoryName { get; set; }

    [Required, Display(Name = "Product Name")]
    public string ProductName { get; set; }

    [Required, Display(Name = "Product Description")]
    [DataType(DataType.MultilineText)]
    public string ProductDescription { get; set; }
}
}

产品控制器

namespace WebApplication1.Controllers
{
public class ProductsController : Controller
{
    private ServiceContext db = new ServiceContext();
    // GET: Products
    public ActionResult Index()
    {
        var products = db.Products.Include(p => p.CategoryName);
        return View(products.ToList());
    }
}
}

查看 model IEnumerable

@{
ViewBag.Title = "Products";
}

<h2>@ViewBag.Title</h2>

<div class="row">
@foreach (var item in Model)
{
    <div class="col-md-3">
        <h4><strong>@item.CategoryName.CategoryName</strong></h4>
    <ul class="list-unstyled">
        @if (item.ProductName.Any())
        {
            <li>
                    @item.ProductName
            </li>
        }
    </ul>
    </div>
}
</div>

产品

木材 2×4

木材 1 X 4

木材 胶合板

电动工具 钻孔

电动工具 圆锯

花园 柠檬树

花园 橘子树

紧固件 干墙螺丝

紧固件 甲板螺丝

Answer 1

更改您发送到视图的数据。而不是 this.DB.Products...尝试以下操作：

return this.View(this.DB.Category.Select(x => new { CategoryName = x.CategoryName, Products = x.Products);

...或类似的东西，具体取决于您的数据库结构。这个想法是有一个类似于您实际想要在视图中显示的模型。这通常称为视图模型。

public class CategoryViewModel
{
    public string CategoryName {get; set;}
    public IEnumerable<Product> Products {get; set;}
}

如果你有这样一个类，那么你的控制器方法可能如下所示：

return this.View(this.DB.Category.Select(x => new CategoryViewModel { CategoryName = x.CategoryName, Products = x.Products));

那么在你看来：

<div class="col-md-3">
<h4><strong>@Model.CategoryName</strong></h4>
@foreach (var item in Model.Products)
{
    <ul class="list-unstyled">
        @item.ProductName (or something)
    </ul>
}
</div>

我不在开发机器上，所以我真的无法判断我是否打错了。不过，我很乐意回答您的任何问题。

Answer 2

如果您要退回选定类别下的产品，您可以使用以下代码

@if(Model.Count()>0)
{
   <h4><strong>@Model.ToList()[0].CategoryName.CategoryName</strong></h4>
}

希望能成功