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

Question

I have a table like followin:

CREATE TABLE [dbo].[tblA]
(
    [Id] INT NOT NULL PRIMARY KEY IDENTITY, 
    [fname] NVARCHAR(50) NULL, 
    [lname] NVARCHAR(5         


        

Answer 1

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" }))
   {
   
   First name
   
   @Html.TextBox("fname") 
   
   Last name
   
   @Html.TextBox("lname") 
   
   Image
   
    
   
   
       
   }
   

5. Display View

   @{
       ViewBag.Title = "Display";
   }
   
   @{
      test2.Database1Entities db = new test2.Database1Entities();
   }
   @using (Html.BeginForm())
   {
   
       @foreach (var item in db.tblAs)
       {
           
       }
   
   
       
   
           
   Image
           
   First name
           
   Last name
       
   
   
               
   
               
   @item.fname
               
   @item.lname
           
   
   }
   

Output:

/Home/

/home/Display/