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”.


                                                      Figure 1: Visual Studio Start Page

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


                                                Figure 2: Creating New Project in Asp.Net

Step 3

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


                                                Figure 3: Selecting MVC Project Template

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


                                                            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.


                                               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.


                                          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.


                        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:


                                                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:


                                                 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:


                                                      Figure 10: Defined Connection String

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


                                                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:

<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"/>
</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.


                                                         Figure 12: Web App Home Page

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


                                                Figure 13: Registering in Web Application


                                                         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:


                                                   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


                 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.


                                                   Figure 17: Publish Web App on Azure

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


                                                         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.


                                              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:


                                                            Figure 20: Published Web Application

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


                                           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:


                                                            Figure 22: Adding Reference

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


                                                      Figure 23: Creating Model in Web App

Step 3: Now add the following code to add properties in the class:

namespace BestCricketers.Models
{
    public enum CricketerRank
    {
        Best,
        Good,
        Average
    }
    public enum CricketerGrade
    {
        A, B, C, D
    }
    public class Cricketer
    {
        public int ID { get; set; }
        public string Name { get; set; }
        public string Team { get; set; }
        public CricketerRank Rank { get; set; }
        public CricketerGrade Grade { get; set; }
    }
    public class CricketerDbContext : DbContext
    {
        public DbSet<Cricketer> Cricketers { get; set; }
    }
}

Note: Add “System.Data.Entity” in the class also.

Step 4: Now add the following code in the Web.Config:

<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”


                                                Figure 24: Adding New Scaffolded Item

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


                                                            Figure 25: Add Scaffold wizard

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


                                                         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:


                        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:

<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@ViewBag.Title - Best Cricketers</title>
    @Styles.Render("~/Content/css")
    @Scripts.Render("~/bundles/modernizr")

</head>
<body>
    <div class="navbar navbar-inverse navbar-fixed-top">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                @Html.ActionLink("Best Cricketers", "Index", "Home", new { area = "" }, new { @class = "navbar-brand" })
            </div>
            <div class="navbar-collapse collapse">
                <ul class="nav navbar-nav">
                    <li>@Html.ActionLink("Home", "Index", "Home")</li>
                    <li>@Html.ActionLink("About", "About", "Home")</li>
                    <li>@Html.ActionLink("Contact", "Contact", "Home")</li>
                    <li>@Html.ActionLink("Cricketers", "Index", "Cricketers")</li>
                </ul>
                @Html.Partial("_LoginPartial")
            </div>
        </div>
    </div>
    <div class="container body-content">
        @RenderBody()
        <hr />
        <footer>
            <p>© @DateTime.Now.Year - Cricketer Application</p>
        </footer>
    </div>

    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/bootstrap")
    @RenderSection("scripts", required: false)
</body>
</html>

Now run the application and perform some database operations with the help of following steps:

Step 1: Click on the Cricketers link


                                                      Figure 28: Web App Default Page

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


                                                         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:


                                                   Figure 30: New Web Publish Settings

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

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:


                                                               Figure 32: Edit Operation

Step 6: Delete Operation.

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


                                                               Figure 33: Delete Operation

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


                                                     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.