Save images in database and display it into views using MVC


In this article, I will show you how to upload multiple images and show them in the table Using MVC and entity framework. I am using visual studio 2012 framework and SQL server 2008 R2 for this demo.

So, before opening visual studio let’s create table tblStudent using following script.

Student table script

    FirstName NVARCHAR(50) NULL, 
    LastName NVARCHAR(50) NULL, 
    ImageUrl NVARCHAR(50) NULL

Let’s start for this demo step by step using Asp.Net MVC 4 Web Application.

Step 1: Create MVC project, by using following steps.

  • Open Visual Studio.
  • Click on File -> New -> Project.
  • In this project, I am using C# as a programming language, but you can also choose VISUAL BASIC if you know the syntaxes of VB.
  • Inside Visual C# -> Web -> Select Asp.Net MVC 3, 4 or 5 -> Select Ok.

  • Now one more dialog box would open -> select Empty as a project template. -> OK.

Step 2 : After creating MVC project, you will find list of your project files inside ‘solution explorer’ on your right hand side.

  • Right click on your project name -> click add -> click New Folder -> rename that new folder to ‘Images’.

Step 3 : Create an ADO.NET Entity Data Model

  • Right click on your project -> Add -> New Item.

  • Search for Ado.Net entity data model inside search box. -> Name it as ‘StudentDataModel’ -> Click Add.

  • Inside entity data model wizard -> Select generate from database -> Click next.

  • Now from ‘New connection’ button -> Select data source -> ‘Microsoft SQL server’ -> Click continue.

  • Now select your database (. stands for localhost) name and select database ‘Sample’ -> Click OK

  • Now inside ‘Entity Data Model Wizard’ name your web.config file as StudentEntities -> Click next

  • Now select table(tblStudent) -> name model namespaces as StudentModel -> Click Finish

  • Now you will see Ado.Net Entity Data Model (StudentDataModel) added to your project’s files.

Step 4 : Add new controller

  • Right click on controller folder. Name your controller -> HomeController -> Click on Add button.
  • Now your controller would look something like this.
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace ImageuploadingDemo.Controllers
    public class HomeController : Controller
        // GET: /Home/

        public ActionResult Index()
            return View();

  • Now add following two methods inside your Home controller
public ActionResult FileUpload(HttpPostedFileBase file)
            if (file != null)
                StudentEntities db = new StudentEntities();
                string ImageName = System.IO.Path.GetFileName(file.FileName);
                string physicalPath = Server.MapPath("~/Images/" + ImageName);
                tblStudent student = new tblStudent();
                student.FirstName = Request.Form["firstname"];
                student.LastName = Request.Form["lastname"];
                student.ImageUrl = ImageName;

            return RedirectToAction("../home/DisplayImage/");
public ActionResult DisplayImage()
           return View();

Step 5 : Add view

  • Now right click on index method -> Add index view

  • Add follwing code inside index view.


   ViewBag.Title = "Index";
@using (Html.BeginForm("FileUpload", "Home", FormMethod.Post,
                    new { enctype = "multipart/form-data" }))
<h1>Add student information</h1>
First Name : @Html.TextBox("firstname") <br /><br /> 

Last Name :  @Html.TextBox("lastname") <br /><br />

Image : <input type="file" name="file" id="file" style="width: 100%;" /> <br /><br />

<input type="submit" value="Upload student info"/>
  • Now add DisplayImage view and add follwing code.
@using ImageuploadingDemo;
    ViewBag.Title = "DisplayImage";
   StudentEntities db = new StudentEntities();
<h1>Student Details</h1>
@using (Html.BeginForm())
<table border="1">
        <th>First name</th>
        <th>Last name</th>
   @foreach (var item in db.tblStudents)
            <td><img src="~/images/@item.ImageUrl" width="100" height="100" /></td>

Step 6 : Result

Leave a Comment