Getting Started With Windows Azure In Visual Studio 2015

Background

Windows Azure is the growing collection of integrated cloud services. We can simply create an account (Free Trial) in Windows Azure and after that we can use it for the following: publishing our web project, create a database to use as a sever, protect the data, useful to mobile apps and many more. So, let’s take a look at Windows Azure.

Introduction

In this article, we will learn how to create an ASP.NET Web Application in Visual Studio 2015 and host it in the cloud with the help of Windows Azure.

We’ll create web app in MVC platform and their we will perform some database operations through Enterprise Library. We’ll publish our web app in cloud.

Prerequisites

Before creating the ASP.NET Web Application in Windows Azure you must have the following prerequisites:

  • Visual Studio 2015 or Visual Studio 2013
  • Windows Azure Account

Getting Started

So, let’s begin with the following procedure:

  • Creating Asp.Net Application in MVC
  • Configuring Microsoft Azure Web App
  • Create Database on Windows Azure
  • Configure Web Config
  • Run Application
  • Publish Web Application
  • Perform CRUD Operations

Note: I am using Visual Studio 2015 for creating web application in MVC you can use Visual Studio 2013 also to perform it.

Creating ASP.NET Application in MVC

In this section we will create an ASP.NET Application in the MVC platform in Visual Studio 2015. So, begin with the following steps:

Step 1
Open Visual Studio 2015 and click on “New Project”.

Visual Studio Start Page
                                                      Figure 1: Visual Studio Start Page

Step 2: Select ASP.NET Web Application and enter the name of the application.

Creating New Project in Asp.Net
                                                Figure 2: Creating New Project in Asp.Net

Step 3

In the ASP.Net Wizard, select MVC Project Template for creating the web application.

Selecting MVC Project Template
                                                Figure 3: Selecting MVC Project Template

Now you can see in the next screenshot that your web application is created successfully.

Asp.Net Application
                                                            Figure 4: Asp.Net Application

Configuring Microsoft Azure Web App

We have completed application creation in the previous procedure. Now in the above step you have to select the “Host in the cloud” checkbox in the Microsoft Azure. Let’s begin with the following steps:

Step 1: Now you have to enter the credentials for the Microsoft account.

Signing In Microsoft Account
                                               Figure 5: Signing In Microsoft Account

Step 2 Enter the web application name and other option which depends on your criteria. Leave the Database server option and click OK.

Configuring Web App in Windows Azure
                                          Figure 6: Configuring Web App in Windows Azure

Now you have successfully created web application in MVC project template.

Create Database on Windows Azure

In this section we will create the database on the Windows Azure Portal. We will create the new SQL Database on the Windows Azure with the new SQL Database Server and after creating the server we will use the connection string in the current web application to connect with the database.
Let’s begin with the following procedure:

Step 1: Open the Windows Azure Portal and on the SQL Database section click New.

Creating New SQL Database
                        Figure 7: Creating New SQL Database

Step 2

Now in the next wizard enter the database name, region, login name and password as in the following screenshot:

Creating Database on Azure
                                                Figure 8: Creating Database on Azure

Step 3: In the next step you have to allow your IP Address for your database for performing database operations:

Setting Up Windows Firewall Rules
                                                 Figure 9: Setting Up Windows Firewall Rules

After this step your current IP Address is successfully installed on the Azure Portal. Now you can perform database related operations with the web application.

Configure Web Config

In this section we will update the connection string in the web.config file. Please follow the steps given below:

Step 1: In the SQL Database dashboard, in the Connect your database section, click on the View SQL database connection strings for different medium as in the following screenshot:

Defined Connection String
                                                      Figure 10: Defined Connection String

Step 2: Copy the connection string for ADO.NET as in the following screenshot:

Connection String for Database
                                                Figure 11: Connection String for Database

Step 3: Update your connection string in the web config with the connection string from the Azure. Check out the following code:

  1. <add name="Default Connection" connectionString="Server=Your Server Name;Database=BestCricketers;User ID=Your User ID;Password=Your Password;Trusted_Connection=False;Encrypt=True;MultipleActiveResultSets=True;" providerName="System.Data.SqlClient"/>  
  2. </connectionStrings>   
Run Application

Now in this section, we will run the application and register in the application to verify the connection between web application and SQL database.

Web App Home Page
                                                         Figure 12: Web App Home Page

Now click on the register link and enter the details to register user on the database.

Registering in Web Application
                                                Figure 13: Registering in Web Application

User Login in Web App
                                                         Figure 14: User Login in Web App

In the above screenshot you can see that user can register successfully in the web application.
We can also check out in the Server Explorer that the user data saved successfully in the table. Check out the following screenshot:

SQL Database Verification
                                                   Figure 15: SQL Database Verification

Publish Web Application

In this section we will publish our web application on the Windows Azure portal and perform some operations on the web application. There are some steps in this section to complete this procedure:

Step 1: In the first step, open Solution Explorer, just right click on the solution and click on Publish

Publishing Web App in Azure
                 Figure 16: Publishing Web App in Azure

Step 2:
In this step, validate your connection and check out the destination url and click on the Next button.

Publish Web App on Azure
                                                   Figure 17: Publish Web App on Azure

Step 3: In this step, click on the Publish button

Web Publish Preview
                                                         Figure 18: Web Publish Preview

Now, your web application publishing will get started and you can check out the Output Window when your web app will publish successfully.

Web App Publish Successful
                                              Figure 19: Web App Publish Successful

This will open the web app in the browser automatically with the defined url as in the following screenshot:

Published Web Application
                                                            Figure 20: Published Web Application

Now you can register user here and you can see that the user can register successfully.

Successful registration on published app
                                           Figure 21: Successful registration on published app

Perform CRUD Operations

