使用視圖模型顯示數據庫中的多個圖像

Question

我想在視圖中顯示幾個圖像。 因此，我將圖像上載到文件系統，並將有關圖像的信息存儲在數據庫中。 我有一對多的表關系（ Furniture是主表， FurnitureImages是我保存圖像信息的位置）。 我也使用View模型。

但是圖像不希望顯示，因為在Edit GET方法中傳遞參數List<SecondaryImages>出錯。 我不能寫model.SecondaryImages. = ... model.SecondaryImages. = ...因為它是List這是我的代碼部分。

控制者

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)" />
}

Answer 1

GET方法中的foreach循環正在遍歷視圖模型的SecondaryImages屬性，該屬性只是一個空集合。 您需要遍歷數據模型的Images集合，並初始化ImageVM新實例，然后將其添加到視圖模型SecondaryImages集合中。

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屬性似乎是不必要的。

另外，我建議您遵循約定，並將FurnitureImages （復數）重命名為FurnitureImage因為它描述了單個對象。