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

You also need to include you models for Furniture (just a few properties in including the collection property for the images) and FurnitureImages — user3559349
– user3559349, Commented Feb 16, 2017 at 0:24
@StephenMuecke sorry don't understand your sentence , you mean in <code>foreach(var images in model.SecondaryImages) — M-Misha-M
– M-Misha-M, Commented Feb 16, 2017 at 0:51
Never mind - I'll edit your question with the necessary code based on your last question (give me 5 min) and then I'll add an answer. — user3559349
– user3559349, Commented Feb 16, 2017 at 0:56
Can you double check my edit - the data models I have added and confirm its correct. (and I deleted the POST method since its not relevant to your question) — user3559349
– user3559349, Commented Feb 16, 2017 at 1:02

score 1 · Accepted Answer · 2017-02-16 12:14:54Z

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.

edited Feb 16, 2017 at 12:14

answered Feb 16, 2017 at 1:21

user3559349

Sign up to request clarification or add additional context in comments.

6 Comments

M-Misha-M Over a year ago

thanks I'll try ypur code in the morning and if it wil work i accepted your asnwer. Thank you very much

M-Misha-M Over a year ago

I can't write MainImage.Id = mainImage.Id, in the brackets { } in FurnitureVM , so do it without brackets ??

M-Misha-M Over a year ago

yay , it's work , thanks, but i feel i will ask next questions about post methods , sorry :)

user3559349 Over a year ago

I keep an eye out for it :)

M-Misha-M Over a year ago

stackoverflow.com/questions/42309670/… I really need your help , explain how I must to write my code , correctly , thanks

|

Collectives™ on Stack Overflow

Display multiple images from database using view model

1 Answer 1

6 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related