Display Image from Database in Asp MVC

Display image from database in asp mvc

Create a controller for displaying images with a Show action that takes the id of the image to display from the database. The action should return a FileResult that contains the image data with the appropriate content type.

public class ImageController : Controller
{
    public ActionResult Show( int id )
    {
        var imageData = ...get bytes from database...

        return File( imageData, "image/jpg" );
    }
}

In your view, construct the image and use the image id to construct a path for the image using the controller and action.

<img src='<%= Url.Action( "show", "image", new { id = ViewData["imageID"] } ) %>' />

How to save image in database and display it into Views in MVC 5?

1. Creat an "Images" folder in Solution explorer.
2. Create an ADO.NET Entity Data Model (in this example is "Database1Entities")

Home Controller

  using System;
  using System.Collections.Generic;
  using System.Linq;
  using System.Web;
  using System.Web.Mvc;

 namespace test2.Controllers
 {
 public class HomeController : Controller
 {
    public ActionResult Index()
   {
   return View();
  }

 public ActionResult FileUpload(HttpPostedFileBase file)
 {   

 if (file != null)
{
    Database1Entities db = new Database1Entities();
    string ImageName = System.IO.Path.GetFileName(file.FileName);
    string physicalPath =Server.MapPath("~/images/"+ ImageName);

    // save image in folder
    file.SaveAs(physicalPath);

    //save new record in database
    tblA newRecord = new tblA();
    newRecord.fname = Request.Form["fname"];
    newRecord.lname = Request.Form["lname"];
    newRecord.MoviePoster = ImageName;
    db.tblAs.Add(newRecord);
    db.SaveChanges();

}
//Display records
return RedirectToAction("../home/Display/");
}

public ActionResult Display()
{
  return View();
 }
 }
 }

Index View

@{
 ViewBag.Title = "Index";
}

@using (Html.BeginForm("FileUpload", "Home", FormMethod.Post,
                new { enctype = "multipart/form-data" }))
 {
 <div>
 First name<br />
@Html.TextBox("fname") <br />
Last name<br />
@Html.TextBox("lname") <br />
Image<br />
<input type="file" name="file" id="file" style="width: 100%;" /> <br />
<input type="submit" value="Upload" class="submit" />
</div>    
}

DisplayView

@{
ViewBag.Title = "Display";
}

@{
test2.Database1Entities db = new test2.Database1Entities();
}
@using (Html.BeginForm())
{
<table border="1">
<thead>
<tr>
    <th>Image</th>
    <th>First name</th>
    <th>Last name</th>
</tr>
</thead>
<tbody>
@foreach (var item in db.tblAs)
{
    <tr>
        <td><img src="~/images/@item.imageUrl" width="100" height="100" />             </td>
        <td>@item.fname</td>
        <td>@item.lname</td>
    </tr>
 }
  </tbody>
 </table>
}

The OutPut will be a table with viewed image from the database

Related Topics