Changing The Contents Of Your .NET Application On The Fly Using Azure Storage

In today’s world where everything on the internet is changing with just a click of a button, why should we have to wait for hours in order to update the contents of our live application? The modern business requires such mechanisms where people driving the business should not be dependent on the development team to update any minor details on the website. If I'm talking from a developer’s perspective then we should try not to embed the contents of our application inside HTML/Script. In order to do so, we have a number of options available to put our data on any cloud platform and update from there without any manual intervention in the source code.

In this article, we will go through one such approach with which we can manage the content of our ASP.NET web application without touching the source code using Azure Storage accounts.

Azure Storage accounts are one of the offerings of the Azure platform where you can store your structured/unstructured data. Most of the file formats are supported. The following four categories are inside any Azure storage account wherein you can store your data.
In this demo our content will come from a blob.

In order to configure a blob, login to azure portal and go to Storage accounts. If you are familiar with Azure and already have a Storage account under which you want to store your contents then click on blobs, otherwise first click on Add button in the top right corner of your screen and select the Subscription and Resource Group under which you want to create your storage account, then provide a meaningful name of the account and select the location where you want your storage account to be created. Then fill in the account type and a few other non-mandatory fields on the basis of your future requirements and click review and create.

Once you have created a storage account, click on blobs. It will open a screen which will prompt you to add containers. Basically, azure blob is a widely used cloud storage method where you can store unstructured data like excel, word, images, JSON, text etc and read/write/update them manually or through your application with the help of nuget package provided by microsoft. Inside blob, data is stored inside containers, basically a container represents a specific group. We can create one container to serve one purpose and all the files related to that work item can be put inside that container.

In the example discussed below, the name of our Storage account will be Content On The Fly.

And the name of the container will be indexpagecontent.

Let’s skip Azure blob for now, this detail is more than enough to move forward. So, create a container and inside that container upload the file containing the content of your application. As discussed above, you can use any file type. In this demo application, we will use JSON file to read/update the contents of our application.

In our case, the name of the file will be DemoApp.JSON and its contents will be something like this,

{"Content":"Hi,I am Saurabh Mishra and in this article we are going to create an application that will fetch its contents from an azure blob and we will update it on the fly."}

So, just upload this file inside our container and now, we are almost done with setting up things in Azure.

Let’s open our Visual Studio and create a sample application.

Here, we will create a sample ASP .Net MVC application and change its contents on the fly.

Let’s go,

As soon as you hit OK, a new window will appear asking you which application you want to create. You have a number of choices, including which application you want to create, as of now we will go with a MVC app.

Once you select MVC, a sample application will be created having a Solution Explorer view as shown below,

Now, let us follow a Model for our Index.cshtml with the help of which we will pass our contents from controller to view.

So, right click on the Model folder and select add and then add a new class named IndexModel which we will be using inside our Home controller.

namespace ContentOnTheFly.Models {
    public class IndexModel {
        public string ApplicationContent {
            get;
            set;
        }
    }
}

Now, we have created our model, so let us modify our view to use this model.

So update the contents of Index.cshtml like this,

@model ContentOnTheFly.Models.IndexModel
@{
   ViewBag.Title = "Home Page";
}
<div class="row">
   <div class="col-md-4">
      <h2>Let's Change contents of our App on the Fly</h2>
      <p>
         @Model.ApplicationContent.ToString();
      </p>
      <p><a class="btn btn-default" href="http://about.me/saurabh-mishra">Saurabh Mishra</a></p>
   </div>
</div>

Here, we are not doing any fancy stuff, but still if you have any doubt you can leave your comments.

Now, as we are done with setting up our model and view, let’s move to the most important section; i.e., controller, where all the data fetching will take place.

In the example provided, I have put all the Keys, File names, etc., in the source code itself, but as per the coding standards of your organization, you can move things according to web.config.

Let us have a look at two of the most important methods in our Home controller.

public ActionResult Index() {
    IndexModel IM = new IndexModel();
    IM.ApplicationContent = IndexPageContent();
    return View(IM);
}
public string IndexPageContent() {
    try {
        // Provide the connection key of the Azure Storage Account which you want to connect to as the parameter
        //In order to get the connection key Goto Azure Portal -> Storage Accounts -> Select the Storage Account -> Access Keys -> Select either of the twoconnection strings present there
        CloudStorageAccount CSA = CloudStorageAccount.Parse("Content On The Fly");
        CloudBlobClient CBC = CSA.CreateCloudBlobClient();
        //Provide the name of the container as the Parameter
        CloudBlobContainer Container = CBC.GetContainerReference("indexpagecontent");
        CloudBlockBlob Blob = Container.GetBlockBlobReference("DemoApp.json");
        var stream = new MemoryStream();
        var DemoAppContent = new object();
        Blob.DownloadToStream(stream);
        stream.Position = 0;
        StreamReader Reader = new StreamReader(stream);
        var serializer = new JsonSerializer();
        using(var jsonReader = new JsonTextReader(Reader)) {
            DemoAppContent = serializer.Deserialize(jsonReader);
        }
        return DemoAppContent.ToString();
    } catch (Exception ex) {
        return ex.Message;
    }
}

Here, we have used two nuget packages: Microsoft.WindowsAzure.Storage (to read/write files from azure blob) and Newtonsoft.Json (to serialize/deserialize JSON).

So, in the method IndexPageContent(), we are simply making a connection to our Azure storage account -> blob -> Container and then reading the contents from the file specified.

I will be sharing the Github link from where you can download the complete application and change the source code as per your requirements.

Now, we are all set to run our application and see whether we are able to read and modify the contents of our application on the fly or not.

So, let us open two windows side by side,

1. Azure portal, our file indexpagecontent is open in Edit model
   
   
   
   
2. Our application is running on localhost,
   
   
   
   
3. Now, let us update the contents of our JSON file and remove the first line and hit save and refresh our application.
   
   

And we are able to see the difference.

I will be sharing the link of the github repository in the comments section where you can find this complete solution. In case of any issues/doubts, please leave a comment.