使用视图模型从数据库显示多个图像 [英] Display multiple images from database using view model

问题描述

我想在我的视图中显示几个图像。所以我上传图像到文件系统和有关图像的信息存储在数据库中。我有一个表关系一对多（ Furniture 是主表， FurnitureImages 在哪里我保存图像的信息）。此外，我使用View模型。

I want to display several images in my view . So I upload images to file system and information about images store in database. I have a table relation one to many ( Furniture is primary table , FurnitureImages where i save image's info). Also I use View model.

但是图像不想显示，因为传递参数列表< SecondaryImages> 在Edit GET方法中。我不能写 model.SecondaryImages。 = ... ，因为它列表这是我的代码部分。

But images doesn't want to display because something wrong with passing parameter List<SecondaryImages> in Edit GET method. I can't write model.SecondaryImages. = ... because it is List Here is my part of code.

控制器

public ActionResult Edit(int? id)
{
    ....
    var furniture = db.Furnitures.Find(id);
    FurnitureVM model = new FurnitureVM();
    model.Name = furniture.Name;
    .... // set other properties of the view model based on the data model
    FurnitureImages main = furniture.Images.Where(x => x.IsMainImage).FirstOrDefault();
    foreach(var i in model.SecondaryImages)
    {
        i.DisplayName = main.DisplayName;
        i.Path = main.Path;
        i.IsMainImage = main.IsMainImage;
    }
    return View(model);
}

数据模型

public class Furniture
{
    ....
    public virtual ICollection<FurnitureImages> Images { get; set; }
}
public class FurnitureImages
{
    [Key]
    public int Id { get; set; }
    public string Path { get; set; }
    public string DisplayName { get; set; }
    public bool IsMainImage { get; set; } // this determines if its the main or secondary image
    public int FurnitureId { get; set; } // navigation property
    public virtual Furniture Furniture { get; set; }
}

查看模型

public class FurnitureVM
{
    public FurnitureVM()
    {
        ....
        this.SecondaryImages = new List<ImageVM>();
    }       
    ....
    public IEnumerable<HttpPostedFileBase> SecondaryFiles { get; set; }
    public List<ImageVM> SecondaryImages { get; set; }        
}
public class ImageVM
{ 
    public int? Id { get; set; }
    public string Path { get; set; }
    public string DisplayName { get; set; }
    public bool IsMainImage { get; set; }
}

查看

@for (int i = 0; i < Model.SecondaryImages.Count; i++)
{
    @Html.HiddenFor(m => m.SecondaryImages[i].Id)
    @Html.HiddenFor(m => m.SecondaryImages[i].Path)
    @Html.HiddenFor(m => m.SecondaryImages[i].DisplayName)
    <img src="@Url.Content(Model.SecondaryImages[i].Path)" />
}

推荐答案

> GETach方法中的foreach 循环通过视图模型的 SecondaryImages 属性进行迭代，这只是一个空集合。您需要遍历数据模型的 Images 集合，并初始化 ImageVM 的新实例，然后添加到视图模型 SecondaryImages 集合。

Your foreach loop in the GET method is iterating through the SecondaryImages property of your view model which is just an empty collection. You need to iterate through the Images collection of your data model, and initialize new instances of ImageVM and add then to the view model SecondaryImages collection.

Furniture furniture = db.Furnitures.Find(id);
IEnumerable<FurnitureImages> images = furniture.Images; // all images
FurnitureImages mainImage = images.Where(x => x.IsMainImage).FirstOrDefault();
IEnumerable<FurnitureImages> secondaryImages = images.Where(x => !x.IsMainImage);
FurnitureVM model = new FurnitureVM()
{
    Name = furniture.Name,
    .... // set other properties
    MainImage = new ImageVM()
    {
        Id = mainImage.Id,
        DisplayName = mainImage.DisplayName,
        ....
    },
    SecondaryImages = secondaryImages.Select(x => new ImageVM()
    {
        Id = x.Id,
        Path = x.Path,
        DisplayName = x.DisplayName
    }).ToList()
};
return View(model);

注意视图中的 bool IsMainImage 除非您在视图中生成一个复选框，否则该模型似乎不必要。

Note the bool IsMainImage property in your view model seems unnecessary unless your generating a checkbox for it in the view.

此外，我建议您遵循惯例并重命名 FurnitureImages （复数）到 FurnitureImage ，因为它描述了单个对象。

I addition, I recommend you follow convention and rename FurnitureImages (plural) to FurnitureImage since it describes a single object.

这篇关于使用视图模型从数据库显示多个图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！