Question 104966 in Azure Question posted in
The official documentation to get you started can be found here.

Display an array of images from Azure Blobs with .Net6

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?
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    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


  2. 0

    you need to use the nugget Azure.Storage.Blobs. This package exposes many methods you can utilise.

    IAsyncEnumerable<BlobItem> blobs = blobContainer.GetBlobsAsync(prefix: "");
await foreach (BlobItem blobItem in blobs)
{
    ...
}

    import the using System.Linq.Async for this to work.

    Check the official docs to see more details on constructing the blobContainer.

    You can extract the base64 string value from the blobs and bind it in the UI directly.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search