In this article I will explain with an example, how to upload, insert and display Image file from database in WebGrid using Entity Framework in ASP.Net MVC Razor.
Image files will be uploaded and then will be saved (inserted) to database table in Binary format. The saved (inserted) Image files will be retrieved and displayed in WebGrid along with feature to Zoom the Image using jQuery.
Note: For beginners in ASP.Net MVC and Entity Framework, please refer my article ASP.Net MVC: Simple Entity Framework Tutorial with example. It covers all the information needed for connecting and configuring Entity Framework.
 
 

Database

I have made use of the following table tblFiles with the schema as follows.
Upload, Insert and Display Image file from database in WebGrid using Entity Framework in ASP.Net MVC
 
Note: You can download the database table SQL by clicking the download link below.
           Download SQL file
 
 

Entity Framework Model

Once the Entity Framework is configured and connected to the database table, the Model will look as shown below.
Upload, Insert and Display Image file from database in WebGrid using Entity Framework in ASP.Net MVC
 
 

Namespaces

You will need to import the following namespace.
using System.IO;
 
 

Controller

The Controller consists of following Action methods.

Action method for handling GET operation

Inside this Action method, all the Image files are fetched from database using Entity Framework and are returned to the View.
 

Action method for handling POST operation for uploading Image Files

This Action method gets called when an Image file is selected and the Upload Button is clicked, and it gets the uploaded file in the HttpPostedFileBase parameter.
Note: In case the HttpPostedFileBase parameter is appearing NULL, then please refer the article, ASP.Net MVC: HttpPostedFileBase always returns NULL.
 
The uploaded Image file is converted to an Array of Bytes using BinaryReader class and finally is inserted into the database table.
public class HomeController : Controller
{
    // GET: Home
    public ActionResult Index()
    {
        FilesEntities entities = new FilesEntities();
        return View(entities.tblFiles.ToList());
    }
 
    [HttpPost]
    public ActionResult Index(HttpPostedFileBase postedFile)
    {
        byte[] bytes;
        using (BinaryReader br = new BinaryReader(postedFile.InputStream))
        {
             bytes = br.ReadBytes(postedFile.ContentLength);
        }
        FilesEntities entities = new FilesEntities();
        entities.tblFiles.Add(new tblFile
        {
            Name = Path.GetFileName(postedFile.FileName),
            ContentType = postedFile.ContentType,
            Data = bytes
        });
        entities.SaveChanges();
        return RedirectToAction("Index");
    }
}
 
 

View

HTML Markup

Inside the View, in the very first line the Entity Model class is declared as IEnumerable which specifies that it will be available as a Collection.

Form for Uploading the Image file

This Form consists of an HTML FileUpload and a Submit Button. When the Button is clicked, the Index Action method for handling POST operation will be called. 

Displaying the Image files

For displaying the records, the WebGrid is rendered using GetHtml function which renders the WebGrid  using Model.
Note: For more details on using WebGrid, please refer WebGrid Step By Step Tutorial with example in ASP.Net MVC.
 
The last column of WebGrid will display the Binary data from database as Image and hence it is formatted into an HTML Image element whose SRC is set by converting the Binary data to BASE64 string.

Zooming the Image files

A jQuery click event handler is assigned to all the HTML Image elements within the WebGrid. When an HTML Image element is clicked, the Image element is cloned and displayed in larger size within a jQuery UI Model Popup.
@model IEnumerable<tblFile>
 
@{
    Layout = null;
    WebGrid webGrid = new WebGrid(source: Model, canSort: false, canPage: false);
}
 
<!DOCTYPE html>
 
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
    <style type="text/css">
        body {
            font-family: Arial;
            font-size: 10pt;
        }
 
        .Grid {
            border: 1px solid #ccc;
            border-collapse: collapse;
        }
 
        .Grid th {
            background-color: #F7F7F7;
            font-weight: bold;
        }
 
        .Grid th, .Grid td {
            padding: 5px;
            border: 1px solid #ccc;
        }
 
        .Grid, .Grid table td {
            border: 0px solid #ccc;
        }
 
        .Grid img {
            height: 150px;
            width: 150px;
            cursor: pointer;
        }
 
        #dialog img {
            height: 550px;
            width: 575px;
            cursor: pointer;
        }
    </style>
</head>
<body>
    @using (Html.BeginForm("Index", "Home", FormMethod.Post, new { enctype = "multipart/form-data" }))
    {
        <input type="file" name="postedFile" />
        <input type="submit" id="btnUpload" value="Upload" />
    }
    <hr />
    @webGrid.GetHtml(
         htmlAttributes: new { @id = "WebGrid", @class = "Grid" },
         columns:webGrid.Columns(
                 webGrid.Column("id", "Image Id"),
                 webGrid.Column("Name", "Name"),
                 webGrid.Column("Data", "Image",
                 format: @<text><img alt="@item.id"
                                    src="data:image/jpg;base64,@Convert.ToBase64String(item.Data)" /></text>)))
    <div id="dialog" style="display:none"></div>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.24/themes/start/jquery-ui.css" />
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.24/jquery-ui.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $("#dialog").dialog({
                autoOpen: false,
                modal: true,
                height: 600,
                width: 600,
                title: "Zoomed Image"
            });
            $(".Grid img").click(function () {
                $('#dialog').html('');
                $('#dialog').append($(this).clone());
                $('#dialog').dialog('open');
            });
        });
    </script>
</body>
</html>
 
 

Screenshot

Upload, Insert and Display Image file from database in WebGrid using Entity Framework in ASP.Net MVC
 
 

Downloads

Download Code