Post
Ask Question

An Image Gallery Application In MVC 4

I am showing this functionality by creating an ASP.Net MVC 4 application (R- An Image Gallery Application In MVC 4).

The following is my SQL Server Data Table structure: (Album_Details).

design view
                                       Image 1.

Now open Visual Studio and select "File" -> "New" -> "Project...":

New Project
                                                                        Image 2.

internet application
                                                                        Image 3.

Now right-click on the Model Folder Add New Item -> Add New Class (ImageInfo):

  1. using System;  
  2. using System.Collections.Generic;  
  3. using System.Linq;  
  4. using System.Web;  
  5.   
  6. namespace AnImageGalleryApplicationInMVC4.Models  
  7. {  
  8.     public class ImageInfo  
  9.     {  
  10.         public int Image_Id { get; set; }  
  11.         public string Image_Name { get; set; }  
  12.         public byte[] Image { get; set; }  
  13.         public string Image_UploadedDate { get; set; }  
  14.     }  
  15. }  
Now again right-click on the Model Folder-> Add New Item -> Add New Class (RAlbumService):
  1. using System;  
  2. using System.Collections.Generic;  
  3. using System.Linq;  
  4. using System.Web;  
  5. using System.Data;  
  6. using System.Data.SqlClient;  
  7. using System.Configuration;  
  8. using System.IO;  
  9.   
  10. namespace AnImageGalleryApplicationInMVC4.Models  
  11. {  
  12.     public class RAlbumService  
  13.     {  
  14.         public IList<ImageInfo> GetAllImages()  
  15.         {  
  16.             List<ImageInfo> objImgInfo = new List<ImageInfo>();  
  17.             SqlDataAdapter da;  
  18.             DataSet ds = new DataSet();  
  19.             SqlConnection con = new SqlConnection();  
  20.             con.ConnectionString = @"Data Source=MYPC\SqlServer2k8;Integrated Security=true;Initial Catalog=R-ImageGallery";  
  21.             SqlCommand cmd = new SqlCommand("SELECT * FROM Album_Details", con);  
  22.             da = new SqlDataAdapter(cmd);  
  23.             da.Fill(ds);  
  24.             con.Open();  
  25.             cmd.ExecuteNonQuery();  
  26.             con.Close();  
  27.             if (!object.Equals(ds.Tables[0], null))  
  28.             {  
  29.                 if (ds.Tables[0].Rows.Count > 0)  
  30.                 {  
  31.   
  32.                     for (int i = 0; i < ds.Tables[0].Rows.Count; i++)  
  33.                     {  
  34.                         ImageInfo objThisIMGInfo = new ImageInfo();  
  35.                         objThisIMGInfo.Image_Id = Convert.ToInt32(ds.Tables[0].Rows[i]["IMG_ID"]);  
  36.                         objThisIMGInfo.Image_Name = ds.Tables[0].Rows[i]["ImageName"].ToString();  
  37.                         objThisIMGInfo.Image = (byte[])ds.Tables[0].Rows[i]["Photo"];  
  38.   
  39.   
  40.                         objThisIMGInfo.Image_UploadedDate = ds.Tables[0].Rows[i]["UploadedDate"].ToString().Split(' ')[0];    
  41.   
  42.                         objImgInfo.Add(objThisIMGInfo);  
  43.                     }  
  44.                       
  45.                 }  
  46.             }  
  47.             return objImgInfo.ToList();  
  48.         }  
  49.   
  50.         public byte[] GetImageDetails(int id)  
  51.         {  
  52.             SqlConnection con = new SqlConnection(@"Data Source=MYPC\SqlServer2k8;Integrated Security=true;Initial Catalog=R-ImageGallery");  
  53.             using (SqlCommand cmd = new SqlCommand())  
  54.             {  
  55.                 cmd.Connection = con;  
  56.                 cmd.CommandType = CommandType.Text;  
  57.                 cmd.CommandText = "SELECT Photo FROM Album_Details where IMG_ID=@ImageId";  
  58.                 cmd.Parameters.AddWithValue("@ImageId", id);  
  59.                 con.Open();  
  60.                 SqlDataReader dr = cmd.ExecuteReader();  
  61.                 ImageInfo objImageInfo = new ImageInfo();  
  62.                 while (dr.Read())  
  63.                 {  
  64.                     objImageInfo.Image = (byte[])dr["Photo"];  
  65.                 }  
  66.                 return objImageInfo.Image;  
  67.             }  
  68.         }  
  69.   
  70.         public int UploadImage(ImageInfo objImageInfo)  
  71.         {  
  72.             SqlConnection con = new SqlConnection(@"Data Source=MYPC\SqlServer2k8;Integrated Security=true;Initial Catalog=R-ImageGallery");  
  73.             using (SqlCommand cmd = new SqlCommand())  
  74.             {  
  75.                 cmd.Connection = con;  
  76.                 cmd.CommandType = CommandType.Text;  
  77.                 cmd.CommandText = "INSERT INTO Album_Details(ImageName,Photo) VALUES(@ImageName,@Photo)";  
  78.                 cmd.Parameters.AddWithValue("@ImageName", objImageInfo.Image_Name);  
  79.                 cmd.Parameters.AddWithValue("@Photo", objImageInfo.Image);  
  80.                 con.Open();  
  81.                 int result = cmd.ExecuteNonQuery();  
  82.                 con.Close();  
  83.                 return result;  
  84.             }  
  85.         }  
  86.     }  
  87. }  
