alvinashcraft
shared this story
from 
Infragistics Community.
In this blog post, we will integrate ASP.NET MVC with Azure BLOB Storage by saving an image for an ASP.NET Identity 2.0 user in Azure BLOB Storage. We’re going to cover a lot of ground in this post, including:
Using ASP.NET Identity 2.0 user as reference in other table.
Creating a one to many relationship with ASP.NET Identity 2.0 user table
Connecting an ASP.NET MVC application to Azure Storage
Creating or Uploading a BLOB
Deleting a BLOB
Downloading a BLOB
Uploading a file from MVC form to a Azure BLOB
The final output of the blog post we plan on creating in this post will look more or less like the image below. As you can see, a user can upload a photo to her album, delete a photo, and of course, view photos too.
Architecture of the Application
The High-level architecture of the application can be drawn as shown in the image below:
Creating tables to save images
When we create an ASP.NET MVC application using the given MVC template in Visual Studio, by default, a basic authentication gets created using the ASP.NET Identity 2.0. In a default MVC project, a template for the authentication and authorization purpose ASP.NET Identity 2.0 creates the tables as shown in the image below:
The user’s information gets stored in the AspNetUsers table. Let us have a look into this table here:
For AspNetUsers, the table Id is the primary key. Our objective is to save various photos of the user. To maintain the user photos, let us create a table. In case you are not aware, ASP.NET Identity 2.0 creates tables using the Entity Framework Code First approach. So we are going to follow the same to create a table which will save information about user photos.
To create the table, right click on the Model folder, and add a class. Give the name UserImage to the created class.
UserImage.cs
Before we move ahead, let’s understand the relationship between AspNetUsers table and the UserImages table, which can be defined as below:
One user can have multiple photos
There would be no photo without any user association
AspNetUsers table and the UserImages table are in a one to many relationship.
AspNetUsers table is the primary table and UserImages table is the secondary table.
User id is a foreign key in the UserImages table.
As we know, ASP.NET Identity 2.0 uses the Entity Framework Code First approach, hence we are creating a relationship between entities using the code first approach. As you notice in code snippet above, for navigation properties, we are creating a virtual property of ApplicationUser class in UserImage class. Keep in mind that the ApplicationUser class is the model class of AspNetUsers table. We have created the relationship in UserImage class. Next, we need to create a relationship in the ApplicationUser class. You can find the ApplicationUser class inside Model/IndetityModel.cs
Do not delete any existing code in ApplicationUser class, and add the following codes. Below code is creating a one to many relationship between ApplicationUser and UserImage:
Last but not least to create a UserImages table, add the following line of code in the ApplicationDbContext class. You will find ApplicationDbContext class in the same Model/IndetityModel.cs
The last step left is to update the database with new table UserImages and create a relationship in AspNetUsers table. Since we are following the code first approach, migration should be a piece of cake! From menu, select View->Other Windows -> Manage -> Package Manager Console
On the Package Manger Console, run the following command.
PM> enable-migrations
PM> add-migration v1
PM> update-database
After successful execution of these commands, the database will be updated with a new table. New table structure would be as given in the image below. As you see, UserId is a foreign key in the UserImages table.
Since we have not changed the connection string, the database would be created inside the default local database server. However, you can change the connection string pointing to any database server and update the connecting string in the ApplicationDbContext class.
Creating a helper class to upload image in Azure BLOB
We will use the Azure Storage Library created by the Azure team to perform operations on Azure BLOBS from the MVC Application. To work with this, we need to add the WindowsAzure.Storage NuGet package in the project. Right click on the project, and click on Manage NuGet Package. In the package manager, search WinowsAzure.Storage and install that in the project.
We are going to create a utility class to perform the following tasks in Azure BLOB storage.
Upload an image to a BLOB
Download an image
Delete an image and a BLOB
In this example, I am going to hard code the container name. In case you are new to Azure BLOB storage, you upload an image as a BLOB inside a container. We are not going to create a container, but will use an already-created container from the portal.
Before we move ahead, let us do the following tasks
Login to Azure Portal
Click on New -> Data+ Storage -> Storage Account to create a new Storage Account
Once the storage account is created, select that from all resources.
Click on BLOB Services and then container. From the top click on + to create a container.
I am going to use already created container named jsr . You can find list of containers for your storage service, as shown in the image below:
To connect with Azure Storage from .NET code, we need a connection string or Keys to the Azure Storage. You can find connection string and Keys in the portal, by clicking on the Settings->Keys in the Azure Storage Service as shown in the image below:
We will need a Primary Connection String in the code to connect with Azure Storage.
Great, let us now go ahead and create a class. I am naming the class as BlobUtility and putting it inside a folder called Utilities.
In the constructor of BlobUtility class, we are creating a connecting string to connect with the Azure Storage. To create the connection string, we need to pass two parameters:
Storage account name
Storage account key
We have already noted the account name and account key from the portal. We will create instance of BlobUtility class in the controller class and pass the storage account name and key from there.
The listing below shows you how create a connection string for Azure Storage:
Now we need functions to:
Upload an image in a BLOB
Delete an image or BLOB
Download an image
To upload an image in BLOB, we will pass the name of the BLOB or image, the container name (which is JSR in this case), and the Image stream. We are going to upload the image as BLOCK. There are two ways a BLOB can be created:
Page BLOB
Block BLOB
We are going to create a Block BLOB. Also keep in mind that the container is a public container and there is no restriction on it. Below is the simplest possible way to upload an Image to a BLOB.
In the above listing, we are performing the following tasks:
Creating an object on CloudBlobClient
Getting the reference of the container
Creating an object of block BLOB
Uploading an image stream in the block BLOB
The UploadBlob function would upload an image as a block BLOB and will return newly created CloudBlobBlock.
A BLOB can be deleted by calling the Delete method on the object of CloudBlobBlock. The code listed below will delete on basis of BlobName in a given Azure container.
A BLOB can be downloaded using the function detailed below:
Keep in mind that public BLOB’s can be downloaded directly by hitting the BLOB URL. So probably, we may not use this function and instead will directly hit the URL to download the BLOB in browser. And when we put everything together, the BlobUtility class will have the following codes:
We have written the utility class which will perform the following operations:
Upload image to BLOB
Delete a BLOB
Download a BLOB
Creating Controller and the View
By now, we have created a table and the utility class. Now let us use that in the controller to perform operations. To start with in the HomeController, create the object of BlobUtility class and ApplicationDbContext. We are declaring global variables and creating the object in the constructor of HomeController as shown in the listing below:
In the Index action of HomeController, we wish to show all the photos of the logged in user. We can do that in the following steps:
Fetch Id of the current logged in user
From the UserImages table, fetch all the images of logged in user. We are fetching all the images on the basis of UserId.
In the ViewBag, passing the total count of the photos
Passing a List of UserImages to the view
Putting all of the above together, the Index action will have codes as shown in the listing below:
We have created the action to fetch all the images of a logged-in user. Let us go ahead and next create a View to display the photos. The View is going to be very simple. In the view, we are iterating a List of images and displaying that in a bootstrap column. Also, we have added a delete button with each image. When the user clicks on the delete button, that particular image will be deleted from the UserImages table and the Azure BLOB.
Essentially we are doing the following tasks in the view:
Iterating all the photos and displaying in an-image element
Displaying the number of photos in the header
Adding a delete button to delete all the photos.
The View can be created as shown in the listing below:
As you can plainly see, we are using many bootstrap classes to make the view more immersive. Images of a given user will be displayed on the view as shown in the image below:
Great! So far we have listed all the photos of logged in user. Now let us perform the delete operation. As you might have noticed in the view, on the delete button, we are invoking DeleteImage action of Home controller. We are also passing the id to be deleted.
The DeleteImage action performs two tasks:
Delete a row from UserImages table on the given id;
Delete image from the Azure BLOB
Both the operations are pretty straightforward. First we are fetching the row to be deleted from the table, and deleting that. After that, we are extracting the BLOB name from the URL and deleting the BLOB from Azure BLOB storage. DeleteImage action can be created as shown in the listing below:
So far we have performed tasks of listing all the images and deleting an image. Now let us write an action to upload an image. In the UploadImage action,
Uploading image to Azure BLOB
Inserting new row to UserImages table.
In the UploadImage action, we are passing HttpPostedFileBase as the input parameter and uploading the image as a stream. On the View, we are using HTML file type and uploading that as multipart/formdata. Also, the file upload is inside a form and calling UploadImage action of the Home controller. The View to upload an image can be created as shown in the listing below:
By putting all the pieces together, view, upload, delete and list photos will have codes as shown in the listing below:
Conclusion
There you have it! This is all you need to do create a photo album for an ASP.NET user, who is using Azure BLOB storage. In this post we covered the following topics:
Using ASP.NET Identity 2.0 user as reference in other table.
Creating one to many relationship with ASP.NET Identity 2.0 user table
Connecting ASP.NET MVC application to Azure Storage
Creating or Uploading a BLOB
Deleting a BLOB
Downloading a BLOB
Uploading file from MVC form to a Azure BLOB
I hope you found this post useful - thanks for reading!
