user8428184
user8428184

Reputation:

How to display image from SQL image table that has imagepath

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 :)

Upvotes: 1

Views: 72

Answers (1)

Hans Kesting
Hans Kesting

Reputation: 39348

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.

Upvotes: 1

Related Questions