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 -
  1. SET ANSI_NULLS ON
  2. GO
  4. SET QUOTED_IDENTIFIER ON
  5. GO
  7. CREATE TABLE [dbo].[tblStudent](
  8. [StudentId] [int] IDENTITY(1,1) NOT NULL,
  9. [FirstName] [nvarchar](50) NULL,
  10. [LastName] [nvarchar](50) NULL,
  11. [ImageUrl] [nvarchar](50) NULL,
  12. PRIMARY KEY CLUSTERED
  13. (
  14. [StudentId] ASC
  15. )WITH (PAD_INDEX = OFF, STATISTICS_NORECOMPUTE = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS = ON, ALLOW_PAGE_LOCKS = ON)
  17. ON [PRIMARY]
  18. ) ON [PRIMARY]
  20. 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
  1. using System;
  2. using System.Collections.Generic;
  3. using System.Linq;
  4. using System.Web;
  5. using System.Web.Mvc;
  7. namespace ImageuploadingDemo.Controllers
  8. {
  9. public class HomeController : Controller
  10. {
  11. public ActionResult Index()
  12. {
  13. return View();
  14. }
  16. public ActionResult FileUpload(HttpPostedFileBase file)
  17. {
  18. if (file != null)
  19. {
  20. StudentEntities db = new StudentEntities();
  21. string ImageName = System.IO.Path.GetFileName(file.FileName);
  22. string physicalPath = Server.MapPath("~/Images/" + ImageName);
  23. file.SaveAs(physicalPath);
  24. tblStudent student = new tblStudent();
  25. student.FirstName = Request.Form["firstname"];
  26. student.LastName = Request.Form["lastname"];
  27. student.ImageUrl = ImageName;
  28. db.tblStudents.Add(student);
  29. db.SaveChanges();
  31. }
  32. return RedirectToAction("../home/DisplayImage/");
  33. }
  35. public ActionResult DisplayImage()
  36. {
  37. return View();
  38. }
  40. }
  41. }
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.
  1. public ActionResult FileUpload(HttpPostedFileBase file)
  2. {
  3. if (file != null)
  4. {
  5. StudentEntities db = new StudentEntities();
  6. string ImageName = System.IO.Path.GetFileName(file.FileName);
  7. string physicalPath = Server.MapPath("~/Images/" + ImageName);
  8. file.SaveAs(physicalPath);
  9. tblStudent student = new tblStudent();
  10. student.FirstName = Request.Form["firstname"];
  11. student.LastName = Request.Form["lastname"];
  12. student.ImageUrl = ImageName;
  13. db.tblStudents.Add(student);
  14. db.SaveChanges();
  16. }
  17. return RedirectToAction("../home/DisplayImage/");
  18. }
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

  1. @{
  2. ViewBag.Title = "Index";
  3. }
  5. <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  6. <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  7. <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  9. <style>
  11. .linkbtnfull {
  12. /*border: medium none;
  13. border-radius: 3px;
  14. color: red;
  15. display: inline-block;
  16. line-height: 33px;
  17. text-align: center;
  18. width: 100%;*/
  19. background-color: #f44336;
  20. color: white;
  21. font-size:medium;
  22. padding: 14px 25px;
  23. text-align: center;
  24. text-decoration: none;
  25. display: inline-block;
  26. }
  28. table {
  29. font-family: arial, sans-serif;
  30. border-collapse: collapse;
  31. width: 60%;
  32. }
  34. td, th {
  35. border: 1px solid #dddddd;
  36. text-align: left;
  37. padding: 8px;
  38. }
  40. .button {
  41. background-color: #4CAF50;
  42. border: none;
  43. color: white;
  44. padding: 15px 32px;
  45. text-align: center;
  46. text-decoration: none;
  47. display: inline-block;
  48. font-size: 16px;
  49. margin: 4px 2px;
  50. cursor: pointer;
  51. }
  53. .button4 {
  54. border-radius: 9px;
  55. }
  57. input[type=text], select {
  58. width: 80%;
  59. padding: 12px 20px;
  60. margin: 8px 0;
  61. display: inline-block;
  62. border: 1px solid #ccc;
  63. border-radius: 4px;
  64. box-sizing: border-box;
  65. }
  66. </style>
  68. @Html.ActionLink("Go To Details page>>", "DisplayImage", "Home", null, new { @class = "linkbtnfull" })
  70. <h2 style="background-color: yellow;color: blue; text-align: center; font-style: oblique">Satya's Student Management
  72. System</h2>
  74. @using (Html.BeginForm("FileUpload", "Home", FormMethod.Post,
  75. new { enctype = "multipart/form-data" }))
  76. {
  77. <table>
  78. <tbody>
  79. <tr>
  80. <td style="text-align:center;background-color:blue;color:white;font-family:Arial;font-
  82. style:oblique;font-size:x-large">Insert Details</td>
  83. </tr>
  84. <tr>
  85. <td> @Html.TextBox("firstname", "", "", new { placeholder = "Enter Your First Name...." }) </td>
  86. </tr>
  87. <tr>
  88. <td> @Html.TextBox("lastname", "", "", new { placeholder = "Enter Your Last Name...." }) </td>
  89. </tr>
  90. <tr>
  91. <td> <input type="file" name="file" id="file" class="btn btn-primary" /> </td>
  92. </tr>
  93. <tr>
  94. <td> <input type="submit" class="button button4" value="Save" /> </td>
  95. </tr>
  96. </tbody>
  97. </table>
  98. }
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.
  1. @using (Html.BeginForm("FileUpload", "Home", FormMethod.Post,
  2. new { enctype = "multipart/form-data" }))
Code for DisplayImage.cshtml
  1. @using ImageuploadingDemo;
  3. @{
  4. ViewBag.Title = "DisplayImage";
  5. }
  8. <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  9. <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  10. <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  12. <head>
  13. <style>
  14. .linkbtnfull {
  15. background-color: #f44336;
  16. color: white;
  17. font-size: medium;
  18. padding: 14px 25px;
  19. text-align: center;
  20. text-decoration: none;
  21. display: inline-block;
  22. }
  23. table {
  24. font-family: arial, sans-serif;
  25. border-collapse: collapse;
  26. width: 100%;
  27. }
  29. td, th {
  30. border: 1px solid #dddddd;
  31. text-align: left;
  32. padding: 8px;
  33. }
  35. tr:nth-child(even) {
  36. background-color: #dddddd;
  37. }
  38. </style>
  39. </head>
  40. @{
  42. StudentEntities db = new StudentEntities();
  43. }
  45. @Html.ActionLink("Go To Insert Page>>", "Index", "Home", null, new { @class = "linkbtnfull" })
  47. <body>
  48. <h2 style="background-color: blue;color: white; text-align: center; font-style: oblique">Students Profile
  50. Details</h2>
  51. @using (Html.BeginForm())
  52. {
  53. <table align="center" border="1" cellpadding="4" cellspacing="4">
  54. <thead>
  55. <tr>
  56. <th style="background-color: Yellow;color: blue">Photo</th>
  57. <th style="background-color: Yellow;color: blue">First Name</th>
  58. <th style="background-color: Yellow;color: blue">Last Name</th>
  59. </tr>
  60. </thead>
  61. <tbody>
  62. @foreach (var item in db.tblStudents)
  63. {
  64. <tr>
  65. <td><img src="~/images/@item.ImageUrl" class="img-circle" alt="Kulu" width="100" height="70"
  67. /></td>
  68. <td>@item.FirstName</td>
  69. <td>@item.LastName</td>
  70. </tr>
  71. }
  72. </tbody>
  73. </table>
  74. }
  75. </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".
  1. <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.