In this article I will explain with an example, how to upload and display Image file using Path stored in database in
WebGrid using
Entity Framework in ASP.Net MVC Razor.
Image files will be uploaded and then will be saved into a Folder (Directory) on disk. The Path of the saved files will be inserted into a Database Table using
Entity Framework.
Finally using the Path, the Image Files will be retrieved and displayed in
WebGrid along with feature to Zoom the Image using jQuery.
Database
This article makes use of a table named Files whose schema is defined as follows.
![Upload and Display Image file using Path stored in database in WebGrid using Entity Framework in ASP.Net MVC]()
Note: You can download the database table SQL by clicking the download link below.
Entity Framework Model
Once the
Entity Framework is configured and connected to the database table, the Model will look as shown below.
![Upload and Display Image file using Path stored in database in WebGrid using Entity Framework 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.
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.
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
![Upload and Display Image file using Path stored in database in WebGrid using Entity Framework in ASP.Net MVC]()
Inserted records of Image files
![Upload and Display Image file using Path stored in database in WebGrid using Entity Framework in ASP.Net MVC]()
Downloads
