multiple image list failed to be displayed

Question

I want to display my multiple image list which I uploaded my specific product. but when I using a loop for display, I don't understand why?.here is my code:

Model

//model for multiple images

  public class Photo1
    {
        [Key]
        public int PhotoId { get; set; }
        public string Image { get; set; }
    }



//main model

 public class Shop
    {
        public int Id { get; set; }

        [Required]
        [Display(Name = "product name")]
        public String Name { get; set; }
        [Required]
        public int Price { get; set; }


        public String Image { get; set; }
        public String Image1 { get; set; }

        public List<Photo1> Photos { get; set; }

        [Required]
        public int Quantity { get; set; }

        [Required]
        public bool IsAvailable { get; set; }

        [Display(Name = "Category")]

        public int? CategoryTypeId { get; set; }

        [ForeignKey("CategoryTypeId")]
        public Category Category { get; set; }

        [Display(Name = "SubCategory")]

        public int? SubCategoryTypeId { get; set; }

        [ForeignKey("SubCategoryTypeId")]
        public SubCategory SubCategory { get; set; }
    }

Controller

        [HttpGet]

        public ActionResult Details(int? id)
        {
          

            if (id == null)
            {
                return NotFound();
            }

            var product = _db.Shop.Include(c => c.Category).Include(c => c.SubCategory).FirstOrDefault(c => c.Id == id);
          

            if (product == null)
            {
                return NotFound();
            }

            return View(product);
        }

    }

Details.cshtml

@model DigitalShop.Models.Shop






@{
    ViewData["Title"] = "Details";
}


<br />
<h2 class="text-danger"> Product Details</h2>
                </br></br>

@*<div class="col-8 position-relative ">
        <img src="~/@Model.Image" width="425px" height="200px" sizes="cover" style="background-size:cover" />

    </div>*@
<form method="post" asp-action="" enctype="multipart/form-data">
    <div class="row">
        <div class="col-1 ml-4">

            <img src="~/@Model.Image" style="width:100%" onclick="myFunction(this);">
            </br></br>
            @*<img src="~/@Model.Image1" style="width:100%" onclick="myFunction(this);">*@
            </br></br>
           @if (Model.Photos != null)
            {
                @foreach (var photo in Model.Photos)
                {
                    @if (photo != null)
                    {
                        <img src="~/@photo.Image" alt="Card Image" class="card-img-top" style="height: 120px;" onclick="myFunction(this);"/>
                    }
                }
            }
            

        </div>

        <div class="col-4 container">
            <span onclick="this.parentElement.style.display='none'" class="closebtn">&times;</span>
            <img src="~/@Model.Image" class="active" id="expandedImg" style="width:100%">
            <div id="imgtext"></div>
        </div>
        <div class="col-4">
            <h2><i class="fa fa-heart-o" aria-hidden="true"></i> @Model.Name</h2>
            <input type="hidden" asp-for="Id" />
            </br>

            <h4>@Model.Price $</h4></br>
            <small class="text-danger">Clearence</small>

            <hr>


            </br></br></br></br>





            <script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
            <div class="col-sm-12 col-xs-12 spinner-block">
                <div class="number-spinner">

                    <div class="input-group number-spinner">
                        <b class="mr-4"> <label asp-for="@Model.Quantity"></label></b></br>
                        <span class="input-group-btn">
                            <button type="button" class="btn btn-default btn-number btncartsniper" data-type="minus" data-dir="dwn"><span class="fa fa-minus fa-sm"></span></button>
                        </span>
                        <input asp-for="@Model.Quantity" class="form-control input-number Snippper_qty" value="0" type="number">
                        <span class="input-group-btn">
                            <button type="button" class="btn btn-default btn-number btncartsniper" data-type="plus" data-dir="up"><span class="fa fa-plus fa-sm"></span></button>
                        </span>
                    </div>
                </div>




            </div>
            </br>
            @*@if (leathers != null)
                {*@
            <button type="submit" class="btn btn-danger form-control" asp-action="Remove" asp-route-id="@Model.Id">Remove To Cart</button>
            @*}*@
            @*else
                {*@
            <input type="submit" value="Add To Cart" class="btn btn-dark form-control" />
            @*}*@

        </div>


    </div>



    <div>

        <a asp-action="Index" class="btn btn-danger">Back To List</a>
    </div>
</form>




@section Scripts{

    @{await Html.RenderPartialAsync("_ValidationScriptsPartial");

    }



    <script>
        function myFunction(imgs) {
            var expandImg = document.getElementById("expandedImg");
            var imgText = document.getElementById("imgtext");
            expandImg.src = imgs.src;
            imgText.innerHTML = imgs.alt;
            expandImg.parentElement.style.display = "block";
        }
    </script>
}

my output is :

but I want to show my all multiple photos of every product. I failed to understand what's the solution to this.

Answer 1

You should loop through Photos. That's what the error indicates. It tries to find the enumerator of Shop (Model), while you're intending to loop through photos.

        @if (Model.Photos != null)
        {
            @foreach (var photo in Model.Photos)
            {
                @if (photo.Image != null)
                {
                    <img src="~/@photo.Image" alt="Card Image" class="card-img-top" style="height: 120px;"/>
                }
            }
        }

You should also include Photos to the product you're returning, otherwise the list will be null.