Populating Items in ASP.NET CORE Carousel with SQL Database

[José Carlos]

Good afternoon, I have a system with images saved in the Posgresql database. Is it possible to make Caurosel show these images? 

I recover the image as follows

 @if (Model.Imagem != null)

 {

    <div>

         @{

             var base64 = Convert.ToBase64String(Model.Imagem);

             var imgSrc = String.Format("data:image/gif;base64,{0}", base64);

         }

             <img src='@imgSrc' style="max-width:100%; max-height:100%;object-fit: cover" />

         </div>

 }

regards Jose Carlos

[Ashokkumar Karuppasamy]

Hi José Carlos,

Based on the shared details, we have prepared a sample carousel in ASP.NET core  for your reference. The attached code snippet and sample demonstrate the solution. Let us know if you need any further assistance.

Sample: Attached as Zip

[index.cshtml]

@using Syncfusion.EJ2

@using RestfulCrud.Controllers

@model List<HomeController.ImageModel>

@{

    ViewData["Title"] = "Home Page";

    var imgSrc = new List<string>();

    foreach (var imageModel in Model)

    {

        var base64 = Convert.ToBase64String(imageModel.ImageData);

        imgSrc.Add(String.Format("data:image/png;base64,{0}", base64)); // The image is a PNG, so use "image/png"

    }

}

 

<div class="col-lg-12 control-section default-carousel-section">

    <div class="e-sample-resize-container carousel-sample">

        <ejs-carousel id="defaultCarousel" cssClass="default-carousel" width="500px">

            <e-carousel-items>

                <e-carousel-item template="#templateItem1"></e-carousel-item>

                <e-carousel-item template="#templateItem2"></e-carousel-item>

            </e-carousel-items>

        </ejs-carousel>

    </div>

</div>

 

<style>

    .default-carousel-section .carousel-sample {

        margin: 0 auto 2em;

        max-width: 500px;

        height: 300px;

    }

 

    .default-carousel .e-carousel-items .e-carousel-item .img-container {

        height: 100%;

    }

 

    .default-carousel .e-carousel-items .e-carousel-item .img-caption {

        bottom: 4em;

        color: #fff;

        font-size: 12pt;

        height: 2em;

        position: relative;

        padding: 0.3em 1em;

        text-align: center;

        width: 100%;

    }

</style>

 

 

<script id="templateItem1" type="text/x-template">

    <img src="@imgSrc[0]" style="max-width:100%; max-height:100%;object-fit: cover" />

</script>

 

<script id="templateItem2" type="text/x-template">

    <img src="@imgSrc[1]" style="max-width:100%; max-height:100%;object-fit: cover" />
</script>

[HomeController.ts]

using Microsoft.AspNetCore.Mvc;

using System.Collections.Generic;

 

namespace RestfulCrud.Controllers

{

    public class HomeController : Controller

    {

        public class ImageModel

        {

            public byte[] ImageData { get; set; } // This property holds the image data

        }

 

        public IActionResult Index()

        {

            var imagePaths = new List<string>

            {

                "wwwroot/images/myImage1.png",

                "wwwroot/images/myImage2.png",

                // Add more paths as needed

            };

 

            var imageModels = new List<ImageModel>();

 

            foreach (var imagePath in imagePaths)

            {

                var imageModel = new ImageModel

                {

                    ImageData = System.IO.File.ReadAllBytes(imagePath)

                };

 

                imageModels.Add(imageModel);

            }

 

            return View(imageModels);

        }

    }

}

Regards,
Ashok

[Ashokkumar Karuppasamy]

Hi José Carlos,

Sample: Attached as Zip

Regards,
Ashok

Attachment: carouselsample_3a0b6791.zip