Now right-click on Controller -> Add New Controller (Albums):
  1. using System;  
  2. using System.Collections.Generic;  
  3. using System.Linq;  
  4. using System.Web;  
  5. using System.Web.Mvc;  
  6. using AnImageGalleryApplicationInMVC4.Models;  
  7. using System.IO;  
  8.   
  9. namespace AnImageGalleryApplicationInMVC4.Controllers  
  10. {  
  11.     public class AlbumsController : Controller  
  12.     {  
  13.         RAlbumService objAlbumModelService = new RAlbumService();  
  14.   
  15.         [HttpGet]          
  16.         public ActionResult Index()  
  17.         {  
  18.             ViewBag.total = objAlbumModelService.GetAllImages().ToList().Count;  
  19.             return View(objAlbumModelService.GetAllImages().ToList());  
  20.         }  
  21.   
  22.         public ActionResult GetImgInformation(int id)  
  23.         {  
  24.             byte[] cover = objAlbumModelService.GetImageDetails(id);  
  25.             if (cover != null)  
  26.             {  
  27.                 return File(cover, "image/jpg");  
  28.             }  
  29.             else  
  30.             {  
  31.                 return null;  
  32.             }  
  33.         }  
  34.   
  35.   
  36.         [HttpPost]  
  37.         public ActionResult Index(FormCollection collection)  
  38.         {  
  39.             HttpPostedFileBase file = Request.Files["ImageData"];  
  40.             ImageInfo objAlbumMaster = new ImageInfo();  
  41.             objAlbumMaster.Image_Name = collection["ImageName"].ToString();  
  42.             objAlbumMaster.Image = ConvertToBytes(file);  
  43.             objAlbumModelService.UploadImage(objAlbumMaster);  
  44.             return View(objAlbumModelService.GetAllImages().ToList());  
  45.         }  
  46.   
  47.         public byte[] ConvertToBytes(HttpPostedFileBase image)  
  48.         {  
  49.             byte[] imageBytes = null;  
  50.             BinaryReader reader = new BinaryReader(image.InputStream);  
  51.             imageBytes = reader.ReadBytes((int)image.ContentLength);  
  52.             return imageBytes;  
  53.         }  
  54.     }  
  55. }  
