Azure Cloud Service with ASP.NET MVC and WCF

Contents

• Introduction
• How to create a server in Azure Cloud ?
• How to configure a server to allow a range of IP Address ?
• How to create a database in Azure Cloud ?
• Connect to Azure cloud server using Visual Studio
• How to create Azure cloud service?
• Create WCF Service to access SQL Azure database

Introduction

This tip shows how to create an Azure Cloud Service with ASP.NET MVC and WCF by using Visual Studio 2013 or Visual Studio 2013 for Web Express. The tip assumes that you have knowledge of ASP.NET MVC and WCF. Also, you have an Azure account. On completing the tip, you'll have a simple Cloud based application up and running in the cloud.

The following illustration shows the flow of the application we are going to use.

The above figure shows that we have three projects in our solution.

• MCV App (Web Role)
• WCF Service (Web Role)
• Azure Cloud (Cloud Service)

Web roles in Windows Azure are provided with a dedicated Internet Information Services (IIS) web-server used for hosting front-end web applications. You can quickly and easily deploy web applications to Web Roles.

Here, the architecture describes that Client request is hitting the MVC App which is UI. This MVC App (UI) communicates with WCF Services which have all the data we need in our application. WCF Service is getting data from SQL Azure.

Prerequisites

To get started, you must have the following installed:

1. Visual Studio 2013 with update 4
2. Azure SDK 2.5
3. ASP.NET MVC 4

Note: You must have an Azure account credited with some amount.

How to Create a Server in Azure Cloud?

To start working on this, you should have an Azure account with some credited amount. In Azure Portal, we will create our database, i.e., SQL Azure Db. We will use that database in our application.

Step 1

Login to your Azure account. Go to SQL database and select Server option, at the bottom there is one "Add" option. This Add option will create one new server.

Steps

1. Select SQL database.
2. Go to Servers tab, click on that.
3. At the bottom, click on Add.

Following is the snapshot that describes the steps to create a server in Azure.

Step 2

After clicking on Add Option, it will ask you to enter server settings. Here, it will ask you to fill the Login Name and Password. We will use this credential in our project to connect with this server, so don't forget your credentials. Below is the snapshot of SQL Server database settings.

Steps

1. Enter Login Name.
2. Enter Password and Confirm Password.
3. Select your region.
4. Click on Tick Mark at bottom right corner.

The above steps will create a new server.

Below is the snapshot of your newly created server.

In the above snapshot, the red square box is indicating the newly created server. We will create our database in this server which we are going to use in our application.

Before that, we need to configure this server to allow an IP range to access it.

How to Configure a Server to Allow a Range of IP Address?

Steps

1. Click on your server name. It will open a new window.
2. In new window, enter Rule Name (of your choice).
3. Enter Start IP Address and End IP Address. Entered IP range will be allowed to access this server.
4. Click on save button.

The following snapshot shows the configuration of IP Address in a server.

After creating and configuring server, we need to create a database for our application.

How to Create a Database in Azure Cloud?

Step 1

In the above steps, we already have a ready server. We will create a database in that server.

Steps

1. Click on the newly created server. It will open one new window.
2. On the window, click on "Create Database" option.
3. It will pop up one database setting wizard, enter the name of your database. Here, I have taken "EmployeeCldDb" as my database name.
4. After entering all the entries, click on tick mark.

After clicking on tick mark, you will have a newly created database. Here, it is "EmployeeCldDb".

Below is the snapshot of your created database. The red square box shows the name of our database.

We have successfully created our database. Click on the name of your database. It will open a window, here you will have your server name. After clicking on database name, you will find the below window.

The red square box shows the name of your server. Copy Paste this server in Notepad, it will be used to connect with this server.

Now go to your Visual Studio to add the connection of this server.

Connect to Azure Cloud Server using Visual Studio

To add the connection of Azure Cloud Server, follow the below mentioned steps:

Steps

1. Open Visual Studio in administrative mode.
2. Go to server explorer.
3. Right click on Add Connection. It will open an Add Connection wizard.
4. Enter the server name.
5. Choose SQL Server Authentication.
6. Enter User Name and Password.
7. Select your database. In my case, it is "EmployeeCldDb".
8. Click on Test Connection. If it is successful, click on OK.

