Design and Developing Application in Cloud (CT071-3-5-3-DDAC) Azure Blob Storage and Visual Studio Connected Services

Lab 7: Get started with Azure Blob storage and Visual Studio
connected services (ASP.NET Core)

Azure Blob storage is a service that stores unstructured data in the cloud as objects or blobs. Blob
storage can store any type of text or binary data, such as a document, media file, or application
installer. Blob storage is also referred to as object storage.

This tutorial shows how to write ASP.NET Core code for some common scenarios that use Blob
storage. Scenarios include creating a blob container, and uploading, listing, downloading, and deleting
blobs.

a. Create an ASP.NET application project

 Estimation time for this section A: 5 Minutes

1. Open Visual Studio. From the main menu, select File > New > Project.

2. In the New Project dialog box, select Web > ASP.NET Core Web
Application > AspNetCoreStorage. Then select OK.

3. In the New ASP.NET Core Web Application dialog box, select .NET
Core > ASP.NET Core 2.0 > Web Application (Model-View-Controller). Then
select OK.

Level 3 Asia Pacific University of Technology & Innovation Page 1 of 22

Design and Developing Application in Cloud (CT071-3-5-3-DDAC) Azure Blob Storage and Visual Studio Connected Services

b. Use connected services to connect to an Azure storage account.

 Estimation time for this section B: 10 Minutes

1. In Solution Explorer, right-click the project.

2. From the context menu, select Add > Connected Service.

3. In the Connected Services dialog box, select Cloud Storage with Azure Storage,
and then select Configure.

Level 3 Asia Pacific University of Technology & Innovation Page 2 of 22

Design and Developing Application in Cloud (CT071-3-5-3-DDAC) Azure Blob Storage and Visual Studio Connected Services

4. In the Azure Storage dialog box, select the Azure storage account to be used for this
tutorial. To create a new Azure storage account, select Create a New Storage
Account, and complete the form.

Level 3 Asia Pacific University of Technology & Innovation Page 3 of 22

Design and Developing Application in Cloud (CT071-3-5-3-DDAC) Azure Blob Storage and Visual Studio Connected Services

5. After selecting either an existing storage account or creating a new one, select Add.
Visual Studio installs the NuGet package for Azure Storage, and a storage
connection string to appsettings.json.

6. To allow the network able to access to manage the blob storage account, a
connection string need to generate from the azure portal and replace the current
connection string in the appsettings.json. The steps as below:

 Go to the storage account and click the “Shared access signature” button.

Level 3 Asia Pacific University of Technology & Innovation Page 4 of 22

Design and Developing Application in Cloud (CT071-3-5-3-DDAC) Azure Blob Storage and Visual Studio Connected Services

 Then, go to the website: https://www.whatismyip.com/ to search your public ipv4

address and attach to the Allowed IP Addresses column. Then, check the
HTTPS and HTTP option from the form and choose the key1 in the signing
key column.

 Then, click on the “Generate SAS and connection string” button to generate the
connection string and then click on the copy button to copy the string.

 Lastly, paste the connection string to the appsettings.json to replace the

current connection string.

Level 3 Asia Pacific University of Technology & Innovation Page 5 of 22

Design and Developing Application in Cloud (CT071-3-5-3-DDAC) Azure Blob Storage and Visual Studio Connected Services

c. Create a controller.
 Estimation time for this section C: 10 Minutes

1. In Solution Explorer, create a Controllers folder. Then, right-click Controllers.

2. From the context menu, select Add > Controller.

3. In the Add Scaffold dialog box, select MVC Controller - Empty, and
select Add.

4. In the Add Empty MVC Controller dialog box, name the

controller BlobsController, and select Add.

5. Add the following using directives to the BlobsController.cs file:

using System.IO;
using Microsoft.Extensions.Configuration;
using Microsoft.WindowsAzure.Storage;
using Microsoft.WindowsAzure.Storage.Blob;

Level 3 Asia Pacific University of Technology & Innovation Page 6 of 22

Design and Developing Application in Cloud (CT071-3-5-3-DDAC) Azure Blob Storage and Visual Studio Connected Services

6. Connect to a storage account and get a container reference. Add a method

called GetCloudBlobContainer that returns a CloudBlobContainer.

Level 3 Asia Pacific University of Technology & Innovation Page 7 of 22

Design and Developing Application in Cloud (CT071-3-5-3-DDAC) Azure Blob Storage and Visual Studio Connected Services