In this section we will perform CRUD (Create, Read, Update, Delete) operations in the database from the web application. We will perform the database operations with the help of Entity Framework. We can apply entity framework approach like Code First Approach, Database First Approach or Model First Approach to perform CRUD operations in the web app.

Let’s start with the help of Code First Approach. Follow the procedure below:

Step 1: At first we will add the reference of System.Data.Entity as in the following screenshot:

Adding Reference
                                                            Figure 22: Adding Reference

Step 2: Create a class in the Models folder named Cricketer.

Creating Model in Web App
                                                      Figure 23: Creating Model in Web App

Step 3:
Now add the following code to add properties in the class:
  1. namespace BestCricketers.Models  
  2. {  
  3.     public enum CricketerRank  
  4.     {  
  5.         Best,  
  6.         Good,  
  7.         Average          
  8.     }  
  9.     public enum CricketerGrade  
  10.     {  
  11.         A, B, C, D  
  12.     }  
  13.     public class Cricketer  
  14.     {  
  15.         public int ID { getset; }  
  16.         public string Name { getset; }  
  17.         public string Team { getset; }  
  18.         public CricketerRank Rank { getset; }  
  19.         public CricketerGrade Grade { getset; }  
  20.     }  
  21.     public class CricketerDbContext : DbContext  
  22.     {  
  23.         public DbSet<Cricketer> Cricketers { getset; }  
  24.     }  
  25. }  
Note: Add “System.Data.Entity” in the class also.

Step 4: Now add the following code in the Web.Config:
  1. <add name="CricketerDbContext" connectionString="Server=Your Server Name;Database=BestCricketers;User ID=Your User ID;Password=Your Password;Trusted_Connection=False;Encrypt=True;MultipleActiveResultSets=True;" providerName="System.Data.SqlClient"/>  
Step 5: Build your project. Now right click on the Controllers to add “New Scaffolded Item”

Adding New Scaffolded Item
                                                Figure 24: Adding New Scaffolded Item

Step 6: In the next Add Scaffold wizard, select the following option:

Add Scaffold wizard
                                                            Figure 25: Add Scaffold wizard

Step 7: In the next wizard select your Class and DbContext Class as in the following screenshot:

Adding Controller
                                                         Figure 26: Adding Controller

Now it will successfully generate the controller class and as well as the views for the web application. Your Solution Explorer will look like the following:

Solution Explorer
                        Figure 27: Solution Explorer

Step 8: Open Layout page for the web app from “Views/Shared/_Layout.cshtml” and update the code from the following highlighted code:
  1. <html>  
  2. <head>  
  3.     <meta charset="utf-8" />  
  4.     <meta name="viewport" content="width=device-width, initial-scale=1.0">  
  5.     <title>@ViewBag.Title - Best Cricketers</title>  
  6.     @Styles.Render("~/Content/css")  
  7.     @Scripts.Render("~/bundles/modernizr")  
  8.   
  9. </head>  
  10. <body>  
  11.     <div class="navbar navbar-inverse navbar-fixed-top">  
  12.         <div class="container">  
  13.             <div class="navbar-header">  
  14.                 <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">  
  15.                     <span class="icon-bar"></span>  
  16.                     <span class="icon-bar"></span>  
  17.                     <span class="icon-bar"></span>  
  18.                 </button>  
  19.                 @Html.ActionLink("Best Cricketers""Index""Home"new { area = "" }, new { @class = "navbar-brand" })  
  20.             </div>  
  21.             <div class="navbar-collapse collapse">  
  22.                 <ul class="nav navbar-nav">  
  23.                     <li>@Html.ActionLink("Home""Index""Home")</li>  
  24.                     <li>@Html.ActionLink("About""About""Home")</li>  
  25.                     <li>@Html.ActionLink("Contact""Contact""Home")</li>  
  26.                     <li>@Html.ActionLink("Cricketers""Index""Cricketers")</li>  
  27.                 </ul>  
  28.                 @Html.Partial("_LoginPartial")  
  29.             </div>  
  30.         </div>  
  31.     </div>  
  32.     <div class="container body-content">  
  33.         @RenderBody()  
  34.         <hr />  
  35.         <footer>  
  36.             <p>© @DateTime.Now.Year - Cricketer Application</p>  
  37.         </footer>  
  38.     </div>  
  39.   
  40.     @Scripts.Render("~/bundles/jquery")  
  41.     @Scripts.Render("~/bundles/bootstrap")  
  42.     @RenderSection("scripts", required: false)  
  43. </body>  
  44. </html>  
Now run the application and perform some database operations with the help of following steps:

Step 1: Click on the Cricketers link

Web App Default Page
                                                      Figure 28: Web App Default Page

Step 2: In this step we will create some data as follows:

Create Operation
                                                         Figure 29: Create Operation

Note: We can perform the above operation on the published web app also.

Step 3: Now we will publish our web application and add change the web publish settings as shown below:

New Web Publish Settings
                                                   Figure 30: New Web Publish Settings

Step 4: Open the Cricketers link in published web app and perform rest operations like

Read Operation

Read Operation
                                                            Figure 31: Read Operation

Step 5: Edit Operation

We can go to edit link to update and save data as in the following screenshot:

Edit Operation
                                                               Figure 32: Edit Operation

Step 6: Delete Operation.

Go to delete link and we can perform delete operation as shown below:

Delete Operation
                                                               Figure 33: Delete Operation

We can also check out in the Server Explorer that all the entries will be saved in the database.

Database on Server Explorer
                                                     Figure 34: Database on Server Explorer

That’s it.

Summary

This article described the Windows Azure Web Application and Windows Azure SQL Database and connect the database and perform the some CRUD operations with the help of Entity Framework Approach. Thanks for reading the article and Stay Updated.