Creating a photo album for ASP.NET MVC 5 Users using Azure BLOB storage

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.

image

Architecture of the Application

The High-level architecture of the application can be drawn as shown in the image below:

image

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:

Read full article on the Infragistics Blog

Getting started with Azure API Apps and Azure MVC web App in Azure App Service

In this article, you will learn how to create Azure API Apps and an MVC client deployed in Azure We App. This is going to be a very simple application connecting various components of Azure App services, and to build it we’re going to use Azure API App, Azure Web App, and SQL Server in Azure. A high level architecture of the application can be drawn as shown in the image below:

image

Essentially, in this post we will learn to perform the following tasks:

  • Make a SQL Connection in SQL database in Azure
  • Use the Entity Framework database-first approach to scaffold a CRUD operation
  • Expose the operations in an Azure API App
  • Configure the swagger API and UI for metadata and API testing
  • Publish the Azure API App in Azure App Service
  • Create client side code using swagger metadata API in an ASP.NET MVC Application
  • Use generated client code in MVC application to perform CRUD operations on a table in a SQL database in Azure
  • Publish the ASP.NET MVC application in Azure Web App

On completion of this post, you should have an Azure API App and an MVC-based Azure Web App running live in the Azure Service. As the output of the article, we have Azure API App running at http://schoolapiapp.azurewebsites.net/swagger/ui/index. We’ve also got an MVC-based Azure Web App running on this URL: http://mvcclientazureapiapp.azurewebsites.net/

In this example I am using Visual Studio 2015, however you can use Visual Studio 2013 too. You’ll also need a subscription to Azure, but you can get a free trial. Let’s get started!

Azure API App

Let us start with creating an Azure API App. To set up the development environment, install Azure SDK. You can download Azure SDK for Visual Studio 2015 from here and Azure SDK for Visual Studio 2013 from here. After successful installation you should get the successfully installed dialog box as shown in the image below:

image

Now your development environment is all set to create your first Azure API Apps. Let’s go ahead and create a new project, by selecting New->Project->ASP.NET Web Application. Give a suitable name to your ASP.NET Web Application, and from the template dialog box choose Azure API App as shown in the image below:

image

After successfully creating the project, do the following:

  1. Delete ValuesController from the Controller folder. We don’t need this controller.
  2. Right click on the Models folder and add a new Item.

To add a new item, select ADO.NET Entity Model from the Data tab and give a name to the model. Here, I am leaving it as SchoolModel.

image

In this step, in the Entity Data Model Wizard, select EF Designer from the database option and click on Next as shown in the image below:

image

Let us take a moment here and understand what are we going to do in next step. Here we will be connecting to a School database which is inside the SQL databases in Azure.

image

To connect to a SQL database in Azure, you need to perfom following tasks:

  • Add a client IP to the database server Firewall rule in the Azure portal
  • Provide a database server name in Azure
  • Provide a username and password using SQL Server authentication
  • Select the required database and click on OK

You may want to refer to the images below to provide information to connect to a database in Azure:

Read full article on in Infragistics Blog

Hindi Video : Create Azure based ASP.NET MVC application in 30 minutes

 

Subscribe here to YouTube channel for all episodes

image

Cloud has been a buzz word for a while now. As a developer, we focus on converting the customer requirements to the code and sometimes find ourselves behind with the industry buzz words. The cloud is everywhere and perhaps the future. However as a developer, you won’t have to write very different code for cloud than codes you have been writing for the in-premise applications. In this post, I assume that you are already aware about MVC applications, hence I will focus on demonstrating how building for cloud is not very much different. I will follow step by step approach and create end to end MVC application completely hosted in the cloud (data and application both).

In this article, we will follow the following steps,

  • Setting up the database in the SQL Azure
  • Creating the MVC application
  • Building the application using MVC and the Entity framework
  • Publishing the application to Azure web site

Read full article on Infragistics blog

Subscribe here to YouTube channel for all episodes

 

 

 

 

 

Read article based on this video here

Subscribe here to YouTube channel for all episodes

I hope you like this video. Do not hesitate to leave comment or any feedback. Happy coding.

How to create a Container in Azure Storage from MVC application

I am working on a MVC application in which I need to work with Microsoft Azure storage .I had a requirement to create An Azure storage container from the MVC application. In this post I will share my learning that how I created a container programmatically.

I created the view as shown in below image. User has to enter the azure storage account name, azure storage key and the name of the container to be created.

image

Above View is MVC razor view, and it is created using the cshtml as shown below:

 


