Working With Azure BLOB Storage in MVC

In order to call the storage account and create the container you need a class in the MVC Project. Add a class "BlobStorageService.cs" and a method "GetCloudBlobContainer()" of type CloudBlobContainer.

You need to import a couple of namespaces here, so make sure you have all of them. Now, let's understand the code written for the method.

Line Number 15, 16: Connecting to the storage account using the Connection String that we provided in Step 3 and then creating the Cloud BLOB service client.

Line Number 17: In the Cloud BLOB service client, we are looking for a container by the name "myimages"; you will see the container in just a bit.

Line Number 18 to 21: Using an if block, determine if the "myimage" named container exists. If it does not exist then create one and set all the required public access permissions.

Line Number 22: Finally, returning the blobContainer object that has everything, like account information, container information and appropriate permissions.

What is Container? Roughly speaking, this is just like a folder in the Cloud that will contain our BLOBs.

Step 5: Working on ActionResult to Upload, Display and Delete Images

Once you have a storage account and container set up, you can proceed to use them inside controllers.

I will add action methods inside the Home controller. Here is the code that will upload and display the images.

Look at the line number 33, I've created the object of BLOB storage service class (BlobStorageService). There are two Upload action results, the first one will list all the available BLOB's URIs in the container and return them in the view to be displayed, and the second one is labeled "[HttpPost]" so this will accept the posted image file and upload it to the BLOB container. In the end this will redirect to the same view page to make the recently uploaded image visible.

There is one more method with the "[HttpPost]" label that we are left with, which will delete the image, here it is.

In the code above, you can see this is just a normal method that will accept Name as a parameter and return a string message. "Name" is nothing but the URI of the image (for example: "http://127.0.0.1:10000/devstoreaccount1/myimages/scene.jpg") so in order to know the actual name of the image ("scene.jpg") we need to use "uri.LocalPath". Then, we will use this filename to get the reference of BLOB and then delete it. At the end we will return the string result "File Deleted.".

Step 6: Creating View Page

In the above step we created all the required ActionResults and a method inside the Home controller. Now, let's add a view page for the Upload ActionResult and use the following code.

In the code above, look at the first block, here we have created a regular form using Razor syntax with a file input and submited the input control. In the second block, we are looping through the Model returned by the GET version of the "Upload" action result. In the body of the loop attaching the Model item data (which is the URI of the image) to the image control and link control. Inside the link control, I'm making a JS function called with a URI parameter. Now, this JS function will call the method "DeleteImage" with a URI (which is, Name: item) as a parameter, then it will redirect the browser to the Home/Upload location and display the alert message "File Deleted.".

Now, we are all set to run the application and do everything to upload and delete images.

That's all for building the application. Now, let's proceed to push this application and BLOB storage to the Cloud.

Publishing to Windows Azure (Storage and Web Role)

Before pushing the storage and MVC application (web role) to the Cloud, let's look at the local development server and see what's happening here.

When you open the Server Explorer, you will notice many Azure services are running.

In the above image, notice a "Windows Azure Storage" service, if you expand it you will find "Development" server storage services. Inside "Development" you will find BLOBs, Queues and Tables. If you expand BLOBs you will find "myimages", which is our container that we created in "Step 4: BLOB Storage Service". If you right-click on "myimages" and click to select "View BLOB Container", it will open a nice document based list of BLOBs (images). So, all these are running on the local development server.

In the same way, if you look at the running applications (maybe hidden, click the little icon on the Taskbar to open it) you will see an Azure Storage Emulator running with all three services.

Now, let's proceed to open the Azure Portal and create a storage account and return here to modify/update the Connection String setting and then we will push the application and BLOB storage to the Cloud.

Step 1: Create Storage Account on Azure Portal

Let's go quickly to the Windows Azure portal and quickly create a storage account by the name "blobstoragedemo". Here is an image of that.

Once you have created the storage account, you will see "Manage Access Keys", let's copy "Storage Account Name" and "Primary Access Key".

Step 2: Modify Connection String

Once you have "Storage Account Name" and "Primary Access Key", you can open your development application and modify the Connection String settings to point to the Cloud Storage Account which is "blobstoragedemo".

After filling in all the information displayed on the Azure portal, click "Ok" at the end. That's it. Now this will store all the BLOBs in the Storage Account in the Cloud rather than in the Azure emulator (on the local machine).

Run the application and try to upload any image here, before proceeding to the next step.

Step 3: Connecting to Azure Storage Account from Server Explorer

You can check it in the Server explorer by adding the storage account and by entering "Storage Account Name" and "Primary Access Key". Look at the image given below.

In the above image, look in the Server Explorer; you will see another storage account connected to the Cloud storage account. Also, look at the image that we uploaded in the above step, it is right there uploaded, you will see the URL of the BLOB accessible by browsers.

Step 4: Publishing MVC Web Role Application

As of now, we have connected our application to Azure Storage in the Cloud. There is only one thing left here, the publishing of the MVC Application. Please note, this is not just a MVC Application, it is more than a "Cloud enabled application", so publishing it like regular "Azure Websites" will not work. So, right-click on "MvcWebRole1" and select "Publish to Windows Azure".

After clicking on "Publish to Windows Azure" you will be asked to select your subscription, you can download it just by clicking on the given link. An image showing that is given below.

When you have downloaded the credentials, import it and click on the "Next" button. You will get the following dialog. You can either pick the "Cloud Service" you have created or create a new one. Let's create a new one, "BlobCloudService". Select the location and hit "Ok".

Leave all the other information as it is for now and click the "Next" button. Then click to publish it. You will see the deployment process running in Visual Studio.

Once the deployment process finishes, you can browse it and try to upload images, it will work smoothly, now everything is in the Cloud.

I hope this helps. Thanks.