d. Create a blob container.

 Estimation time for this section D: 15 Minutes

The following steps illustrate how to create a blob container:

1. In the BlobsController.cs, add a method called CreateBlobContainer that

returns an ActionResult.

2. Get a CloudBlobContainer object that represents a reference to the desired blob

container name.

CloudBlobContainer container = GetCloudBlobContainer();

3. Call the CloudBlobContainer.CreateIfNotExists method to create the container,

if it does not yet exist. The CloudBlobContainer.CreateIfNotExists method
returns true if the container does not exist, and is successfully created.
Otherwise, the method returns false.

ViewBag.Success = container.CreateIfNotExistsAsync().Result;

4. Update ViewBag with the name of the blob container.

ViewBag.BlobContainerName = container.Name;

5. The following shows the completed CreateBlobContainer method:

6. In Solution Explorer, right-click the Views folder. From the context menu,
select Add > New Folder. Name the new folder Blobs.

Level 3 Asia Pacific University of Technology & Innovation Page 8 of 22

Design and Developing Application in Cloud (CT071-3-5-3-DDAC) Azure Blob Storage and Visual Studio Connected Services

7. In Solution Explorer, expand the Views folder, and right-click Blobs.

8. From the context menu, select Add > View.

9. In the Add MVC View box, enter CreateBlobContainer for the view name, and
select Add.

10. Open CreateBlobContainer.cshtml, and modify it so that it looks like the

following code snippet:

Level 3 Asia Pacific University of Technology & Innovation Page 9 of 22

Design and Developing Application in Cloud (CT071-3-5-3-DDAC) Azure Blob Storage and Visual Studio Connected Services

11. In Solution Explorer, expand the Views > Shared folder, and
open _Layout.cshtml. Look for the unordered list that looks like this: <ul
class="nav navbar-nav">. After the last <li> element in the list, add the
following HTML to add another navigation menu item:

<li><a asp-area="" asp-controller="Blobs" asp-

action="CreateBlobContainer">Create blob container</a></li>

12. Run the application, and select Create Blob Container to see results similar to
the following screenshot:

Level 3 Asia Pacific University of Technology & Innovation Page 10 of 22

Design and Developing Application in Cloud (CT071-3-5-3-DDAC) Azure Blob Storage and Visual Studio Connected Services

e. Upload a blob into blob container.

 Estimation time for this section E: 10 Minutes

When the blob container is created, upload files into that container. This section walks
through uploading a local file to a blob container.

The steps assume there is a blob container named test-blob-container:

1. Open the BlobsController.cs file.

2. Add a method called UploadBlob that returns a string.

3. Within the UploadBlob method, get a CloudBlobContainer object that represents

a reference to the desired blob container name.

CloudBlobContainer container = GetCloudBlobContainer();

4. Azure storage supports different blob types.

This tutorial uses block blobs. To retrieve a reference to a block blob, call
the CloudBlobContainer.GetBlockBlobReference method.
CloudBlockBlob blob = container.GetBlockBlobReference("myBlob");

5. After there is a blob reference, you can upload any data stream to it by calling
the blob reference object's UploadFromStream method.
using (var fileStream = System.IO.File.OpenRead(@"<file-to-upload>"))
{
blob.UploadFromStreamAsync(fileStream).Wait();
}

The UploadFromStream method creates the blob if it doesn't exist, or overwrites it

if it does exist. (Change <file-to-upload> to a fully qualified path to a file to be
uploaded.).

Level 3 Asia Pacific University of Technology & Innovation Page 11 of 22

Design and Developing Application in Cloud (CT071-3-5-3-DDAC) Azure Blob Storage and Visual Studio Connected Services

6. In Solution Explorer, expand the Views > Shared folder, and

open _Layout.cshtml.

7. After the last <li> element in the list, add the following HTML to add another
navigation menu item:

<li><a asp-area="" asp-controller="Blobs" asp-action="UploadBlob">Upload

blob</a></li>

8. Run the application, and select Upload blob. The word success! should appear.

9. Exercise 01: Modify the BlobsController.cs and store multiple items into the
azure blob storage in one time. The example output as below:

Item 1: myBlob – Store for image

Item 2: textfile – Store for text file

Level 3 Asia Pacific University of Technology & Innovation Page 12 of 22

Design and Developing Application in Cloud (CT071-3-5-3-DDAC) Azure Blob Storage and Visual Studio Connected Services

f. List the blobs in a blob container.

 Estimation time for this section F: 10 minutes.

