Introduction
This article demonstrates how to create Bootstrap 4 Carousel image slider dynamically using ASP.NET MVC5. We are going to upload the image file in our project folder and save its path in SQL Server database table. We will retrieve (display) uploaded images and its related HTML table with sorting, searching and pagination functionality using jQuery datatable plugin. We will understand this step by step.
Step 1
First of all, create the database and related tables to insert images in SQL Server 2014 or your choice.
- CREATE TABLE [dbo].[CarouselSlider](
- [ID] [int] IDENTITY(1,1) NOT NULL,
- [Name] [nvarchar](50) NULL,
- [FileSize] [int] NULL,
- [FilePath] [nvarchar](100) NULL,
- CONSTRAINT [PK_CarouselSlider] PRIMARY KEY CLUSTERED
- (
- [ID] 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
- CREATE procedure [dbo].[spAddNewSliderImage]
- (
- @Name nvarchar(50),
- @FileSize int,
- @FilePath nvarchar(100)
- )
- as
- begin
- insert into CarouselSlider(Name,FileSize,FilePath)
- values (@Name,@FileSize,@FilePath)
- end
- CREATE procedure [dbo].[spGetAllSliderImage]
- as
- begin
- Select ID,Name,FileSize,FilePath from CarouselSlider
- end
If you want slider's last 4 image inserted, then use this query.
- CREATE procedure [dbo].[spGetAllSliderImage]
- as
- begin
- Select TOP 4 ID,Name,FileSize,FilePath from CarouselSlider ORDER BY ID DESC
- end
Screenshot of inserted images
Step 2
Create an empty MVC web application project in Visual Studio 2015. As shown in the below screenshot, open Visual Studio 2015. Click on a new project, choose web template from the left panel and choose ASP.NET Web Application to give a meaningful name and click OK.
Screenshot for creating project-1
Choose empty from ASP.NET templates check MVC and click OK, as shown in the image below.
Screenshot for creating project-2
Step 3
Double click and open webconfig file in the project. Add database connection.
- <connectionStrings>
- <add name="DBCS" connectionString="data source=DESKTOP-M021QJH\SQLEXPRESS; database=MvcDemoDB; integrated security=true;" />
- </connectionStrings>
Step 4
Right click on Models folder, select Add, then select Class.
Screenshot for creating Model Class-1
Choose Class name it CarouselSlider.cs to click on Add button.
Screenshot for creating Model Class-2
Write field and property of CarouselSlider as we have in the database table.
- using System;
- using System.Collections.Generic;
- using System.Linq;
- using System.Web;
- namespace MvcCarouselSlider_Demo.Models
- {
- public class CarouselSlider
- {
- public int ID { get; set; }
- public string Name { get; set; }
- public Nullable<int> FileSize { get; set; }
- public string FilePath { get; set; }
- }
- }
Step-5
Right click on Controllers folder, select Add, then select Controller, as shown in below image.
Screenshot for controller-2
After choosing controller, a window will appear to choose MVC5 Controller-Empty and click on Add.
Screenshot for controller-2
After clicking on Add, one more window will appear with DefaultController. Highlight the default and change the name HomeController but don’t change Controller suffix. Click on Add HomeController will be added to Controllers folder.
Screenshot for controller-3
Add the following namespace in Controller.
- using MvcCarouselSlider_Demo.Models;
- using System.Data;
- using System.Data.SqlClient;
- using System.Configuration;
- using System.IO;
Create UploadSliderImage action method with [HttpGet] in Controller. Write the following code to retrieve data from database table.
- [HttpGet]
- public ActionResult UploadSliderImage()
- {
- List<CarouselSlider> sliderimages = new List<CarouselSlider>();
- string CS = ConfigurationManager.ConnectionStrings["DBCS"].ConnectionString;
- using (SqlConnection con = new SqlConnection(CS))
- {
- SqlCommand cmd = new SqlCommand("spGetAllSliderImage", con);
- cmd.CommandType = CommandType.StoredProcedure;
- con.Open();
- SqlDataReader rdr = cmd.ExecuteReader();
- while (rdr.Read())
- {
- CarouselSlider slider = new CarouselSlider();
- slider.ID = Convert.ToInt32(rdr["ID"]);
- slider.Name = rdr["Name"].ToString();
- slider.FileSize = Convert.ToInt32(rdr["FileSize"]);
- slider.FilePath = rdr["FilePath"].ToString();
- sliderimages.Add(slider);
- }
- }
- return View(sliderimages);
- }
Create UploadSliderImage action method with [HttpPost] in Controller. Write the following code to insert data into database and upload file in SliderImages folder of project.
- [HttpPost]
- public ActionResult UploadSliderImage(HttpPostedFileBase fileupload)
- {
- if (fileupload != null)
- {
- string fileName = Path.GetFileName(fileupload.FileName);
- int fileSize = fileupload.ContentLength;
- int Size = fileSize / 1000;
- fileupload.SaveAs(Server.MapPath("~/SliderImages/" + fileName));
- string CS = ConfigurationManager.ConnectionStrings["DBCS"].ConnectionString;
- using (SqlConnection con = new SqlConnection(CS))
- {
- SqlCommand cmd = new SqlCommand("spAddNewSliderImage", con);
- cmd.CommandType = CommandType.StoredProcedure;
- con.Open();
- cmd.Parameters.AddWithValue("@Name", fileName);
- cmd.Parameters.AddWithValue("@FileSize", Size);
- cmd.Parameters.AddWithValue("FilePath", "~/SliderImages/" + fileName);
- cmd.ExecuteNonQuery();
- }
- }
- return RedirectToAction("UploadSliderImage");
- }
Compete code for HomeController to insert and retrieve file.
shubham srivastavaPosted Oct 2, 2021, 11:51 AM
Perfect example
fawad qasimiPosted May 5, 2021, 4:14 AM
Thank you so much for the useful tutorial it helped me a lot
First LastPosted Oct 9, 2019, 10:09 AM
At startup, what triggers the UploadSliderImage() to run so that the datatable has data?
Mark TaborPosted Apr 23, 2019, 4:41 AM
I am afraid as your view {UploadSliderImage View.} is not strongly type view how you would be able to access the model objects like its properties
Samina MullaPosted Sep 8, 2018, 8:55 AM
Thanks for article. But i hot error in Name i.e indexoutofrange exception. Plz solve this error
Danilo ZanagaPosted Jul 25, 2018, 7:01 PM
The view 'Index' or its master was not found or no view engine supports the searched locations. The following locations were searched:~/Views/Home/Index.aspx ~/Views/Home/Index.ascx ~/Views/Shared/Index.aspx ~/Views/Shared/Index.ascx ~/Views/Home/Index.cshtml ~/Views/Home/Index.vbhtml ~/Views/Shared/Index.cshtml ~/Views/Shared/Index.vbhtml
Danilo ZanagaPosted Jul 25, 2018, 6:48 PM
It didn't worked....error, did not found any index structure. Even i creates the index view, page is empty, of course
Tridip BhattacharjeePosted Apr 26, 2018, 7:54 AM
Farhan Nice article. one request suppose how could i load images dynamically at runtime. careousel show static images one after one. so allimages need to be there at client side. when we have to deal with many images then page take time to load for many images will be downloading. so how can i configure careousel as a result it will load each image at runtime from server side and cache it client side as a result if image is downloaded then we do not have to download again. if i am not clear then let me know...so i can explain again. thanks