Lab 6 - Get Started With Azure Blob Storage and Visual Studio Connected Services (ASP - NET Core) PDF

Design and Developing Application in Cloud (CT071-3-5-3-DDAC) Azure Blob Storage and Visual Studio Connected Services
Lab 6: 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 21

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.

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.

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.

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;

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

called GetCloudBlobContainer that returns a CloudBlobContainer.

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.

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:

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:

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.
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.).


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

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.
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.
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.

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:


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:

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.
2. Add a method called DownloadBlob that returns a string.
3. Within the DownloadBlob method, get a CloudBlobContainer object that represents a

4. Get a blob reference object by calling

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):

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

h. Delete blobs.
 Estimation time for this section H: 5 Minutes.
2. Add a method called DeleteBlob that returns a string.
3. Within the DeleteBlob method, get a CloudBlobContainer object that represents a

4. Get a blob reference object by calling

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
<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.

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.

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

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

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.

Lab 6 - Get Started With Azure Blob Storage and Visual Studio Connected Services (ASP - NET Core) PDF

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Lab 6 - Get Started With Azure Blob Storage and Visual Studio Connected Services (ASP - NET Core) PDF

Uploaded by

Copyright:

Available Formats

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

a. Create an ASP.NET application project

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

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

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

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

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

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

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

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

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

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

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

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

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

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

d. Create a blob container.

The following steps illustrate how to create a blob container:

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

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

CloudBlobContainer container = GetCloudBlobContainer();

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

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

5. The following shows the completed CreateBlobContainer method:

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

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

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

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

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

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

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

e. Upload a blob into 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

CloudBlobContainer container = GetCloudBlobContainer();

4. Azure storage supports different blob types.

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

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

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

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

Item 1: myBlob – Store for image

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

f. List the blobs in 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

CloudBlobContainer container = GetCloudBlobContainer();

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

The CloudBlobContainer.ListBlobsSegmentedAsync method returns

This contains IListBlobItem objects that can be cast

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

5. The following shows the completed ListBlobs method:

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

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

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

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

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

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

CloudBlobContainer container = GetCloudBlobContainer();