Displaying multiple images from database in view

Question

I am working on a project where users should be able to upload images and have them shown on their individual page as a grid gallery.

I have watched this tutorial to be able to upload images from the application to the database and show an image with a specific ID. It all works fine.

https://www.youtube.com/watch?v=5L5W-AE-sEs&

My view controller looks like this:

[HttpGet]
        public ActionResult View(int id)
        {
            Image imageModel = new Image();
            using (portfolio_project_dbEntities db = new portfolio_project_dbEntities())
            {
                imageModel = db.Images.Where(x => x.ImageID == id).FirstOrDefault();
            }
            return View(imageModel);
        }

The view part:

<img src="@Url.Content(Model.ImagePath)" width="200"/>

Now I would like to be able to show multiple images on one page (images with the same userid) but I don't really understand how to do this. How do I pass multiple images from the controller to the view? Or maybe this is better to do in the view?

You may also want to consider creating a View Model for this that has a public List<Image> Images {get; set; } on it. — zgood
– zgood, Commented Nov 5, 2018 at 23:40

Shyju · Accepted Answer · 2018-11-05 23:55:22Z

2

The FirstOrDefault method returns a single item(or default) from a collection. So in the code you shared in the question where you are filtering the images using this expression .Where(x => x.ImageID == id) and then calling the FirstOrDefault method on that, which will yield a single item at max.

So If you want to show more than one item, remove that FirstOrDefault method call. In the below sample, I am assuming your Image object has a UserId property of int type and you want to filter the Image objects with UserId value same as your parameter value. So use an expression to check that in your Where method.

[HttpGet]
public ActionResult View(int id)
{
   var images = new List<Image>();
   var db = new portfolio_project_dbEntities())
   {
      images  = db.Images
                  .Where(x => x.UserId == id)
                  .ToList();
    }
    // images is a list of Image objects. Let's pass it to the view.
    return View(images);
 }

Now since you are passing a collection of Image objects to the view, make sure your view is strongly typed to a collection of Image.

@model IEnumerable<YourNamespaceHere.Image>
<h1>Images</h1>
@foeach(var img in Model)
{
  <img src="@Url.Content(img .ImagePath)" width="200"/>
}

edited Nov 5, 2018 at 23:55

answered Nov 5, 2018 at 23:38

Shyju

220k106 gold badges421 silver badges499 bronze badges

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

1 Comment

Sandra Over a year ago

This seems promising but I am having problem with my database. It is no longer shown in the Server explorer so I am trying to connect again but it doesn't seem to exist? It clearly does since the website still works and displays data from it though.. I would like to add the field UserID to my Image table. That is why I am trying to reach it.

Collectives™ on Stack Overflow

Displaying multiple images from database in view

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related