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 A zure 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.

&nb sp; 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.

& nbsp; 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.

< span class="icon-service_pinterest-16x16">

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:< /strong> 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 Controll er
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 follow ing 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>
</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

Fig ure 28: Web App Default Page
Step 2: In this step we will create some data as follows:

Figure 29: Create O peration
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.

Note: If you are facing Database issue, check this link to resolve it. Mostly you will get firewall issue to open the connection with Azure database.

Chandan's UnBlog

Getting Started With Windows Azure In Visual Studio 2015

0 comments :

A Responsive Blogger Website, That Take my blog to the next level.

Sign Up for Email Updates

Getting Started With Windows Azure In Visual Studio 2015

0 comments :