How to save image in database and display it into Views in MVC 4?
- Creat an "Images" folder in Solution explorer.
- 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.imageUrl = 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> }
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/
/home/Display/