如何将ViewModel在ASP.NET MVC 5中的视图上分为两个列表

Question

所以我有我的产品及其相关选项的视图模型，

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

namespace CuttingEdgeOrderingSystem.Models
{
    public class ProductOptionVM
    {
        public string ProductName { get;  set; }
        public string ImageScr { get;  set; }
        public string Desc { get;  set; }
        public List<OptionsVM> Options { get;  set; }
        public int ProductId { get;  set;}
    }

    public class OptionsVM
    {
        public string OptionName { get;  set; }
        public string Price { get; set; }
        public int OptionsId { get;  set; }
    }
}

而且我想在产品下方分别显示产品列表和选项列表，每个选项都有一个单选按钮。

这是我当前的查看代码。我将产品列为清单，无法弄清楚如何在此结构的列表中显示每个选项。任何帮助表示赞赏。

@model IEnumerable<CuttingEdgeOrderingSystem.Models.ProductOptionVM>

@{
    ViewBag.Title = "Shop";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<h2>Products</h2>

<div class="row">
    @foreach (var product in Model)
    {
        <!-- Panel to display products-->
        <div class="col-md-4 col-sm-12 panel-height">
            <div class="panel panel-default">
                <span class="panel-title">@Html.DisplayFor(modelItem => product.ProductName)</span>
                <div class="">
                    <img src="@Html.DisplayFor(modelItem => product.ImageScr)" class="panel-image" />
                </div>
                <div class="panel-default text-black panel-border">
                    @Html.DisplayFor(modelItem => product.Desc)
                </div>
                <div class="panel-default text-black">
                    <!-- options for products go here -->

                </div>
                <div class="panel-default text-black">
                    <button type="button" class="btn btn-primary btn-sm">Add to Cart</button>
                </div>
            </div>
        </div>
    }
</div>

Answer 1

您可以像这样在每个选项上调用DisplayFor：

<div class="panel-default text-black">
@for(var i = 0; i < product.Options.Count(); i++)
{
    @Html.DisplayFor(o => product.Options[i])
}
</div>

不确定在您的情况下DisplayFor的外观如何，但我想您在这里就明白了。