Display Binary Images In WebGrid From Database

For this demo, I am going to use Visual Studio 2012 and SQL Server.

Database Part

Let’s start with the database part first.

I already have a database with the name OrderDB1, and inside that I have a table with the name FileTB.

It has two columns; one is File Name, and another one is Filebytes. Filename will store the name of the file, and Filebytes will store bytes of images.

Below is a snapshot of the OrderDB1 database.



Below is a snapshot of FileTB table.



After completing it by adding the table in the database, now let’s move forward and create a new project in MVC for inserting data and displaying inserted data WebGrid.

Creating an MVC application

From Visual studio IDE select File Menu right at the top; inside that select New, then click on Project.



After clicking on Project, a New Project Wizard will pop up.

Inside that select Templates, then Visual C#; inside this select Web. After selecting you will see various Project Templates (Webforms , MVC , ASP.NET AJAX Server control) in this select “ ASP.NET MVC 4 Web Application,” after selecting, just name your Project “WebGridwithImages” and finally click on the OK button to create the project.

Selecting Templates

After clicking on the Ok button to create a project a new dialog will pop up with the name “New ASP.NET MVC 4 Project”. In this project template just select Basic Template and then in View Engine select Razor and click the Ok button.



Wait for some tim -- it requires some seconds for configuringa solution for you.

After creating the project, here is your project ready for you.

It containsa whole lot of MVC folder structure and other script and .css styles.



After successfully creating the application now let’s add ADO.NET Entity Data Model for inserting and retrieving data from the database.

Adding ADO.NET Entity Data Model

For adding ADO.NET Entity Data Model just right click on Models folder and from list select Add, then select ADO.NET Entity Data Model.

Model - Add, then ADO.NET Entity Data Model.



After selecting, a new dialog will pop up with the name “Specify Name for Item.” I have entered name MvcOrderDb. You can specify as per your requirement and then click on the Ok button.

After that a new Wizard will pop up.



From that select Generate from database and click the Next button.

After clicking the Next button a New Wizard will pop up for Choosing Data Connection.

Choosing Data Connection:



After clicking on New Connection a new dialog of Connection Properties will pop up.

Let’s configure it.

In Server Name you need to add your SQL Server Name.

Using SQL Server Authentication you need to enter User name and Password of Sql server.

Lastly I am going to select Database Name: OrderDB1.

Click on the OK button.



After adding, the Entity Data Model Wizard will look like the following screenshot:

Selecting database objects



Now click on Next button.

A new wizard will pop up for selecting database object and in this you will see the entire table which we have created in the database. But for this demo we are going to need only one table, FileTB.



At lastly click on the Finish button.

Here is the screenshot after adding ADO.NET Entity Data Model.



After adding ADO.NET Model now let us add Controller and Action Method.

Adding Default1 Controller

For adding Default1Controller just right click on the Controllers folder, inside that, select Add and then select Controller.



After clicking on Controller a new dialog will pop up withthe name Add Controller.



In this dialog, to add Controller we are not going to make any change, just click on the Add button to add a Controller with the default name “Default1Controller”.

Code snippet of Default1Controller when added for the first time

Now after adding Controller, let’s add two Actions: one for handling HttpGet Request, and another for handling HttpPost Request for Inserting Images in Database.

We are going to add two Action Methods with name UploadImages().

Adding 2 Action Method to Default1Controller
Code Snippet of Default1Controller
Explanation of Above Code Snippet

In UploadImages Post Request we are going to create an object of DBcontext class [OrderDB1Entities] which is required for Inserting data.

This DBcontext class is located in ADO.NET Entity Data Model files which we have added earlier [MvcOrderDb.edmx].

After that we are going to Create Object of [FileTB] Class; that is your Model. We are going to Assign Values to this Model and then Pass it to FileTBs DbSet [ ODB.FileTBs.Add(objfiletb); ] after assigning value to the model, to save data finally call ODB.SaveChanges(); //Inserting Image and details in Database.

Adding View [UploadImages]

After adding Controller and Action Method now let’s add View to this Action Method [UploadImages].

For adding View, from just right inside UploadImages Action Method from List select Add View; after selecting Add View a new dialog of Add View will pop up.

If view is the same name as that of Action Method we are not going to make a change to it. After that we are going select View engine -- that’s Razor. Then we are going to create a strongly typed View -- for that select Model FileTB, and in Scaffold template we are going to select Empty template. If you want layout then check the given option. Finally , click on the Add button. This view will get added in the View folder; inside that there will a folder with the name of controller Default1 and inside that, this view will be placed.



Locating View



After adding view now let us begin with Add control for file upload and button to submit this file to the server.

Complete code snippet of UploadImages View.

In this view I have added a file upload control and a button control.
What does enctype='multipart/form-data' mean

The enctype='multipart/form-data is an encoding type that allows files to be sent through a POST.

Quite simply, without this encoding the files cannot be sent through POST.

If you want to allow a user to upload a file via a form, you must use this enctype.

Now just save and run your Application Add Images to database.

UploadImages View for Inserting Images.



After inserting few images in database.

FileTB snapshot after inserting Images



Now we have come to final main topic where we want to display images in WebGrid, which is stored in binary format in the database.

Adding New Action Method Show Images in Default1Controller

To display images in WebGrid we are going to add a new Action Method with the name ShowImages.

The ShowImages Action Method going to return a list of image names and binary data to display on View.