This section illustrates how to list the blobs in a blob container. The sample code
references the test-blob-container created in the section - Create a blob container.

1. Open the BlobsController.cs file.

2. Add a method called ListBlobs that returns an ActionResult.

3. Within the ListBlobs method, get a CloudBlobContainer object that represents a

reference to the blob container.

CloudBlobContainer container = GetCloudBlobContainer();

4. To list the blobs in a blob container, use

the CloudBlobContainer.ListBlobsSegmentedAsync method.

The CloudBlobContainer.ListBlobsSegmentedAsync method returns

a BlobResultSegment.

This contains IListBlobItem objects that can be cast

to CloudBlockBlob, CloudPageBlob, or CloudBlobDirectory objects.

The following code snippet enumerates all the blobs in a blob container. Each
blob is cast to the appropriate object, based on its type. Its name (or URI in the
case of a CloudBlobDirectory) is added to a list.

Level 3 Asia Pacific University of Technology & Innovation Page 13 of 22

Design and Developing Application in Cloud (CT071-3-5-3-DDAC) Azure Blob Storage and Visual Studio Connected Services

5. The following shows the completed ListBlobs method:

6. In Solution Explorer, expand the Views folder, and right-click Blobs.

7. From the context menu, select Add > View. In the Add View dialog box,
enter ListBlobs for the view name, and select Add.

8. Open ListBlobs.cshtml, and replace the contents with the following code:

Level 3 Asia Pacific University of Technology & Innovation Page 14 of 22

Design and Developing Application in Cloud (CT071-3-5-3-DDAC) Azure Blob Storage and Visual Studio Connected Services

9. In Solution Explorer, expand the Views > Shared folder, and

open _Layout.cshtml. After the last <li> element in the list, add the following
HTML to add another navigation menu item:

<li><a asp-area="" asp-controller="Blobs" asp-action="ListBlobs">List

blobs</a></li>

10. Run the application, and select List blobs to see results similar to the following
screenshot:

Level 3 Asia Pacific University of Technology & Innovation Page 15 of 22

Design and Developing Application in Cloud (CT071-3-5-3-DDAC) Azure Blob Storage and Visual Studio Connected Services

g. Download blobs
 Estimation time for this section G: 5 Minutes.

This section illustrates how to download a blob. You can either persist it to local storage
or read the contents into a string. The sample code references the test-blob-container
created in the section - Create a blob container.

1. Open the BlobsController.cs file.

2. Add a method called DownloadBlob that returns a string.

3. Within the DownloadBlob method, get a CloudBlobContainer object that represents a

reference to the blob container.

CloudBlobContainer container = GetCloudBlobContainer();

4. Get a blob reference object by calling

the CloudBlobContainer.GetBlockBlobReference method.

CloudBlockBlob blob = container.GetBlockBlobReference("myBlob");

5. To download a blob, use the CloudBlockBlob.DownloadToStream method.

The following code transfers a blob's contents to a stream object.

That object is then persisted to a local file. (Change <local-file-name> to the fully
qualified file name representing where the blob is to be downloaded.)

6. The following shows the completed ListBlobs method (with a fully qualified path
for the local file being created):

Level 3 Asia Pacific University of Technology & Innovation Page 16 of 22

Design and Developing Application in Cloud (CT071-3-5-3-DDAC) Azure Blob Storage and Visual Studio Connected Services

7. In Solution Explorer, expand the Views > Shared folder, and open _Layout.cshtml.

After the last <li> element in the list, add the following HTML to add another
navigation menu item:
<li><a asp-area="" asp-controller="Blobs" asp-action="DownloadBlob">
Download blob</a></li>

8. Run the application, and select Download blob to download the blob. The blob
specified in the CloudBlobContainer.GetBlockBlobReference method call
downloads to the location specified in the File.OpenWrite method call. The
text success! should appear in the browser.

9. Exercise 02: Modify the code to download the picture to the /wwwroot/images
folder and display it into the download.cshtml page. The sample of output as
below:

Level 3 Asia Pacific University of Technology & Innovation Page 17 of 22

Design and Developing Application in Cloud (CT071-3-5-3-DDAC) Azure Blob Storage and Visual Studio Connected Services

h. Delete blobs.
 Estimation time for this section H: 5 Minutes.

1. Open the BlobsController.cs file.

2. Add a method called DeleteBlob that returns a string.

3. Within the DeleteBlob method, get a CloudBlobContainer object that represents a

reference to the blob container.