Note: These are the credentials you have entered while creating the Azure cloud Server.

After connecting with the server, create a table. Here it is "Employee". Fill up with some records.

The above snapshot illustrates that we have connected to the server and also created a table "Employee" and entered some records. Now it's time to create Azure Cloud service.

How to Create Azure Cloud Service

Step 1

To create Azure cloud service using Visual Studio, see the following steps:

Steps

1. In your Visual Studio, Go to File-> New Project.
2. Navigate to Installed->Templates->Visual C#.
3. Select Cloud.
4. Select Azure Cloud Service.
5. Enter the name of your project and click OK.

The following snapshot illustrates the above steps:

After clicking on OK button, it will open a wizard to add Web Role to your project.

Step 2

To add web role to your project, do the following steps. Here for our application, we need to add two Web roles, i.e., MVC Web Role and WCF Web Role.

Steps

1. Select "ASP.NET Web Role".
2. Name it something your choice, Here it is "Nit.UI".
3. Select "WCF Service Web Role".
4. Name it something of your choice, Here it is "Nit.Service".
5. Click on OK button.

   Following is the snapshot that describes the above steps to create a Web role in your application.

   

   After this, you will get a wizard to be prompting to add ASP.NET Project, i.e., for Nit.UI.

6. Select MVC and Click Ok.

Now your project creation part is completed. You will find three projects in your solution.

Here it is:

1. "AzCldSvc.Service" is the main project, i.e., Azure Cloud Service. This project keeps the record of the remaining project. It manages the project and hosts it in the cloud.
2. "Nit.Ui" is the MVC project with which Client will interact.
3. "Nit.Service" is the WCF project that retrieves data from SQL Azure.

Create WCF Service to Access SQL Azure Database

Following are the steps to create WCF service.

Steps

1. Right click on WCF project.
2. Select Add-> New Item.
3. Click on New Item.
4. Select WCF Service, enter the name (here it is Employee.svc).
5. Click on Add button.

The below snapshot illustrates the above points of WCF Service creation steps.

The above steps will create two files in WCF Project. Here, it is Employee.svc and IEmployee.cs.

Now, we have to give access of the database to this WCF project. Do the following steps to do so.

Steps

1. Right click on WCF project.
2. Select Add-> New Item.
3. Click on ADO.NET Entity Data model.
4. Enter any name for your model. Here, it is "EmployeeModel".
5. Click on Ok.

It will open an Entity Data Model Wizard. Do the following steps:

1. Select EF Designer from database.
2. Click on Next.
3. Click on Connection and Select your Connection from Dropdown Menu.
4. Enter the name of our connection string and click on Next.
5. From the wizard, chose your table name.
6. Enter namespace, click on Finish.
7. Build the project.

Open IEmployee.cs file and add the following code inside your IEmployee interface.

IEmployee.cs

public interface IEmployee
{
 [OperationContract]
 List<Employee> GetEmps(); 
}

Open Employee.svc file by double clicking on that. Click on Employee.svc.cs. Now write the following code in this file.

Employee.svc.cs

public class Employee:IEmployee
{
   public List<Employee> GetEmps()
     {
      EmployeeEntites objContext = new EmployeeEntites();
      var empData = from emp in objContext.Employees
                               select emp;
     return empData.ToList()
     }
}

Build WCF Project.

Add Service reference to the MVC project.

To add service reference, do the following steps:

1. Go to your MVC Project.
2. Right click on References folder.
3. Select Add Service Reference->Select your service.
4. Enter namespace for the service reference.
5. Click on OK.

Add a controller to the MVC Project.

To add controller, do the following steps:

1. Go to Controller folder.
2. Right click on Controller folder.
3. Select Empty Controller.
4. Give any name. Here I have taken "Display".

Open DisplayController.cs and write the following code inside your Index method.

public Action Result Index()
{
 ServiceReference1.IEmployeesvcClient obj = new  ServiceReference1.IEmployeesvcClient();
 return view(obj.GetEmps());
}

Save it and right click inside this method, Select-> Add View->Select List from dropdown->select model class->click on Add.

Build the solution and run it. Enter proper URL to get Employee data.