1

I am working on my MVCOnlineShop Project, i made a product list page, now i want to show an image for each product, so i made an image table in SQL, in it imageID and imagepath, and in the product table i added imageID, i have searched on how to fetch the images from the database , but didn't understand that much, so can you please help me with my actionresult in my controller?

this is my productList PartialView:

@model MVCOnlineShop.Models.Category

@{
    ViewBag.Title = "ProductList";
}

<script src="~/Scripts/Productjs/bootstrap.min.js"></script>
<script src="~/Scripts/Productjs/jquery.js"></script>
<link href="~/Content/Productcss/bootstrap.min.css" rel="stylesheet">
<link href="~/Content/Productcss/2-col-portfolio.css" rel="stylesheet">


<div class="container">

    <!-- Page Header -->
    <div class="row">
        @foreach (var Product in Model.Products)
        {
            <div class="col-md-6 portfolio-item">
                <a href="#">
                    <img class="img-responsive" src="http://placehold.it/700x400" alt="">
                </a>
                <h3>
                    <a href="#">@Html.ActionLink(Product.ProductName, "Details", new { id = Product.CategoryID })</a>
                </h3>
            </div>
        }
    </div>
</div>

this view will show each product but with the same image, i want to change it to get the images in database.

Thanks in advance :)

Improve this question
2
  • Is there a foreign key relation between your "product" and "image" tables, using that "imageID"? Then your Product should have an Image property, with the imagepath that you want. Commented Aug 7, 2017 at 11:21
  • i added in the product table, imageID, so now every product will have 1 or more images @HansKesting Commented Aug 7, 2017 at 11:23

1 Answer 1

Reset to default
1

Assuming every product has at least one image (otherwise you need to check for it's existence), and you use lazy loading in your EF model (otherwise you will need to "Include" the Images property) change this:

<img class="img-responsive" src="http://placehold.it/700x400" alt="">

into this:

<img class="img-responsive" src="@Product.Images.First().Imagepath" alt="">

You may need to change the spelling of the various properties, I had to guess at them.

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

12 Comments

should i add anything in controller?
@Ahmad if you use Entity Framework and have lazy loading enabled (it's the default) then probably not. Did you get any errors?
it says my model does not have a definition for First
Then you are missing a "using" of System.Linq in your view
getting this : CS1061: 'MVCOnlineShop.Models.Image' does not contain a definition for 'First' and no extension method 'First' accepting a first argument of type 'MVCOnlineShop.Models.Image' could be found (are you missing a using directive or an assembly reference?)
|

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.