CloudBlobContainer container = GetCloudBlobContainer();

4. Get a blob reference object by calling

the CloudBlobContainer.GetBlockBlobReference method.

CloudBlockBlob blob = container.GetBlockBlobReference("myBlob");

5. To delete a blob, use the delete method.

blob.DeleteAsync().Wait();

6. The completed DeleteBlob method should appear as follows:

7. In Solution Explorer, expand the Views > Shared folder, and open _Layout.cshtml.

After the last <li> element in the list, add the following HTML to add another
navigation menu item:
<li><a asp-area="" asp-controller="Blobs" asp-action="DeleteBlob">
Download blob</a></li>

8. Run the application, and select Delete blob to delete the blob specified in
the CloudBlobContainer.GetBlockBlobReference method call. The
text success! should appear in the browser. Select the browser's Back button, and
then select List blobs to verify that the blob is no longer in the container.

Level 3 Asia Pacific University of Technology & Innovation Page 18 of 22

Design and Developing Application in Cloud (CT071-3-5-3-DDAC) Azure Blob Storage and Visual Studio Connected Services

i. Exercise 03: Combine the SQL Database together with the Blob
Storage in a system.
 Estimation time for this section I: 45 Minutes.

1. Open Visual Studio 2017, and go to the File > New > Project

 From the left menu, select Installed > Visual C# > .NET Core.
 Select ASP.NET Core Web Application.
 Enter EFGetStarted.AspNetCore.NewDb for the name and click OK.
 In the New ASP.NET Core Web Application dialog:
 Make sure that .NET Core and ASP.NET Core 2.1 are selected in the drop-
down lists
 Select the Web Application (Model-View-Controller) project template
 Make sure that Authentication is set to No Authentication
 Uncheck the Configure for HTTPS
 Click OK

2. Right-click on the Models folder and select Add > Class.

Level 3 Asia Pacific University of Technology & Innovation Page 19 of 22

Design and Developing Application in Cloud (CT071-3-5-3-DDAC) Azure Blob Storage and Visual Studio Connected Services

3. Enter Model.cs as the name and click OK. Replace the contents of the file with
the following code:

4. To make BloggingContext available to MVC controllers, register it as a service.

 In Startup.cs add the following using statements. Add the following yellow
highlighted code to the ConfigureServices method:

5. The following steps use migrations to create a database:

 Tools > NuGet Package Manager > Package Manager Console

 Run the following commands:

Add-Migration InitialCreate
Update-Database

Level 3 Asia Pacific University of Technology & Innovation Page 20 of 22

Design and Developing Application in Cloud (CT071-3-5-3-DDAC) Azure Blob Storage and Visual Studio Connected Services

6. Create a controller. Scaffold a controller and views for the Blog entity.

 Right-click on the Controllers folder in Solution Explorer and select Add >
Controller.
 Select MVC Controller with views, using Entity Framework and click Add.
 Set Model class to Blog and Data context class to BloggingContext.
 Click Add
 Open the Shared folder and find the _Layout.schtml add the below line in the
navigational bar coding:

<li><a asp-area="" asp-controller="Blogs" asp-action="Index">Blog

Example</a></li>

7. Lastly, run the application by using the Debug > Start Without Debugging. If you
able to see the below application running, it means that you are successfully create a
system with the SQL database.

Index page for blog section

Create page for blog section

Level 3 Asia Pacific University of Technology & Innovation Page 21 of 22

Design and Developing Application in Cloud (CT071-3-5-3-DDAC) Azure Blob Storage and Visual Studio Connected Services

Edit page for blog section

8. Publish it to the Azure Cloud using the publish button.

9. Once you successfully to publish to the azure cloud, continue the steps in this
exercise to create a blob storage for this system. You should be able to add a
file to the Azure Blob Storage through this system.

j. Clean up resources.
 Estimation time for this section J: 10 Minutes.

1. In the preceding steps, you created Azure resources in a resource group. If you
don't expect to need these resources in the future, you can delete them by deleting
the resource group.

2. From the left menu in the Azure portal, select Resource groups and then
select myResourceGroup.

3. On the resource group page, make sure that the listed resources are the ones you
want to delete.

4. Select Delete, type myResourceGroup in the text box, and then select Delete.

Summary:
In this tutorial, we learned how to build a system with the Azure Blob Storage Service. We
also learned how to combine the existing system (with SQL database) with the Azure Blob
Storage Service.

Level 3 Asia Pacific University of Technology & Innovation Page 22 of 22