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

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


  1. Creat an "Images" folder in Solution explorer.
  2. Create an ADO.NET Entity Data Model (in this example is "Database1Entities")
  3. 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.imageUrl = ImageName;        db.tblAs.Add(newRecord);        db.SaveChanges();    }    //Display records    return RedirectToAction("../home/Display/");}public ActionResult Display(){    return View();}}}
  4. 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>    }
  5. Display View

    @{    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>}

Output:

/Home/

enter image description here

/home/Display/

enter image description here