ASP.NET MVC parent child records iCollection first item

Question

I have Albums and Images tables with a 1-many relationship. Models are automatically generated using EF database-first approach.

I want to get all albums with their images, and display only first image from each album on albums listing page. But I got confused, ICollection does not have indexes and I'm not able to convert it to a list inside view.

Sometimes it says it is Hashset

Album.cs

public partial class Album
{
    [System.Diagnostics.CodeAnalysis.SuppressMessage("Microsoft.Usage", "CA2214:DoNotCallOverridableMethodsInConstructors")]
    public Album()
    {
        this.Images = new HashSet<Image>();
    }

    public int id { get; set; }
    public string title { get; set; }

    [System.Diagnostics.CodeAnalysis.SuppressMessage("Microsoft.Usage", "CA2227:CollectionPropertiesShouldBeReadOnly")]
    public virtual ICollection<Image> Images { get; set; }
}

Image.cs

public partial class Image
{
    public int id { get; set; }
    public int album_id { get; set; }
    public string img { get; set; }
    public string title { get; set; }

    public virtual Album Album { get; set; }
}

HomeController.cs

ViewBag.Albums = db.Albums.Where(a => a.status == 1)
                          .Select(c => new
                                       {
                                            Album = c,
                                            Image = c.Images.OrderBy(i => i.sort)
                                       })
                          .AsEnumerable() // not execute yet
                          .Select(a => a.Album)
                          .OrderBy(a => a.sort)
                          .Take(6)
                          .ToList();

View.html

@if (ViewBag.Albums != null) {
       foreach (var item in ViewBag.Albums)
       {
           <div class="album">
                 @{
                   string default_image = "no-img.png";

                   if (item.Images.Count > 0)
                   {
                      //var firstImg = item.Images.First();//this showing error that item.image dont have first()
                      //List<myproject.Models.Image> images = item.Images.ToList();//this also say hashset has no list()
                      //inside 1 albums many images can be returned, I want to display first one only.
                      default_image = item.id + "/" + item.Images[0].img;
                   }
                   int indx = 1;
                }
           </div>
       }
}

Answer 1

firstly: You must create a viewmodel

public class ImageAlbumView
{
    public Image Image {get;set;}
    public Album Album {get;set;}
}

HomeController.cs:

ViewBag.Albums = db.Albums.Where(a => a.status == 1)
                      .Select(c => new ImageAlbumView()
                                   {
                                        Album = c,
                                        Image = c.Images.OrderBy(i => i.id)
                                   })
                      .AsEnumerable() // not execute yet
                      .Select(a => a.Album)
                      .OrderBy(a => a.Image.id)
                      .Take(6)
                      .ToList();

View.html:

@if ((List<ImageAlbumView>)ViewBag.Albums != null) {
   foreach (ImageAlbumViewitem in (List<ImageAlbumView>)ViewBag.Albums)
   {
       <div class="album">
             @{
               string default_image = "no-img.png";

               if (item.Images.Count > 0)
               {
                  default_image = item.id + "/" + item.Images[0].img;
               }
               int indx = 1;
            }
       </div>
   }

}