Creating Image Gallery in MVC 5

Vikas Kumar Saini

VC 5 ApplicationMVC 5 Image Galleryreating Image Gallery in MVC 5

17 Comments

Join the conversation! Your thoughts help the community grow.

Utsav Dwivedi6y ago
If I have add caption at image then get error data not pass to the controller what can I do ??
CJ Aquino8y ago
Why i have an error on this line when i upload an image? HomeController.cs line 44 db.ImageGallery.Add(imageGallery);
Kevin Mullarkey8y ago
My image isn't popping up, it's opening on a new page instead. Any ideas? Thanks
- Elms Online8y ago
  May need to change the JS reference of ShowImage to a class reference instead of reference ID. This would require you to update the html to <a class="fancybox-button ShowImage"........... I believe there is a problem wiht multiple images with the same ID.
sourav mahajan9y ago
Nice article..too much informative
Mahmoud Elshazly11y ago
IF i need delete from my gallery ? what should i do ?
Mehmet Gocergi11y ago
do we have to download fancybox from nudget for working our project?In my project i can click the picture but it doesn't open in a popup window, it opens in a new window. how can i solve this problem?
Lindile Radebe12y ago
hi guys how to upload video into mvc appliacation using entity framework
hemant pandit12y ago
Good Job, Thank you this is really help to learn MVC5
Josh Yates12y ago
Good Work. Thanks for sharing. The X in top right corner of image popout doesn't work in Chrome.
Abhishek Luv12y ago
Great Article
Vikas Kumar Saini12y ago
DbContext class exposes these Properties use create database automatically // DbContext class create database if model changes Database.SetInitializer(new DropCreateDatabaseIfModelChanges<DBConnectionContext>()); // DbContext class drope and create database allways Database.SetInitializer(new DropCreateDatabaseAlways<DBConnectionContext>()); // DbContext class if database not exits database allways Database.SetInitializer(new CreateIfNotExists<DBConnectionContext>()); //The DbContext class also exposes a Database property which defines the following useful methods:
Vikas Kumar Saini12y ago
http://msdn.microsoft.com/en-in/data/jj193542.aspx
gopal nimishakavi12y ago
how the database creating automatically can u plz explain...
pushpak panchal12y ago
Awesome fancybox..keep up
Vikas Kumar Saini12y ago
thanks for comment. Nimit Joshi.............
Nimit Joshi12y ago
Very Nice...

This article will solve the problem of how to create a MVC 5 application with image gallery using fancy box and Entity Framework.

And upload an image to the route folder and save the path in the database from AJAX in MVC 5 applications.

First you create a model and context class. We create an Image Gallery class that has the following properties.

public class ImageGallery
{
public ImageGallery()
{
ImageList = new List<string>();
}
[Key]
public Guid ID { get; set; }
public string Name { get; set; }
public string ImagePath { get; set; }
public List<string> ImageList { get; set; }
}

Here you create a constructor to initialize the ImageList List of the string object.

And second is the context class like this that inherits from the DbContext class:

public class DbConnectionContext : DbContext
{
public DbConnectionContext():base("name=dbContext")
{
Database.SetInitializer(new DropCreateDatabaseIfModelChanges
<DbConnectionContext>());
}
public DbSet<ImageGallery> ImageGallery { get; set; }
}

If you want to recreate data every time the model changes so will add these lines of code.

Database.SetInitializer(new DropCreateDatabaseIfModelChanges<DbConnectionContext>());

You also have a web config file. We configure connectionStrings under the Web.Config file.

<connectionStrings>
<add name="dbContext" connectionString="Data Source=localhost;
Initial Catalog=CommonDataBase; Integrated Security=true" providerName="System.Data.SqlClient" />
</connectionStrings>

Then you create a controller class in the controller folder and edit the name as HomeController. To add a Scaffold select MVC 5 Controller with Views, using Entity Framework.

This sample creates an image gallery. Images are displayed in Index.chtml view. Click an image to show the image with large size to open the popup fancy box window
containing the images gallery. The image gallery is implemented using a fancy box.

Now you add a folder to store your images. Now to click the solution file and add a new folder edit the folder name Upload_Files.

@model ImageGalleryInMvc5.Models.ImageGallery
@{
ViewBag.Title = "Home Page";
}
<script src="~/Scripts/jquery-1.8.2.min.js"></script>
<script src="~/Scripts/jquery.mousewheel-3.0.6.pack.js"></script>
<script src="~/Scripts/jquery.fancybox.js?v=2.1.3"></script>
<link href="~/Content/jquery.fancybox.css?v=2.1.2" rel="stylesheet" media="screen" />
<link href="~/Scripts/jquery.fancybox.css" rel="stylesheet" /> <script type="text/javascript">
$(document).ready(function ()
{
$("#ShowImage").fancybox({
helpers:
{
title:
{
type: 'float'
}
}
});
});
</script>