Using Azure blob storage and Azure CDN in ASP.NET 5 Razor pages

Introduction

When developing web applications, It is common to use media contents such as images, videos , or documents in your application. However, thinking about the right way to store these contents and the best way to deliver it to your users can be challenging, once you take in consideration performance, availability, and proximity.

There are many approaches you can choose to tackle this subject, and Azure blob storage and Azure CDN will help you to meet these challenges.

Below is an overview about the target architecture:

The Web application :

Will be hosted in Azure App Service.
Contains a page to upload files to the Azure storage blob.
Gets the content from the CDN.

This topic will be splitted in three posts :

The first one,will cover the creation of the ASP.NET 5 Razor pages and configuring the Azure blob storage emulator locally.
The second one, will focus on deploying the Azure blob storage and the web application to Azure.(https://lemtirisalah.com/using-azure-blob-storage-and-azure-cdn-in-asp-net-5-razor-pages-part-ii/)
And The last one , will handle the creation and configuration of Azure CDN to serve our contents. (https://lemtirisalah.com/using-azure-blob-storage-and-azure-cdn-in-asp-net-5-razor-pages-part-iii/)

Prerequisites

Before you begin, make sure you have the items below, so you can follow up with this lab:

An Azure subscription! If you do not yet have an Azure account you can create an account with a few clicks (https://azure.microsoft.com). Azure is giving away a month’s trial with a $200 credit.
Microsoft Azure Storage Explorer.( https://azure.microsoft.com/fr-fr/features/storage-explorer/)
Azure SDK (https://www.microsoft.com/en-us/download/details.aspx?id=54917)
.NET Core 3.1 or .NET 5 (https://dotnet.microsoft.com/download/dotnet/5.0 )

Now, we are ready to start our journey 😊

TIP : I recommend to follow all the steps described in this lab, as it will help you understand all the important aspects of implementation. Always keep in mind, that starting coding is the best way to learn. However, if you need to test out the solution directly, clone this GitHub repository : https://github.com/salahlemtiri/aspnetrazor-azure-blob.git

Create and initiate the ASP.NET 5 Razor page

First of all, let’s start by creating our web application. For simplicity, I chose Razor page because it can make coding page-focused scenarios easier and more productive than using controllers and views. However, choosing .NET MVC or any JS stack is also fine.

These command lines will create the solution and the web project :

 dotnet new sln -o RazorPageCdnBlob
 dotnet new razor -f net5.0 -o RazorPageCdnBlob/Web
 dotnet sln .\RazorPageCdnBlob\RazorPageCdnBlob.sln add .\RazorPageCdnBlob\Web\Web.csproj

TIP : We are targeting .NET 5. But you can choose whatever framework you want by replacing “ net5.0” by “netxxx”

Open the solution with your favorite IDE. (In my case I am using Visual Studio 2019), and start installing some nugget packages, and make sure you target the latest versions :

Azure.Identity
Azure.Storage.Blobs

Then, open the page : Shared / _Layout.cshtml and update it to look something like the code below.

The page /Upload will be used to upload images to our blob container.
The page /Images will display the images.

 <nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-light bg-white border-bottom box-shadow mb-3">
             <div class="container">
                 <a class="navbar-brand" asp-area="" asp-page="/Index">Web</a>
                 <button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".navbar-collapse" aria-controls="navbarSupportedContent"
                         aria-expanded="false" aria-label="Toggle navigation">
                     <span class="navbar-toggler-icon"></span>
                 </button>
                 <div class="navbar-collapse collapse d-sm-inline-flex justify-content-between">
                     <ul class="navbar-nav flex-grow-1">
                         <li class="nav-item">
                             <a class="nav-link text-dark" asp-area="" asp-page="/Index">Home</a>
                         </li>
                         <li class="nav-item">
                             <a class="nav-link text-dark" asp-area="" asp-page="/Upload">Upload</a>
                         </li>
                         <li class="nav-item">
                             <a class="nav-link text-dark" asp-area="" asp-page="/Images">List Images</a>
                         </li>
                     </ul>
                 </div>
             </div>
         </nav>

Add two new Razor pages to the solution : Upload and Images by clicking the right mouse button on Pages :

In the file Upload.cshtml, add a simple form that will send the file to the server.

 @page
 @model Web.Pages.UploadModel
 @{
     ViewData["Title"] = "Upload page";
 }
  
 <form method="post" enctype="multipart/form-data">
     <input type="file" asp-for="Upload" />
     <input type="submit" />
 </form>

Init the file Upload.cshtml.cs with the code below. At this stage, this class contains a default constructor, the property IFormFile that represents the file to upload, and an empty post method.

 public class UploadModel : PageModel
     {
  
  
         public UploadModel()
         {
             
         }
  
         [BindProperty]
         public IFormFile Upload { get; set; }
  
  
        
  
         public async Task<IActionResult> OnPostAsync()
         {
  
             if (!ModelState.IsValid)
             {
                 return Page();
             }
  
             try
             {
                //TODO: We will implement this code later.
             }
             catch (Exception e)
             {
                 throw e;
             }
  
  
  
             return Page();
  
         }
     }

Now,go to appsettings.Development.json, and add this configuration lines :

 "AzureStorageConfig": {
     "AccountName": "UseDevelopmentStorage=true",
     "ContainerName": "testcdnappservicestcontainer"
   }

This section will instruct ASP.NET to use the storage account emulator instead of Azure blob Storage.

Then, we need to create a class that will map this configuration. We will name it : AzureStorageConfig.cs

 public class AzureStorageConfig
     {
         public string AccountName { get; set; }
         public string ContainerName { get; set; }
     }

After that, we need to register AzureStorageConfig in ConfigureServices method in Startup class so we can reference it later in our project :

 public void ConfigureServices(IServiceCollection services)
         {
             services.Configure<AzureStorageConfig>(Configuration.GetSection("AzureStorageConfig"));
             services.AddRazorPages();
         }

Start and initialize the Storage Emulator

Select the Start button, begin typing Azure Storage Emulator and then Select the emulator from the list of displayed applications.

IMPORTANT : If you don’t see the Azure Storage Emulator displayed, you should install Azure SDK first in your machine.

Once done, a command prompt will be displayed :

If you never configured the emulator locally before, init the emulator with the command :

AzureStorageEmulator.exe init /server XXX (XXX refers to your SQL database).

TIP : If you don’t have a SQL server instance running in your machine. You can use the default server localdb instead.

After that, start the emulator with the command :

AzureStorageEmulator.exe start

Make sure that the emulator is working by executing the command :

AzureStorageEmulator.exe status

Implement UploadModel to target local storage emulator

Update the class Upload.cshtml.cs, and implement the constructor and the method OnPostAsync().

 public UploadModel(IOptions<AzureStorageConfig> config)
         {
             _containerClient = new BlobContainerClient(config.Value.AccountName, config.Value.ContainerName);
         }

 public async Task<IActionResult> OnPostAsync()
         {
  
             if (!ModelState.IsValid)
             {
                 return Page();
             }
  
             try
             {
                 // Create the container if it does not exist.
                 await _containerClient.CreateIfNotExistsAsync();
  
                 // Upload the file to the container
                 await _containerClient.UploadBlobAsync(Upload.FileName, Upload.OpenReadStream());
             }
             catch (Exception e)
             {
                 throw e;
             }
  
  
  
             return Page();
  
         }

We initialize the BlobContainerClient in the constructor, and then we created the container if it doesn’t exist and upload the file in the method OnPostAsync.

Build your application and run it locally. Click in the link upload, and then select a file to upload from your host machine, and then click on send.

To make sure that the file was uploaded correctly, open Microsoft Azure storage Explorer and access Storage account > Emulator.

You should see the file you just uploaded.

IMPORTANT : In order to be able to get the blob anonymously from your web application, you must change the public access level. By default, read and write operations are private. To do that, you must change the level access to “Public read access for BLOBs only” in the Azure file storage explorer for the newly created container. However, the write process is not impacted as it will remain private and still requires authentication.

Open the file Images.cshtml, and add the code below, to test the display of the uploaded image.

 @page
 @model Web.Pages.ImagesModel
 @{
 }
  
 <img src="http://127.0.0.1:10000/devstoreaccount1/testcdnappservicestcontainer/img1.jpg" alt="Sample image" />

127.0.0.1:10000 : refers to our blob endpoint. This end point can be retrieved from the Windows Azure Storage Emulator command line tool with the command : AzureStorageEmulator.exe status

devstoreaccount1 : Default account name used by the emulator.
Testcdnappservicestcontainer : The name of the container we create earlier in our C# code.
img1.jpg : The name of the file we uploaded to the container.

Run your application and open the page Images, and you will be able to see the file you uploaded from the storage emulator.

That’s it! You were able to upload a file to the Azure storage emulator and display it in your ASP.NET Razor pages application.

Conclusion

This article is the first post of a series that show a use case of using ASP.NET, blob storage and Azure CDN.

Today we saw how we create our ASP.NET web application and how we configured the Azure storage locally for development purposes.

In the next article (https://lemtirisalah.com/using-azure-blob-storage-and-azure-cdn-in-asp-net-5-razor-pages-part-ii/), we will talk about deploying our resources to Azure and start testing our application in the cloud.

If you want to have a look at the code source of the web application, you can clone the repository from this link: https://github.com/salahlemtiri/aspnetrazor-azure-blob.git

Leave a comment if you find this article useful, and I will be pleased to answer your questions if you have any problem.

Salah.

Using Azure blob storage and Azure CDN in ASP.NET 5 Razor pages – PART I