Store Photo In Backend Using Entity Framework In MVC Razor And Bootstrap

Article

Introduction

Using MVC and Bootstrap, the images can be stored and retrieved in different types of View.

Description

Here, I will show you how image details can be shown along with the username. Let's take a sample example of student management system in MVC and Bootstrap.

Link to the source code - Click Here>>

Steps to be followed -

Step 1

Create an MVC application named "SatyaImageMvcUpload".

Step 2

Create one table named "tblStudent".

SQL Script for table -

SET ANSI_NULLS ON
GO
SET QUOTED_IDENTIFIER ON
GO
CREATE TABLE [dbo].[tblStudent](
[StudentId] [int] IDENTITY(1,1) NOT NULL,
[FirstName] [nvarchar](50) NULL,
[LastName] [nvarchar](50) NULL,
[ImageUrl] [nvarchar](50) NULL,
PRIMARY KEY CLUSTERED
(
[StudentId] ASC
)WITH (PAD_INDEX = OFF, STATISTICS_NORECOMPUTE = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS = ON, ALLOW_PAGE_LOCKS = ON)
ON [PRIMARY]
) ON [PRIMARY]
GO

Step 3

Create one Entity model that contains the table parameters, named "StudentDataModel.edmx".

Step 4

Then, let's create a Controller class file named as "HomeController.cs".

Code Ref

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
namespace ImageuploadingDemo.Controllers
{
public class HomeController : Controller
{
public ActionResult Index()
{
return View();
}
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);
file.SaveAs(physicalPath);
tblStudent student = new tblStudent();
student.FirstName = Request.Form["firstname"];
student.LastName = Request.Form["lastname"];
student.ImageUrl = ImageName;
db.tblStudents.Add(student);
db.SaveChanges();
}
return RedirectToAction("../home/DisplayImage/");
}
public ActionResult DisplayImage()
{
return View();
}
}
}

Code Description

The below-mentioned code defines how to insert records to the respected parameters and how after successful insertion, the page will redirect to the details or displayimage View page.

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);
file.SaveAs(physicalPath);
tblStudent student = new tblStudent();
student.FirstName = Request.Form["firstname"];
student.LastName = Request.Form["lastname"];
student.ImageUrl = ImageName;
db.tblStudents.Add(student);
db.SaveChanges();
}
return RedirectToAction("../home/DisplayImage/");
}

Step 5

Here, I have created two Views - Index and DisplayImage - under the Home Controller file. Index View is created to insert the records and the DisplayImage View is for showing the details of student information with images.

Code for Index.cshtml

@{
ViewBag.Title = "Index";
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
.linkbtnfull {
/*border: medium none;
border-radius: 3px;
color: red;
display: inline-block;
line-height: 33px;
text-align: center;
width: 100%;*/
background-color: #f44336;
color: white;
font-size:medium;
padding: 14px 25px;
text-align: center;
text-decoration: none;
display: inline-block;
}
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 60%;
}
td, th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
.button {
background-color: #4CAF50;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}
.button4 {
border-radius: 9px;
}
input[type=text], select {
width: 80%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
}
</style>
@Html.ActionLink("Go To Details page>>", "DisplayImage", "Home", null, new { @class = "linkbtnfull" })
<h2 style="background-color: yellow;color: blue; text-align: center; font-style: oblique">Satya's Student Management
System</h2>
@using (Html.BeginForm("FileUpload", "Home", FormMethod.Post,
new { enctype = "multipart/form-data" }))
{
<table>
<tbody>
<tr>
<td style="text-align:center;background-color:blue;color:white;font-family:Arial;font-
style:oblique;font-size:x-large">Insert Details</td>
</tr>
<tr>
<td> @Html.TextBox("firstname", "", "", new { placeholder = "Enter Your First Name...." }) </td>
</tr>
<tr>
<td> @Html.TextBox("lastname", "", "", new { placeholder = "Enter Your Last Name...." }) </td>
</tr>
<tr>
<td> <input type="file" name="file" id="file" class="btn btn-primary" /> </td>
</tr>
<tr>
<td> <input type="submit" class="button button4" value="Save" /> </td>
</tr>
</tbody>
</table>
}

Code Description

Here, I have added two textboxes, one Upload control, and one button to save the records.
After successful insertion, the page will redirect us to the details or displayimage View page.

@using (Html.BeginForm("FileUpload", "Home", FormMethod.Post,
new { enctype = "multipart/form-data" }))

Code for DisplayImage.cshtml

@using ImageuploadingDemo;
@{
ViewBag.Title = "DisplayImage";
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<head>
<style>
.linkbtnfull {
background-color: #f44336;
color: white;
font-size: medium;
padding: 14px 25px;
text-align: center;
text-decoration: none;
display: inline-block;
}
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}
td, th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
tr:nth-child(even) {
background-color: #dddddd;
}
</style>
</head>
@{
StudentEntities db = new StudentEntities();
}
@Html.ActionLink("Go To Insert Page>>", "Index", "Home", null, new { @class = "linkbtnfull" })
<body>
<h2 style="background-color: blue;color: white; text-align: center; font-style: oblique">Students Profile
Details</h2>
@using (Html.BeginForm())
{
<table align="center" border="1" cellpadding="4" cellspacing="4">
<thead>
<tr>
<th style="background-color: Yellow;color: blue">Photo</th>
<th style="background-color: Yellow;color: blue">First Name</th>
<th style="background-color: Yellow;color: blue">Last Name</th>
</tr>
</thead>
<tbody>
@foreach (var item in db.tblStudents)
{
<tr>
<td><img src="~/images/@item.ImageUrl" class="img-circle" alt="Kulu" width="100" height="70"
/></td>
<td>@item.FirstName</td>
<td>@item.LastName</td>
</tr>
}
</tbody>
</table>
}
</body>

Code Description

Here, the table will show the First name , Last Name, and Images from the database.

The image will support bootstrap by applying class="img-circle".

<img src="~/images/@item.ImageUrl" class="img-circle" alt="Kulu" width="100" height="70"/>

OUTPUT

Insert View

Detailed Student Information

Mobile View-1

Mobile View-2

Check Backend

Summary

In this article, we learned the following.

Store text details as well as image file using MVC in database.
Also, retrieve this information from the database to display on a sperate page, using Bootstrap.