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.
1. 2.
Create an ASP.NET application project
Estimation time for this section A: 5 Minutes
Open Visual Studio. From the main menu, select File > New > Project.
3.
In the New Project dialog box, select Web > ASP.NET Core Web
Application > AspNetCoreStorage. Then select OK.
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.
1. 2.
Use connected services to connect to an Azure storage account.
Estimation time for this section B: 10 Minutes In Solution Explorer, right-click the project.
From the context menu, select Add > Connected Service.
In the Connected Services dialog box, select Cloud Storage with Azure Storage, and then select Configure.
3.
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.
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
6.
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 – select Add.
Empty, and
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. TheCloudBlobContainer.CreateIfNotExistsmethod
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
Level 3
Asia Pacific University of Technology & Innovation Page 9 of 22
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.OpenCreateBlobContainer.cshtml, and modify it so that it looks like the following code snippet:
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:
. After the last
- element in the list, add the following HTML to add another navigation menu item:
-
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
Create blob container
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.
The UploadFromStream method creates the blob if it doesn’t exist, or overwrites it if it does exist. (Change to a fully qualified path to a file to be uploaded.).
using (var fileStream = System.IO.File.OpenRead(@”“))
{
blob.UploadFromStreamAsync(fileStream).Wait();
}
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
- element in the list, add the following HTML to add another navigation menu item:
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
blob
Upload
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 theCloudBlobContainer.ListBlobsSegmentedAsync method.
The CloudBlobContainer.ListBlobsSegmentedAsync method returns a BlobResultSegment.
This contains IListBlobItem objects that can be cast toCloudBlockBlob, CloudPageBlob, or CloudBlobDirectoryobjects.
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
- element in the list, add the following HTML to add another navigation menu item:
10. Run the application, and select List blobs to see results similar to the following screenshot:
List
Level 3
Asia Pacific University of Technology & Innovation Page 15 of 22
blobs
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 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.
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:
After the last
- element in the list, add the following HTML to add another navigation menu item:
Download blob
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.
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.
After the last
- element in the list, add the following HTML to add another navigation menu item:
Download blob
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
Right-click on the Models folder and select Add > Class.
2.
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:
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
7.
- Blog
Example
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
j.
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.
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, selectResource groupsand 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