Display an array of images from Azure Blobs with .Net6

Question

I am a junior front-end developer, and I got a task where I have to take an Azure Blobs Container lets call it "thumbnails" , loop through and display it on the screen using .Net 6.

Basically, I have to make an image gallery in Dotnet 6 that takes the images from the Blob Container with DotNet6, add it to the View (MVC) and list it with AngularJS but many of my attempts has failed.

Made a small example in case if it is not clear what I want to achieve:

Image

My questions are:

• How can I take data from Azure Storage with .net 6?
• How can I create an array from it and pass it to the View?

Answer 1

In MVC

Controller:

  using System.Configuration;
    using System.IO;
    using System.Threading.Tasks;
    using System.Web;
    using Azure.Storage.Blobs;
    using Azure.Storage.Blobs.Models;
    using Microsoft.AspNetCore.Mvc;

    public class HomeController : Controller
    {
        const string blobContainerName = "tnail";
        static BlobContainerClient blobContainer;

        private IConfiguration _configuration;

        public HomeController(IConfiguration configuration)
        {
            _configuration = configuration;
        }
        public async Task<ActionResult> Index()
        {
            try
            {
                var s = _configuration.GetConnectionString("AConnectionString");

                BlobServiceClient blobServiceClient = new BlobServiceClient(s);

                blobContainer = blobServiceClient.GetBlobContainerClient(blobContainerName);
                await blobContainer.CreateIfNotExistsAsync(PublicAccessType.Blob);

                List<Uri> allBlobs = new List<Uri>();
                foreach (BlobItem blob in blobContainer.GetBlobs())
                {
                    if (blob.Properties.BlobType == BlobType.Block)
                        allBlobs.Add(blobContainer.GetBlobClient(blob.Name).Uri);
                }

                return View(allBlobs);
            }
            catch (Exception ex)
            {
                ViewData["message"] = ex.Message;
                ViewData["trace"] = ex.StackTrace;
                return View("Error");
            }
        }

Model:

namespace AzureBlobLearning.Models
{
    public class ErrorViewModel
    {
        public string? RequestId { get; set; }

        public bool ShowRequestId => !string.IsNullOrEmpty(RequestId);
    }
}

appsetting.json: Add Connectionstring data that you can find it the Azure portal, with the name of AConnectionString

View:

@if (Model != null && Model.Count > 0)
{
    foreach (var item in Model)
    {
        <div class="imageBlock">
            <a href="@item" target="_blank"><img class="thumb" src="@item" alt="images"/></a><br />
            <div class="deleteDiv"><img class="deleteIcon" src="~/Images/deleteImage.png" title="Delete Image" onclick="deleteImage('@item');" /></div>
        </div>
    }
}

See Sample: https://github.com/Azure-Samples/storage-blobs-dotnet-webapp