Display multiple images from database using view model

Question

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.

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.

Controller

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);
}

Data models

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; }
}

View models

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; }
}

View

@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

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);

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

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