In this article I will explain with an example, how to display Images inside WebGrid in ASP.Net MVC Razor.
The Image path will be stored in database and the Image files will be saved into a Folder (Directory) on disk.
The path of the Image files will be fetched from database using Entity Framework and will be used to populate the WebGrid in ASP.Net MVC Razor.
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
This article makes use of a table named Files whose schema is defined as follows.
Display Images inside WebGrid 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.
Display Images inside WebGrid in ASP.Net MVC
 
 
Controller
The Controller consists of two 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 first saved into a Folder named Uploads within the Project Folder and then the Name and the Path of the Image file is inserted into the Table using Entity Framework.
Note: The Relative Path of the Image file will be saved in the database for ease of conversion to Absolute Path or Absolute URL.
 
public class HomeController : Controller
{
    // GET: Home
    public ActionResult Index()
    {
        FilesEntities entities = new FilesEntities();
        return View(entities.Files.ToList());
    }
 
    [HttpPost]
    public ActionResult Index(HttpPostedFileBase postedFile)
    {
        //Extract Image File Name.
        string fileName = System.IO.Path.GetFileName(postedFile.FileName);
 
        //Set the Image File Path.
        string filePath = "~/Uploads/" + fileName;
 
        //Save the Image File in Folder.
        postedFile.SaveAs(Server.MapPath(filePath));
 
        //Insert the Image File details in Table.
        FilesEntities entities = new FilesEntities();
        entities.Files.Add(new File
        {
            Name = fileName,
            Path = filePath
        });
        entities.SaveChanges();
 
        //Redirect to Index Action.
        return RedirectToAction("Index");
    }
}
 
 
View
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 Image file using its Path and hence it is formatted into an HTML Image element whose SRC is set to the Path of the Image file.
Note: In order to display the Image, first the Relative Path of the Image file will be converted into Absolute URL using Url.Content function.
 
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<WebGrid_Image_Path_Database_EF_MVC.File>
 
@{
    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("FileId", "Image Id"),
                 webGrid.Column("Name", "Name"),
                 webGrid.Column("Path", "Image",
                 format: @<text><img alt="@item.Name"
                                src="@Url.Content(item.Path)"/></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>
 
 
Screenshots
Uploading and displaying the Image Files
Display Images inside WebGrid in ASP.Net MVC
 
Inserted records of Image files
Display Images inside WebGrid in ASP.Net MVC
 
 
Downloads
Download Code