@{
    ViewBag.Title = "BLOB Manager";
}
<div class="jumbotron">
    <div class="row">
        <div class="col-md-8">
            <section id="loginForm">
                @using (Html.BeginForm("AzureInfo", "Manage", new { ReturnUrl = ViewBag.ReturnUrl }, FormMethod.Post, new { @class = "form-horizontal", role = "form" }))
                {
                    @Html.AntiForgeryToken()
                    <h2> Manage BLOB Container</h2>
                    <hr />
                    @Html.ValidationSummary(true, "", new { @class = "text-danger" })
                    <div class="form-group">
                        <div class="col-md-10 input-group input-group-lg">
                            @Html.TextBox("AccountName", "", new { @class = "form-control", @placeholder = "Account Name" })
                            @Html.ValidationMessage("AccountName", "", new { @class = "text-danger" })
                        </div>
                    </div>
                    <div class="form-group">

                        <div class="col-md-10 input-group input-group-lg">
                            @Html.TextBox("AccountKey", "", new { @class = "form-control", @placeholder = "Account Key" })
                            @Html.ValidationMessage("AccountKey", "", new { @class = "text-danger" })
                        </div>
                    </div>
                    <div class="form-group">

                        <div class="col-md-10 input-group input-group-lg">
                            @Html.TextBox("ContainerName", "", new { @class = "form-control", @placeholder = "Container Name" })
                            @Html.ValidationMessage("containername", "", new { @class = "text-danger" })
                        </div>
                    </div>
                    <div class="form-group input-group input-group-lg">
                        <div class="col-md-offset-2 col-md-10">
                            <input type="submit" value="Create Container" class="btn btn-lg btn-success" />
                        </div>
                    </div>

                }
            </section>
        </div>
    </div>
</div>

Above I am creating,

  • Three text boxes with the placeholder and the class set to bootstrap form-control
  • A submit button with the class set to bootstrap btn-lg and btn-success
  • All the controls are inside the form.
  • On form post operation, AzureInfo action of the Manage controller will be called.

Once the View is ready, let us go ahead and create an azure utility class. In this class we will put all the operations related to the azure storage. But before that you need to add Azure storage library to the project. Either you can use NuGet package manager or console to add the library. I am using console to install Azure storage library. I have taken the 4.3 version because at the time of writing this post, this was the latest stable version available.

image

Once package is successfully installed, add following namespaces.

 


using Microsoft.WindowsAzure.Storage;
using Microsoft.WindowsAzure.Storage.Auth;
using Microsoft.WindowsAzure.Storage.Blob;
using Microsoft.WindowsAzure;

To create the container in the Azure storage, I have created a function CreateContainer. This function takes three input parameters, account name, account key and the container name.

 


public static class AzureUtility
    {
        public static string  CreateContainer(string AccountName, string AccountKey, string ContainerName)
        {

            string UserConnectionString = string.Format("DefaultEndpointsProtocol=https;AccountName={0};AccountKey={1}", AccountName, AccountKey);
            CloudStorageAccount storageAccount = CloudStorageAccount.Parse(UserConnectionString);
            CloudBlobClient blobClient = storageAccount.CreateCloudBlobClient();
            CloudBlobContainer container = blobClient.GetContainerReference(ContainerName.ToLower());
            if (container.CreateIfNotExists())
            {
                container.SetPermissions(new BlobContainerPermissions { PublicAccess = BlobContainerPublicAccessType.Blob });
                return container.Name;
            }
            else
            {
                return string.Empty;
            }
        }
    }

Now let us examine the above code line by line.

  • In first line I created the connection string for the azure storage. It takes two parameters, account name and the account key. These values are passed as input parameter to the function. I am using these two parameter to create connection string.
  • Using CloudStorageAccount to parse the connection string from the constructed string.
  • Creating the CloudBlobClient
  • Getting the container reference of the BLOB.
  • If container reference does not exist, creating new container.
  • On successful creation of the container function returns name of the container else empty string.

 


[HttpPost]
        public ActionResult AzureInfo(string AccountName, string AccountKey, string ContainerName)
        {

           var result= AzureUtility.CreateContainer(AccountName, AccountKey, ContainerName);

           if (result != string.Empty)
             {

                 return RedirectToAction("Index", "Home");
             }
             else
             {
                 return RedirectToAction("Index");
             }
        }

In the action we are using the utility class to create the container. In this way an azure container can be created from the MVC application.

I hope it is useful. Thanks for reading. Happy Coding.

What is Azure DocumentDB

Read full article on Falafel blog here

Recently I attended Cloud Camp by Microsoft India in Delhi. I had good time learning at the event. Besides other Microsoft Azure services like Azure Websites, Azure Mobile Services and Azure DocumentDB impressed me lot. In this post, I am sharing first level learning on Azure DocumentDB.

Azure DocumentDB is a NoSQL document database service offering on cloud from Microsoft. It allows us to work with schema free JSON documents using JavaScript and the HTTP protocol. It is a fully managed JSON document database service.

Some of the important points about the DocumentDB is as follows:

  • It is a schema free database
  • It has support of rich query and transaction processing
  • It uses JavaScript for the query
  • It works with JSON based data model
  • It works on HTTP protocol

Read full article on Falafel blog here