Now right-click on the Index Method name add new view and do the following code:
  1. @model IList<AnImageGalleryApplicationInMVC4.Models.ImageInfo>  
  2. @{  
  3.     ViewBag.Title = "An Image Gallery Application In MVC 4";      
  4. }  
  5. <table>  
  6.     <tr>  
  7.         <td style="vertical-align: top; width: 15%;">  
  8.             <table style="border: solid 2px Red; padding: 5px; width: 100%;">  
  9.                 <tr>  
  10.                     <td style="background-color: skyblue; color: red; text-align: center; font-weight: bold;">Upload Image   
  11.                     </td>  
  12.                 </tr>  
  13.                 <tr>  
  14.                     <td>  
  15.                         @using (Html.BeginForm("Index", "Albums", FormMethod.Post, new { enctype = "multipart/form-data" }))  
  16.                         {  
  17.                             @Html.AntiForgeryToken()  
  18.                             <table style="width: 100%;">  
  19.                                 <tr>  
  20.                                     <td style="padding-left: 10px;">Name :  
  21.                                     </td>  
  22.                                     <td>@Html.TextBox("ImageName", "", new { style = "width:200px" })  
  23.                                     </td>  
  24.                                 </tr>  
  25.                                 <tr>  
  26.                                     <td style="padding-left: 10px;">Image :  
  27.                                     </td>  
  28.                                     <td>  
  29.                                         <input type="file" name="ImageData" id="ImageData" />  
  30.                                     </td>  
  31.                                 </tr>  
  32.                                 <tr>  
  33.                                     <td></td>  
  34.                                     <td>  
  35.                                         <input type="submit" name="submit" value="Upload" />  
  36.                                     </td>  
  37.                                 </tr>  
  38.                             </table>  
  39.                               
  40.                         }  
  41.   
  42.                     </td>  
  43.                 </tr>  
  44.             </table>  
  45.         </td>  
  46.         <td style="vertical-align:top;">  
  47.             <table style="border: solid 2px Green; padding: 5px; width: 100%;">  
  48.                 <tr>  
  49.                     <td colspan="4" style="background-color: skyblue; color: red; text-align: center; font-weight: bold;">All Uploaded Images  
  50.                     </td>  
  51.                 </tr>  
  52.                 <tr>  
  53.                     <td>  
  54.                         <table>  
  55.                             @{           
  56.                                 const int ShowColumn = 3;  
  57.                                 int OldRecords = 0;  
  58.                                 var items = Model.Skip(OldRecords).Take(ShowColumn);  
  59.   
  60.                                 while (items.Count() > 0)  
  61.                                 {  
  62.                                 <tr>  
  63.                                     @foreach (var item in items)  
  64.                                     {  
  65.                                         <td style="padding-left: 5px;">  
  66.                                             <table>  
  67.                                                 <tr>  
  68.                                                     <td style="text-align: center;">  
  69.                                                         <img src="/Albums/GetImgInformation/@item.Image_Id" width="140" />  
  70.                                                     </td>  
  71.                                                 </tr>  
  72.                                                 <tr>  
  73.                                                     <td style="text-align: center; font-weight: bold; color: Teal">@item.Image_Name | @item.Image_UploadedDate  
  74.                                                     </td>  
  75.                                                 </tr>  
  76.                                                   
  77.                                             </table>  
  78.                                         </td>  
  79.                                     }  
  80.                                 </tr>  
  81.                                     OldRecords += ShowColumn;  
  82.                                     items = Model.Skip(OldRecords).Take(ShowColumn);  
  83.                                 }  
  84.                             }  
  85.                         </table>  
  86.                     </td>  
  87.                 </tr>  
  88.             </table>  
  89.   
  90.         </td>  
  91.     </tr>  
  92. </table>  
Now run your application:

Run your application
                                                                        Image 4.

image
                                                                     Image 5.

show image
                                                                      Image 6.

 


Similar Articles