How to Display multiple images from db using MVC3

Question

I am new to MVC.I have saved the image and some data but can't display the saved images. I want to display all saved images in the main page.

Model: Get the db list from model

public List<Products> GenreList()
        {
}

Controller

public ActionResult MYsample()
{
    var MyList = storeDB.GenreList();
    var a= MyList.Count;

    if (a != null)
    {
        foreach (var li in MyList)
        {
            return File(li.fileContent, li.mimeType,li.fileName);
        }
    }
    return View(MyList);
}

View

    @foreach (var item in Model)
    {
            <img src="@Url.Action("MYsample", "HomeController", new { id = item.ProductID })" alt="@item.Productname" />
    }

The problem is with the behavior of your code, return statement in for-loop will return first image as response and exit the function without hitting the view. BTW you could try what DarinDimitrov suggested +1 for that. — vinodpthmn
– vinodpthmn, Commented Feb 5, 2013 at 9:29

Darin Dimitrov · Accepted Answer · 2013-02-05 09:28:57Z

8

You could start by writing a controller action that will serve the images to the response stream:

public ActionResult Image(int id)
{
    // you should add a method to your repository that returns the image 
    // record from the id
    Products image = storeDB.Get(id);
    return File(image.fileContent, image.mimeType);
}

and then in your main controller action send the list of images to the view:

public ActionResult MySample()
{
    var model = storeDB.GenreList();
    return View(model);
}

and then in your strongly typed view loop through the images and generate an <img> tag for each image by pointing its src property to the newly created controller action:

@model MyList
@foreach (var li in MyList)
{
    <img src="@Url.Action("Image", new { id = li.Id })" alt="" />
}

If you don't want to have a separate controller action that will query the database and retrieve the image record from an id you could use the data URI scheme. Bear in mind though that this is not supported by all browsers.

So the idea is that your controller action will send the image data to the view:

public ActionResult MySample()
{
    var model = storeDB.GenreList();
    return View(model);
}

and then inside your strongly typed view you could loop through the list and generate the proper <img> tag:

@model MyList
@foreach (var li in MyList)
{
    <img src="src="data:@(li.mimeType);base64,@(Html.Raw(Convert.ToBase64String(li.fileContent)))" alt="" />
}

edited Feb 5, 2013 at 9:28

answered Feb 5, 2013 at 9:23

Darin Dimitrov

1.0m276 gold badges3.3k silver badges3k bronze badges

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

1 Comment

Thomas Over a year ago

why ToBase64String function is required to display image ?

Collectives™ on Stack Overflow

How to Display multiple images from db using MVC3

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