Getting started with Azure API Apps and Azure MVC web App in Azure App Service

In this article, you will learn how to create Azure API Apps and an MVC client deployed in Azure We App. This is going to be a very simple application connecting various components of Azure App services, and to build it we’re going to use Azure API App, Azure Web App, and SQL Server in Azure. A high level architecture of the application can be drawn as shown in the image below:

image

Essentially, in this post we will learn to perform the following tasks:

  • Make a SQL Connection in SQL database in Azure
  • Use the Entity Framework database-first approach to scaffold a CRUD operation
  • Expose the operations in an Azure API App
  • Configure the swagger API and UI for metadata and API testing
  • Publish the Azure API App in Azure App Service
  • Create client side code using swagger metadata API in an ASP.NET MVC Application
  • Use generated client code in MVC application to perform CRUD operations on a table in a SQL database in Azure
  • Publish the ASP.NET MVC application in Azure Web App

On completion of this post, you should have an Azure API App and an MVC-based Azure Web App running live in the Azure Service. As the output of the article, we have Azure API App running at http://schoolapiapp.azurewebsites.net/swagger/ui/index. We’ve also got an MVC-based Azure Web App running on this URL: http://mvcclientazureapiapp.azurewebsites.net/

In this example I am using Visual Studio 2015, however you can use Visual Studio 2013 too. You’ll also need a subscription to Azure, but you can get a free trial. Let’s get started!

Azure API App

Let us start with creating an Azure API App. To set up the development environment, install Azure SDK. You can download Azure SDK for Visual Studio 2015 from here and Azure SDK for Visual Studio 2013 from here. After successful installation you should get the successfully installed dialog box as shown in the image below:

image

Now your development environment is all set to create your first Azure API Apps. Let’s go ahead and create a new project, by selecting New->Project->ASP.NET Web Application. Give a suitable name to your ASP.NET Web Application, and from the template dialog box choose Azure API App as shown in the image below:

image

After successfully creating the project, do the following:

  1. Delete ValuesController from the Controller folder. We don’t need this controller.
  2. Right click on the Models folder and add a new Item.

To add a new item, select ADO.NET Entity Model from the Data tab and give a name to the model. Here, I am leaving it as SchoolModel.

image

In this step, in the Entity Data Model Wizard, select EF Designer from the database option and click on Next as shown in the image below:

image

Let us take a moment here and understand what are we going to do in next step. Here we will be connecting to a School database which is inside the SQL databases in Azure.

image

To connect to a SQL database in Azure, you need to perfom following tasks:

  • Add a client IP to the database server Firewall rule in the Azure portal
  • Provide a database server name in Azure
  • Provide a username and password using SQL Server authentication
  • Select the required database and click on OK

You may want to refer to the images below to provide information to connect to a database in Azure:

Read full article on in Infragistics Blog

Leave a comment

Create a website or blog at WordPress.com