ASPForums.Net RSS Feedhttp://www.aspforums.net/Handlers/RSS.ashxLatest additions to the content that appears on ASPForums.Net(c) 2019 www.aspforums.com. All rights reserved.Implement Bootstrap Carousel (Image Gallery) from database using jQuery AJAX in ASP.Net<p>Hi&nbsp;jochk12345,</p> <p>Check this example. Now please take its reference and correct your code.</p> <p><strong><span style="text-decoration: underline;">Database</span></strong></p> <p>For this example i have used two table&nbsp;tblFiles and&nbsp;tblFilesPath with the following table structure and data.</p> <pre class="brush: sql">--==========tblFiles==========-- CREATE TABLE [dbo].[tblFiles]( [id] [int] IDENTITY(1,1) NOT NULL, [Name] [varchar](50) NOT NULL, [ContentType] [nvarchar](200) NOT NULL, [Data] [varbinary](max) NOT NULL, CONSTRAINT [PK_tblFiles] 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] TEXTIMAGE_ON [PRIMARY] GO SET IDENTITY_INSERT [dbo].[tblFiles] ON GO INSERT [dbo].[tblFiles] ([id], [Name], [ContentType], [Data]) VALUES (1, N&#39;Chrysanthemum.jpg&#39;, N&#39;image/jpeg&#39;, 0xFFD8FFE0...) GO INSERT [dbo].[tblFiles] ([id], [Name], [ContentType], [Data]) VALUES (2, N&#39;Desert.jpg&#39;, N&#39;image/jpeg&#39;, 0xFFD8FFE0...) GO INSERT [dbo].[tblFiles] ([id], [Name], [ContentType], [Data]) VALUES (3, N&#39;Hydrangeas.jpg&#39;, N&#39;image/jpeg&#39;, 0xFFD8FFE0...) GO INSERT [dbo].[tblFiles] ([id], [Name], [ContentType], [Data]) VALUES (4, N&#39;Lighthouse.jpg&#39;, N&#39;image/jpeg&#39;, 0xFFD8FFE0...) GO INSERT [dbo].[tblFiles] ([id], [Name], [ContentType], [Data]) VALUES (5, N&#39;Jellyfish.jpg&#39;, N&#39;image/jpeg&#39;, 0xFFD8FFE0...) GO INSERT [dbo].[tblFiles] ([id], [Name], [ContentType], [Data]) VALUES (6, N&#39;Koala.jpg&#39;, N&#39;image/jpeg&#39;, 0xFFD8FFE0...) GO SET IDENTITY_INSERT [dbo].[tblFiles] OFF GO --==========tblFilesPath==========-- CREATE TABLE [dbo].[tblFilesPath]( [Id] [int] IDENTITY(1,1) NOT NULL, [Name] [nvarchar](50) NOT NULL, [Path] [nvarchar](200) NOT NULL, CONSTRAINT [PK_tblFilesPath] 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 SET IDENTITY_INSERT [dbo].[tblFilesPath] ON GO INSERT [dbo].[tblFilesPath] ([Id], [Name], [Path]) VALUES (1, N&#39;Chrysanthemum.jpg&#39;, N&#39;Images/Chrysanthemum.jpg&#39;) GO INSERT [dbo].[tblFilesPath] ([Id], [Name], [Path]) VALUES (2, N&#39;Desert.jpg&#39;, N&#39;Images/Desert.jpg&#39;) GO INSERT [dbo].[tblFilesPath] ([Id], [Name], [Path]) VALUES (3, N&#39;Hydrangeas.jpg&#39;, N&#39;Images/Hydrangeas.jpg&#39;) GO INSERT [dbo].[tblFilesPath] ([Id], [Name], [Path]) VALUES (4, N&#39;Jellyfish.jpg&#39;, N&#39;Images/Jellyfish.jpg&#39;) GO INSERT [dbo].[tblFilesPath] ([Id], [Name], [Path]) VALUES (5, N&#39;Koala.jpg&#39;, N&#39;Images/Koala.jpg&#39;) GO INSERT [dbo].[tblFilesPath] ([Id], [Name], [Path]) VALUES (6, N&#39;Lighthouse.jpg&#39;, N&#39;Images/Lighthouse.jpg&#39;) GO INSERT [dbo].[tblFilesPath] ([Id], [Name], [Path]) VALUES (7, N&#39;Penguins.jpg&#39;, N&#39;Images/Penguins.jpg&#39;) GO SET IDENTITY_INSERT [dbo].[tblFilesPath] OFF</pre> <p>For inserting binary data you can refer below article.</p> <h1 class="header"><a title="Display Binary Image from database in ASP.Net GridView control using C# and VB.Net'a" href="https://www.aspsnippets.com/Articles/Display-Binary-Image-from-database-in-ASPNet-GridView-control-using-C-and-VBNet.aspx">Display Binary Image from database in ASP.Net GridView control using C# and VB.Net</a></h1> <p><strong><span style="text-decoration: underline;">HTML</span></strong></p> <pre class="brush: html">&lt;html xmlns=&#34;http://www.w3.org/1999/xhtml&#34;&gt; &lt;head id=&#34;Head1&#34; runat=&#34;server&#34;&gt; &lt;title&gt;Bootstrap Carousel&lt;/title&gt; &lt;style type=&#34;text/css&#34;&gt; .carousel-container { width: 250px; } &lt;/style&gt; &lt;link rel=&#34;stylesheet&#34; href=&#34;https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css&#34; /&gt; &lt;script type=&#34;text/javascript&#34; src=&#34;https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js&#34;&gt;&lt;/script&gt; &lt;script type=&#34;text/javascript&#34; src=&#34;https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js&#34;&gt;&lt;/script&gt; &lt;script type=&#34;text/javascript&#34;&gt; $(function () { $.ajax({ type: &#34;POST&#34;, contentType: &#34;application/json; charset=utf-8&#34;, url: &#34;Default.aspx/GetBinaryImages&#34;, dataType: &#34;json&#34;, success: function (data) { var response = &#39;&#39;; var indicator = &#39;&#39;; for (var i = 0; i &lt; data.d.length; i++) { response += &#39;&lt;div class=&#34;item&#34;&gt;&#39; + &#39;&lt;img src=&#34;data:image/jpg;base64,&#39; + data.d[i].Image + &#39;&#34; alt=&#34;&#39; + data.d[i].Name + &#39;&#34; width=&#34;460px&#34; height=&#34;100px&#34;&gt;&#39; + &#39;&lt;div class=&#34;carousel-caption&#34;&gt;&#39; + &#39;&lt;h3&gt;&#39; + data.d[i].Name.split(&#39;.&#39;)[0] + &#39;&lt;/h3&gt;&#39; + &#39;&lt;/div&gt;&lt;/div&gt;&#39;; indicator += &#39;&lt;li data-target=&#34;#myCarouselBinary&#34; data-slide-to=&#34;&#39; + i + &#39;&#34;&gt;&lt;/li&gt;&#39;; } $(&#39;#dvBinary #items&#39;).append(response); $(&#39;#dvBinary #indicators&#39;).append(indicator); $(&#39;#dvBinary .item&#39;).first().addClass(&#39;active&#39;); $(&#39;#dvBinary .carousel-indicators &gt; li&#39;).first().addClass(&#39;active&#39;); $(&#34;#dvBinary #myCarouselBinary&#34;).carousel(); }, error: function (response) { alert(response.responseText); } }); $.ajax({ type: &#34;POST&#34;, contentType: &#34;application/json; charset=utf-8&#34;, url: &#34;Default.aspx/GetPathImages&#34;, dataType: &#34;json&#34;, success: function (data) { var response = &#39;&#39;; var indicator = &#39;&#39;; for (var i = 0; i &lt; data.d.length; i++) { response += &#39;&lt;div class=&#34;item&#34;&gt;&#39; + &#39;&lt;img src=&#34;&#39; + data.d[i].Image + &#39;&#34; alt=&#34;&#39; + data.d[i].Name + &#39;&#34; width=&#34;460px&#34; height=&#34;100px&#34;&gt;&#39; + &#39;&lt;div class=&#34;carousel-caption&#34;&gt;&#39; + &#39;&lt;h3&gt;&#39; + data.d[i].Name.split(&#39;.&#39;)[0] + &#39;&lt;/h3&gt;&#39; + &#39;&lt;/div&gt;&lt;/div&gt;&#39;; indicator += &#39;&lt;li data-target=&#34;#myCarouselPath&#34; data-slide-to=&#34;&#39; + i + &#39;&#34;&gt;&lt;/li&gt;&#39;; } $(&#39;#dvPath #items&#39;).append(response); $(&#39;#dvPath #indicators&#39;).append(indicator); $(&#39;#dvPath .item&#39;).first().addClass(&#39;active&#39;); $(&#39;#dvPath .carousel-indicators &gt; li&#39;).first().addClass(&#39;active&#39;); $(&#34;#dvPath #myCarouselPath&#34;).carousel(); }, error: function (response) { alert(response.responseText); } }); }); &lt;/script&gt; &lt;/head&gt; &lt;body&gt; &lt;form id=&#34;form1&#34; runat=&#34;server&#34;&gt; &lt;table&gt; &lt;tr&gt; &lt;td&gt; &lt;div class=&#34;container&#34; id=&#34;dvBinary&#34;&gt; &lt;h3&gt;Using Binary Data&lt;/h3&gt; &lt;hr /&gt; &lt;div class=&#34;carousel-container&#34;&gt; &lt;div id=&#34;myCarouselBinary&#34; class=&#34;carousel slide&#34; data-ride=&#34;carousel&#34;&gt; &lt;!-- Indicators --&gt; &lt;ol class=&#34;carousel-indicators&#34; id=&#34;indicators&#34;&gt; &lt;/ol&gt; &lt;!-- Wrapper for slides --&gt; &lt;div class=&#34;carousel-inner&#34; id=&#34;items&#34; role=&#34;listbox&#34;&gt; &lt;/div&gt; &lt;!-- Left and right controls --&gt; &lt;div class=&#34;carousel-controls&#34;&gt; &lt;a class=&#34;carousel-control left&#34; href=&#34;#myCarouselBinary&#34; data-slide=&#34;prev&#34;&gt; &lt;span class=&#34;glyphicon glyphicon-chevron-left&#34;&gt;&lt;/span&gt; &lt;span class=&#34;sr-only&#34;&gt;Previous&lt;/span&gt; &lt;/a&gt; &lt;a class=&#34;carousel-control right&#34; href=&#34;#myCarouselBinary&#34; data-slide=&#34;next&#34;&gt; &lt;span class=&#34;glyphicon glyphicon-chevron-right&#34;&gt;&lt;/span&gt; &lt;span class=&#34;sr-only&#34;&gt;Next&lt;/span&gt; &lt;/a&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/td&gt; &lt;td&gt; &lt;div class=&#34;container&#34; id=&#34;dvPath&#34;&gt; &lt;h3&gt;Using File Path&lt;/h3&gt; &lt;hr /&gt; &lt;div class=&#34;carousel-container&#34;&gt; &lt;div id=&#34;myCarouselPath&#34; class=&#34;carousel slide&#34; data-ride=&#34;carousel&#34;&gt; &lt;!-- Indicators --&gt; &lt;ol class=&#34;carousel-indicators&#34; id=&#34;indicators&#34;&gt; &lt;/ol&gt; &lt;!-- Wrapper for slides --&gt; &lt;div class=&#34;carousel-inner&#34; id=&#34;items&#34; role=&#34;listbox&#34;&gt; &lt;/div&gt; &lt;!-- Left and right controls --&gt; &lt;div class=&#34;carousel-controls&#34;&gt; &lt;a class=&#34;carousel-control left&#34; href=&#34;#myCarouselPath&#34; data-slide=&#34;prev&#34;&gt; &lt;span class=&#34;glyphicon glyphicon-chevron-left&#34;&gt;&lt;/span&gt; &lt;span class=&#34;sr-only&#34;&gt;Previous&lt;/span&gt; &lt;/a&gt; &lt;a class=&#34;carousel-control right&#34; href=&#34;#myCarouselPath&#34; data-slide=&#34;next&#34;&gt; &lt;span class=&#34;glyphicon glyphicon-chevron-right&#34;&gt;&lt;/span&gt; &lt;span class=&#34;sr-only&#34;&gt;Next&lt;/span&gt; &lt;/a&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/td&gt; &lt;/tr&gt; &lt;/table&gt; &lt;/form&gt; &lt;/body&gt; &lt;/html&gt;</pre> <p><strong><span style="text-decoration: underline;">Namespaces</span></strong></p> <p><strong>C#</strong></p> <pre class="brush: csharp">using System.Collections.Generic; using System.Configuration; using System.Data.SqlClient; using System.Web.Services;</pre> <p><strong>VB.Net</strong></p> <pre class="brush: vb">Imports System.Collections.Generic Imports System.Configuration Imports System.Data.SqlClient Imports System.Web.Services</pre> <p><strong><span style="text-decoration: underline;">Code</span></strong></p> <p><strong>C#</strong></p> <pre class="brush: csharp">[WebMethod] public static List&lt;ImageSlider&gt; GetBinaryImages() { List&lt;ImageSlider&gt; products = new List&lt;ImageSlider&gt;(); string conString = ConfigurationManager.ConnectionStrings[&#34;constr&#34;].ConnectionString; string query = &#34;SELECT * FROM tblFiles&#34;; using (SqlConnection con = new SqlConnection(conString)) { SqlCommand cmd = new SqlCommand(query, con); con.Open(); SqlDataReader sdr = cmd.ExecuteReader(); while (sdr.Read()) { products.Add(new ImageSlider { Id = Convert.ToInt32(sdr[&#34;Id&#34;]), Name = sdr[&#34;Name&#34;].ToString(), Image = Convert.ToBase64String((byte[])sdr[&#34;Data&#34;], 0, ((byte[])sdr[&#34;Data&#34;]).Length) }); } con.Close(); } return products; } [WebMethod] public static List&lt;ImageSlider&gt; GetPathImages() { List&lt;ImageSlider&gt; products = new List&lt;ImageSlider&gt;(); string conString = ConfigurationManager.ConnectionStrings[&#34;constr&#34;].ConnectionString; string query = &#34;SELECT * FROM tblFilesPath&#34;; using (SqlConnection con = new SqlConnection(conString)) { SqlCommand cmd = new SqlCommand(query, con); con.Open(); SqlDataReader sdr = cmd.ExecuteReader(); while (sdr.Read()) { products.Add(new ImageSlider { Id = Convert.ToInt32(sdr[&#34;Id&#34;]), Name = sdr[&#34;Name&#34;].ToString(), Image = sdr[&#34;Path&#34;].ToString() }); } con.Close(); } return products; } public class ImageSlider { public int Id { get; set; } public string Name { get; set; } public string Image { get; set; } }</pre> <p><strong>VB.Net</strong></p> <pre class="brush: vb">&lt;WebMethod()&gt; Public Shared Function GetBinaryImages() As List(Of ImageSlider) Dim products As List(Of ImageSlider) = New List(Of ImageSlider)() Dim conString As String = ConfigurationManager.ConnectionStrings(&#34;constr&#34;).ConnectionString Dim query As String = &#34;SELECT * FROM tblFiles&#34; Using con As SqlConnection = New SqlConnection(conString) Dim cmd As SqlCommand = New SqlCommand(query, con) con.Open() Dim sdr As SqlDataReader = cmd.ExecuteReader() While sdr.Read() products.Add(New ImageSlider With { .Id = Convert.ToInt32(sdr(&#34;Id&#34;)), .Name = sdr(&#34;Name&#34;).ToString(), .Image = Convert.ToBase64String(CType(sdr(&#34;Data&#34;), Byte()), 0, (CType(sdr(&#34;Data&#34;), Byte())).Length) }) End While con.Close() End Using Return products End Function &lt;WebMethod()&gt; Public Shared Function GetPathImages() As List(Of ImageSlider) Dim products As List(Of ImageSlider) = New List(Of ImageSlider)() Dim conString As String = ConfigurationManager.ConnectionStrings(&#34;constr&#34;).ConnectionString Dim query As String = &#34;SELECT * FROM tblFilesPath&#34; Using con As SqlConnection = New SqlConnection(conString) Dim cmd As SqlCommand = New SqlCommand(query, con) con.Open() Dim sdr As SqlDataReader = cmd.ExecuteReader() While sdr.Read() products.Add(New ImageSlider With { .Id = Convert.ToInt32(sdr(&#34;Id&#34;)), .Name = sdr(&#34;Name&#34;).ToString(), .Image = sdr(&#34;Path&#34;).ToString() }) End While con.Close() End Using Return products End Function Public Class ImageSlider Public Property Id As Integer Public Property Name As String Public Property Image As String End Class</pre> <p><strong><span style="text-decoration: underline;">Screenshot</span></strong></p> <p><strong><span style="text-decoration: underline;"><img src="https://i.imgur.com/P6VmiK7.gif" alt="" width="446" height="325" /></span></strong></p>https://www.aspforums.net:443/Threads/112202/Implement-Bootstrap-Carousel-Image-Gallery-from-database-using-jQuery-AJAX-in-ASPNet/https://www.aspforums.net:443/Threads/112202/Implement-Bootstrap-Carousel-Image-Gallery-from-database-using-jQuery-AJAX-in-ASPNet/Wed, 08 May 2019 00:40:36 GMT