C# 如何使用MVC中的视图模型在razor视图中显示多个模型？

在做了这么多的研发工作后，我刚刚开始使用mvc，我开始了这个测试项目，但现在陷入了这样的境地：我不知道如何创建一个viewmodel来显示来自两个不同模型的数据

模式1

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

    [Required(ErrorMessage = "Enter Product name")]
    [StringLength(160)]
    public string ProductName { get; set; }


    [Required(ErrorMessage = "Enter Product Description")]
    [StringLength(500)]
    public string ProductDescription { get; set; }

    public Product() { this.AddDate = DateTime.Now; }

    public DateTime AddDate { get ; private set; }

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

    [Required(ErrorMessage = "Location")]
    public bool location { get; set; }
}

模式2

public class ProductPicture
{
    public int id { get; set; }
    public int ProductId { get; set; }
    [Required(ErrorMessage ="Please Select Picture")]
    public string pictureurl { get; set; }

}

通过使用视图模型，如果每个产品只有一个图像，我可以得到显示，但是由于有多个图像，那么我如何才能得到第一个图像或图像列表，并将其显示到razor视图中

下面是我的控制器和视图，两者都很混乱：|

public ActionResult Details(long? id)
{
    if (id == null)
    {
        return new HttpStatusCodeResult(HttpStatusCode.BadRequest);
    }
    ProductViewModel product = new ProductViewModel();
    Mapper.CreateMap<Product, ProductViewModel>().ForMember(m => m. );

    var pro = Mapper.Map< ProductViewModel>(product);
    product.ProductPictures = db.ProductPictures.Where(m => m.ProductId == id);
   // product.Products = db.Products.Where(m=>m.ProductId==id);
               //Product product = db.Products.Find(id);
    if (product == null)
    {
        return HttpNotFound();
    }
    return View(product);
}

public ActionResult详细信息（long？id）
{
if（id==null）
{
返回新的HttpStatusCodeResult（HttpStatusCode.BadRequest）；
}
ProductViewModel产品=新的ProductViewModel（）；
CreateMap（）.formMember（m=>m.）；
var pro=Mapper.Map（产品）；
product.ProductPictures=db.ProductPictures.Where（m=>m.ProductId==id）；
//product.Products=db.Products.Where（m=>m.ProductId==id）；
//Product Product=db.Products.Find（id）；
如果（产品==null）
{
返回HttpNotFound（）；
}
返回视图（产品）；
}

详细信息视图

@model sullivan.Models.ProductViewModel

@{
    ViewBag.Title = "Details";
}

<h2>Details</h2>

<div>



        <div class="col-sm-7">
            <div class="product-information">
                <!--/product-information-->
                <img src="images/product-details/new.jpg" class="newarrival" alt="" />
                <h2>@Html.DisplayFor(model => model.ProductName)</h2>
                <p>
                    @Html.DisplayFor(model => model.ProductDescription)</p>
                <img src="images/product-details/rating.png" alt="" />


                <a href=""><img src="images/product-details/share.png" class="share img-responsive" alt="" /></a>
            </div><!--/product-information-->
        </div>
        <p>
            @Html.ActionLink("Edit", "Edit", new { id = Model.ProductId }) |
            @Html.ActionLink("Back to List", "Index")
        </p>





    </div>

    <div id="similar-product" class="carousel slide" data-ride="carousel">

        <!-- Wrapper for slides -->
        <div class="carousel-inner">
            <div class="item active">
                @foreach (var Picture in Model.ProductPictures)
                {
                    <a href=""><img src="~/images/wallimages/imagepath/thumb2_@Picture.pictureurl" alt=""></a>
                }
            </div>


        </div>

        <!-- Controls -->
        <a class="left item-control" href="#similar-product" data-slide="prev">
            <i class="fa fa-angle-left"></i>
        </a>
        <a class="right item-control" href="#similar-product" data-slide="next">
            <i class="fa fa-angle-right"></i>
        </a>
    </div>

</div>

@model sullivan.Models.ProductViewModel
@{
ViewBag.Title=“详细信息”；
}
细节
@Html.DisplayFor（model=>model.ProductName）

@DisplayFor（model=>model.ProductDescription）


@ActionLink（“编辑”，“编辑”，新的{id=Model.ProductId}）|
@ActionLink（“返回列表”、“索引”）

@foreach（Model.ProductPictures中的var图片）
{
}

---

正如在razor视图中一样，我可以在底部分别获得图像列表，但我只需要第一个图像和产品的其他数据。如何实现这一点？

假设您的

ProductViewModel

中有

类型的
字符串的
ProductImage
属性

public class ProductViewModel
{
  public string ProductImage  { set;get;}
  //Other existing properties
}

在action方法中，您可以调用product pictures集合上的
First（）
方法（如果至少存在一个）

或
如果您的视图模型中已经有一个集合属性来存储产品图像URL列表，但不想创建一个新的集合来存储第一个图像，那么只需在razor视图中对该集合调用first（）方法即可

<h1>Product Image</h1>
@if(Model.ProductPictures.Any())
{
  <div>
     <img src="~/images/wallimages/imagepath/thumb2_@Model.ProductPictures.First().pictureurl" />
  </div>
}

产品形象
@if（Model.ProductPictures.Any（））
{
}
实际上我有公共IEnumerable ProductPictures{get；set；}我应该将其设置为字符串还是这样做？以便如何使用视图模型？我的意思是，我应该把我需要的来自不同模型的所有字段放在控制器中，用值映射这些字段？？？不。你可以使用你现有的集合。只需对集合调用
First（）
方法。看看最新的答案。
<h1>Product Image</h1>
@if(Model.ProductPictures.Any())
{
  <div>
     <img src="~/images/wallimages/imagepath/thumb2_@Model.ProductPictures.First().pictureurl" />
  </div>
}