How to create a Microsoft Azure-based MVC application

“Cloud” has been a buzz word for a while now. But what does it mean for you as a developer? For starters, you won’t have to write very different code for the cloud than what you’re already writing for in-premise applications.

Let’s assume that you are already familiar with MVC applications. If that’s true, in this post we’ll focus on demonstrating how building for the cloud is not very much different than any other development. We’ll follow a step by step approach and create an end to end MVC application that is hosted completely in the cloud (both data and application).

Here’s how we’ll get it done:

• 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

Setting up the database in the SQL Azure  

First, we will set up the database in the cloud. We are going to use SQL Azure as the cloud platform, and let’s go ahead and create a School database. To create this in Azure, you have to:

• Login to Microsoft Azure portal
• From the side tab, select SQL DATABASES options
• In the bottom, click on the NEW button

From here, you’ll get the option to create a new database. To create one, you need to provide the following information:

• Name of the database. Here we’re going to work with the Microsoft-provided School database, so make sure that you give “School” as the name of the database.
• Choose the Azure subscription in which database will be created.
• You can choose either an existing server or create a new database server. To create a new database server, you’ll have to provide information like region, login name and password.

Once you click on the CREATE SQL DATABASE option, the School database and a new database server will get created. After successful database creation, you need to configure firewall rules for the database server such that you can connect the local development machine to the SQL Azure database server. To configure the firewall rules, click on Set up Windows Azure firewall rules for this IP address.

Here you’ll be prompted with the information that the current IP address is not added in the existing firewall rules. Click on Yes to add that current IP address to the existing firewall rules of the database server.

Next we will connect the newly created cloud database from the SQL Server management studio so that we can run scripts to create tables with the data. To do that, you’ll need to launch SSMS and provide the following information:

• The name of the SQL Azure database server. You can find database server name in the portal.
• Choose authentication as SQL Server authentication
• User name and password

After successful connection to the SQL Azure database server, you will able to view the connection in the SSMS as shown below:

We are going to use the Microsoft-provided School database to create the tables and data. We already have the school database created from provided script in the local database server, so next we will have to create the script which can run on the SQL Azure database server. To create this, right click on the database and then select Tasks and then Generate Scripts.  In the generate script window, select Script entire database and all database objects.

On the next screen, click on the Advanced option.

In Advanced window, change the following values:

Types of data to script: Schema and data

Script for database engine type:  SQL Azure database

Select the option to save to new query window and click on Next. You will find that the generated script is created and opened in the new query window inside the SSMS.  Select the SQL Azure database connection and run the script.  You will find that tables along with the data has been created in the School database residing on the SQL Azure database server.

We have created the School database which is in the cloud. In the next section, we will use the cloud database to create a MVC application.

Creating the MVC application

In this section we will create and set up the MVC application to be published in the Azure Web Site. You can do so by choosing MVC template.

We don’t want any authentication for this application. To configure this click on the Change Authentication option, and in the dialog box select No Authentication as shown below:

We want to host the application in the cloud. To be precise, the application will be hosted in the Azure Web Site. To configure that, select the Host in the cloud check box, and from the drop down, choose Web Site.

Next you will be asked to authenticate your account.  Authenticate yourself by providing the user name and the password.

On the next screen you need to configure:

• A site name. This name will be used as URL to access the application when hosted in the azure server.
• Region: the Azure server region in which the application will be hosted.
• A database server. In this example we’ll select the same database server in which the School database resides.
• A password to connect to the database server.

After successful authentication with the Azure service and the database server, you will see a message in Visual Studio that the application is ready.

Building the application

As of now we have set up the database and created the MVC application to be hosted in the Azure web site. Now let’s go ahead and build the application.

Adding the data model

We will start with creating the data model using the School database hosted in the SQL Azure. We will use ADO.NET Entity Data Model to create the model. To create the model in the MVC project, create a folder named Infrastructure. Right click on the infrastructure folder, and select Add New Item. In the Add New Item dialog box, select ADO.NET Entity Data Model from the Data tab and name it SchoolModel.

On the next screen, select the EF designer from database option.

Click on New Connection, and in the new connection dialog box, provide the following information:

• SQL Azure data base server name. We created this server in the previous section
• Select SQL Server Authentication option
• Provide the SQL Azure database server user name and the password
• Select the School database from the drop down

In the next dialog box, select the Yes option, include the sensitive data in the Connection string, and leave the default name for the connection string.

We are going to work with the Person table. So click on the Person check box and leave the other checkboxes to default.

By clicking on Finish, the data model will be created as shown below:

We have successfully created and added a data model in the MVC application. Keep in mind that SchoolModel is now connected to the cloud database in the SQL Azure.

Adding Controller with read and write operation

Next we’ll add a controller with views, using the Entity framework. We will use MVC scaffolding to create views to perform CRUD operations on the Person table. To add a controller, right click on the Controller folder and select MVC 5 Controller with views, using Entity Framework option as shown below:

In the next dialog box, we need to choose the model and the context class. Here we will choose Person as the model class and SchoolEntities as the DataContext class. To create the views corrosponding to the database operation, make sure that the other check boxes are checked.

With this step, we have created the controller and views for the CRUD operations on the person table. In the solution explorer, you should have the following files:

At this point, if you go ahead and run the application, you will get data from the person table which resides in the SQL Azure is listed. You can also create new data, edit and delete data.

Making your application more immersive

In this example, we don’t need Home, About and Contact View. Also, let’s say we want a list of people on the base URL of the application.

Let us start by removing the Home controller and deleting the Home subfolder in the View folder and in the layout.cshtml file comment the div with the class navbar-header. Once the home controller and view is deleted, next open RouteConfig.cs from App_Start folder and change the default controller to School in the route as shown below:

We are now done with creating the application. Press F5 to run and test the application locally. You should able to see the application running as shown below:

Publishing the application

To publish the app, right click on the project and click on publish. In the connection dialog box, validate the values and click on next.

In the settings dialog box, for the database, select the SchoolEntities connection string and click on next.

Finally, click on publish to publish the application in the Azure web site.

If you run into any errors, you can open the management portal and for the database server verify that Windows Azure Services option is set to yes or not in the Allowed Services. It should be set to Yes as shown below:

Conclusion

Now you should be able to perform CRUD operation from MVC application hosted in Azure web site and accessing the database hosted in SQL Azure. In this post we learned about:

• Creating database in the SQL Azure
• Migrating data from local database server to the SQL Azure database server
• Using data from cloud in a MVC application using the entity framework
• Host MVC application in the Azure web site
• Publish the application to Azure web site.

Hopefully you found this article is useful – thanks for reading and happy coding!