{"id":605,"date":"2016-01-11T06:12:00","date_gmt":"2016-01-11T06:12:00","guid":{"rendered":"https:\/\/staging.infragistics.com\/blogs\/?p=605"},"modified":"2025-02-25T14:26:49","modified_gmt":"2025-02-25T14:26:49","slug":"azure-api-apps","status":"publish","type":"post","link":"https:\/\/www.infragistics.com\/blogs\/azure-api-apps","title":{"rendered":"Azure API Apps and Azure Mvc Web App in Azure App Service"},"content":{"rendered":"\n<p>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\u2019re going to use Azure API App, Azure Web App, and SQL Server in Azure.<\/p>\n\n\n\n<p>A high level architecture of the application can be drawn as shown in the image below:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"\/community\/cfs-filesystemfile.ashx\/__key\/CommunityServer.Blogs.Components.WeblogFiles\/dhananjay_5F00_kumar.AZUREAPIAPP\/0044.pic1.png\" alt=\" A high level architecture of the application can be drawn as shown in the image below\" title=\"A high level architecture of the application can be drawn as shown in the image below\"\/><\/figure>\n\n\n\n<p>Essentially, in this post we will learn to perform the following tasks:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Make a SQL Connection in SQL database in Azure<\/li>\n\n\n\n<li>Use the Entity Framework database-first approach to scaffold a CRUD operation<\/li>\n\n\n\n<li>Expose the operations in an Azure API App<\/li>\n\n\n\n<li>Configure the swagger API and UI for metadata and API testing<\/li>\n\n\n\n<li>Publish the Azure API App in Azure App Service<\/li>\n\n\n\n<li>Create client side code using swagger metadata API in an ASP.NET MVC Application<\/li>\n\n\n\n<li>Use generated client code in MVC application to perform CRUD operations on a table in a SQL database in Azure<\/li>\n\n\n\n<li>Publish the ASP.NET MVC application in Azure Web App<\/li>\n<\/ul>\n\n\n\n<p>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 <a href=\"http:\/\/schoolapiapp.azurewebsites.net\/swagger\/ui\/index\" rel=\"noopener\">http:\/\/schoolapiapp.azurewebsites.net\/swagger\/ui\/index<\/a>. We\u2019ve also got an MVC-based Azure Web App running on this URL: <a href=\"http:\/\/mvcclientazureapiapp.azurewebsites.net\/\" rel=\"noopener\">http:\/\/mvcclientazureapiapp.azurewebsites.net\/<\/a><\/p>\n\n\n\n<p>In this example I am using Visual Studio 2015, however you can use Visual Studio 2013 too. You\u2019ll also need a subscription to Azure, but you can get a free trial. Let\u2019s get started!<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" class=\"wp-block-heading\" id=\"azure-api-app\">Azure API App<\/h2>\n\n\n\n<p>Let us start with creating an Azure API App. To set up the development environment, install Azure SDK. You can download <a href=\"http:\/\/go.microsoft.com\/fwlink\/?linkid=518003\" rel=\"noopener\">Azure SDK for Visual Studio 2015 from here<\/a> and <a href=\"http:\/\/go.microsoft.com\/fwlink\/?LinkID=324322\" rel=\"noopener\">Azure SDK for Visual Studio 2013 from here<\/a>. &nbsp;After successful installation you should get the successfully installed dialog box as shown in the image below:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"\/community\/cfs-filesystemfile.ashx\/__key\/CommunityServer.Blogs.Components.WeblogFiles\/dhananjay_5F00_kumar.AZUREAPIAPP\/6330.pic2.png\" alt=\" After successful installation you should get the successfully installed dialog box as shown in the image\" title=\"After successful installation you should get the successfully installed dialog box as shown in the image\"\/><\/figure>\n\n\n\n<p>Now your development environment is all set to create your first Azure API Apps. Let\u2019s go ahead and create a new project, by selecting New-&gt;Project-&gt;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:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"\/community\/cfs-filesystemfile.ashx\/__key\/CommunityServer.Blogs.Components.WeblogFiles\/dhananjay_5F00_kumar.AZUREAPIAPP\/7217.pic3.png\" alt=\" ASP.NET Web Application, and from the template dialog box choose Azure API App as shown in the image \" title=\"ASP.NET Web Application, and from the template dialog box choose Azure API App as shown in the image \"\/><\/figure>\n\n\n\n<p>After successfully creating the project, do the following:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Delete ValuesController from the Controller folder. We don\u2019t need this controller.<\/li>\n\n\n\n<li>Right click on the Models folder and add a new Item.<\/li>\n<\/ol>\n\n\n\n<p>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.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"\/community\/cfs-filesystemfile.ashx\/__key\/CommunityServer.Blogs.Components.WeblogFiles\/dhananjay_5F00_kumar.AZUREAPIAPP\/4061.pic4.png\" alt=\" select ADO.NET Entity Model from the Data tab and give a name to the model. Here, I am leaving it as SchoolModel\" title=\"select ADO.NET Entity Model from the Data tab and give a name to the model. Here, I am leaving it as SchoolModel\"\/><\/figure>\n\n\n\n<p>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:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"\/community\/cfs-filesystemfile.ashx\/__key\/CommunityServer.Blogs.Components.WeblogFiles\/dhananjay_5F00_kumar.AZUREAPIAPP\/2112.pic5.png\" alt=\" in the Entity Data Model Wizard, select EF Designer from the database option and click on Next as shown in the image\" title=\"in the Entity Data Model Wizard, select EF Designer from the database option and click on Next as shown in the image\"\/><\/figure>\n\n\n\n<p>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.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"\/community\/cfs-filesystemfile.ashx\/__key\/CommunityServer.Blogs.Components.WeblogFiles\/dhananjay_5F00_kumar.AZUREAPIAPP\/2311.pic6.png\" alt=\" Here we will be connecting to a School database which is inside the SQL databases in Azure\" title=\"Here we will be connecting to a School database which is inside the SQL databases in Azure\"\/><\/figure>\n\n\n\n<p>&nbsp;To connect to a SQL database in Azure, you need to perfom following tasks:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Add a client IP to the database server Firewall rule in the Azure portal<\/li>\n\n\n\n<li>Provide a database server name in Azure<\/li>\n\n\n\n<li>Provide a username and password using SQL Server authentication<\/li>\n\n\n\n<li>Select the required database and click on OK<\/li>\n<\/ul>\n\n\n\n<p>You may want to refer to the images below to provide information to connect to a database in Azure:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"\/community\/cfs-filesystemfile.ashx\/__key\/CommunityServer.Blogs.Components.WeblogFiles\/dhananjay_5F00_kumar.AZUREAPIAPP\/0020.pic7.png\" alt=\" You may want to refer to the images below to provide information to connect to a database in Azure\" title=\"You may want to refer to the images below to provide information to connect to a database in Azure\"\/><\/figure>\n\n\n\n<p>Since we have provided vital information such as username and password to connect to Azure database server, the Entity DataModel Wiazrd asks us whether we want to include sensitive data in the connection string or not. Here we\u2019ll select the Yes radio button and click on Next. Also, if you desire you may want to change the connectionstring name, but in this example I am leaving it as the default.<\/p>\n\n\n\n<p>Now we need to select the entities to work with. To keep it simple, I am selecting the simplest table in the School database (and by \u201csimple\u201d, I mean the table with no relationship to any other tables). So I am going to select Department table to proceed in this example. As shown in the image below, to select the Department table, check the checkbox of Department and leave the other fields as default.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"\/community\/cfs-filesystemfile.ashx\/__key\/CommunityServer.Blogs.Components.WeblogFiles\/dhananjay_5F00_kumar.AZUREAPIAPP\/4064.pic8.png\" alt=\" shown in the image below, to select the Department table, check the checkbox of Department and leave the other fields as default\" title=\"shown in the image below, to select the Department table, check the checkbox of Department and leave the other fields as default\"\/><\/figure>\n\n\n\n<p>Next, to create the datamodel, click on Finish and we\u2019ve added the model. Using this model, we will create the Azure API. You can verify the created SchoolModel in the Solution Explorer as shown in the image below:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"\/community\/cfs-filesystemfile.ashx\/__key\/CommunityServer.Blogs.Components.WeblogFiles\/dhananjay_5F00_kumar.AZUREAPIAPP\/5327.pic9.png\" alt=\" verify the created SchoolModel in the Solution Explorer as shown in the image\" title=\"verify the created SchoolModel in the Solution Explorer as shown in the image\"\/><\/figure>\n\n\n\n<p>As of now we have added the model. Make sure you have sucessfuly built the project at this stage, and then let\u2019s create a controller. Right click on the Controllers folder and from contextmeny, select Add-&gt;Controller.&nbsp; In the scaffolding option, select Web API 2 Controller with actions, using Entity Framework as shown in the image below:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"\/community\/cfs-filesystemfile.ashx\/__key\/CommunityServer.Blogs.Components.WeblogFiles\/dhananjay_5F00_kumar.AZUREAPIAPP\/8831.pic10.png\" alt=\" In the scaffolding option, select Web API 2 Controller with actions, using Entity Framework as shown in the image\" title=\"In the scaffolding option, select Web API 2 Controller with actions, using Entity Framework as shown in the image\"\/><\/figure>\n\n\n\n<p>To add the controller using the scaffolding, you need to select the following options:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Model class: Choose Department from the dropdown<\/li>\n\n\n\n<li>Data context class: Choose SchoolEntities from the dropdown<\/li>\n\n\n\n<li>Either give your desired controller name or leave the suggested name which is based on the model class.<\/li>\n<\/ol>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"\/community\/cfs-filesystemfile.ashx\/__key\/CommunityServer.Blogs.Components.WeblogFiles\/dhananjay_5F00_kumar.AZUREAPIAPP\/2845.pic11.png\" alt=\"  add the controller using the scaffolding, you need to select the following options\" title=\" add the controller using the scaffolding, you need to select the following options\"\/><\/figure>\n\n\n\n<p>On clicking Add, the DepartmentsController would be added to the project. Essentially, we have created web API to perform CRUD operations on the Department table. In the next step, we have to enable the Swagger Metadata and UI.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" class=\"wp-block-heading\" id=\"enabling-swagger-metadata-and-ui\">Enabling Swagger Metadata and UI <\/h2>\n\n\n\n<p>Azure App Service supports Swagger 2.0 metadata. Using this each API can define an EndPoint URL that returns metadata for the API in Swagger JSON format. The metadata returned can be used to generate client code.<\/p>\n\n\n\n<p>You can navigate metadata for the created API by appending&nbsp; <b>apiUrl\/swagger\/docs\/v1<\/b>. So let us go ahead and run the project, and you should get a \u201cforbidden\u201d message as shown in the image below:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"\/community\/cfs-filesystemfile.ashx\/__key\/CommunityServer.Blogs.Components.WeblogFiles\/dhananjay_5F00_kumar.AZUREAPIAPP\/5238.pic12.png\" alt=\" So let us go ahead and run the project, and you should get a \u201cforbidden\u201d message as shown in the image\" title=\"So let us go ahead and run the project, and you should get a \u201cforbidden\u201d message as shown in the image\"\/><\/figure>\n\n\n\n<p>&nbsp;<\/p>\n\n\n\n<p>To navigate to the metadata of the API, append \/<b>swagger\/docs\/v1 <\/b>to the baseurl as shown here<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"\/community\/cfs-filesystemfile.ashx\/__key\/CommunityServer.Blogs.Components.WeblogFiles\/dhananjay_5F00_kumar.AZUREAPIAPP\/3731.pic13.png\" alt=\" To navigate to the metadata of the API, append \/swagger\/docs\/v1 to the baseurl as shown\" title=\"To navigate to the metadata of the API, append \/swagger\/docs\/v1 to the baseurl as shown\"\/><\/figure>\n\n\n\n<p>Here you see Azure API metadata in JSON format. This is Swagger 2.0 JSON metadata for the API. This can be used to create the client code.<\/p>\n\n\n\n<p>To enable the Swagger UI, go back to the project, and from the App_Start folder open <b>SwaggerConfig.cs<\/b> file.&nbsp; In the file, locate the following lines of code and uncomment them:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"\/community\/cfs-filesystemfile.ashx\/__key\/CommunityServer.Blogs.Components.WeblogFiles\/dhananjay_5F00_kumar.AZUREAPIAPP\/5621.pic14.png\" alt=\" To enable the Swagger UI, go back to the project, and from the App_Start folder open SwaggerConfig.cs file.\" title=\"To enable the Swagger UI, go back to the project, and from the App_Start folder open SwaggerConfig.cs file.\"\/><\/figure>\n\n\n\n<p>Once again, go ahead and run the Azure API App by pressing F5. Append the URL with \/swagger and you will find Swagger UI has been enabled on the API.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"\/community\/cfs-filesystemfile.ashx\/__key\/CommunityServer.Blogs.Components.WeblogFiles\/dhananjay_5F00_kumar.AZUREAPIAPP\/3821.pic15.png\" alt=\" Append the URL with \/swagger and you will find Swagger UI has been enabled on the API\" title=\"Append the URL with \/swagger and you will find Swagger UI has been enabled on the API\"\/><\/figure>\n\n\n\n<p>Using the Swagger UI, we can test the API created. For example, let us go ahead and try to create a new Department. Click on the POST option, create the department data to be inserted in JSON fromat, and click on Try it out.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"\/community\/cfs-filesystemfile.ashx\/__key\/CommunityServer.Blogs.Components.WeblogFiles\/dhananjay_5F00_kumar.AZUREAPIAPP\/8765.pic16.png\" alt=\" Click on the POST option, create the department data to be inserted in JSON fromat\" title=\"Click on the POST option, create the department data to be inserted in JSON fromat\"\/><\/figure>\n\n\n\n<p>You will see Response Body and Response Code returned from the API. On sucessful creation of the resource, it should return the status code 201.<\/p>\n\n\n\n<p>You might have noticed as of now that it is vey simple to create Azure API Apps, enable the Swagger metadadata and UI and test them locally. Now let\u2019s go ahead and publish them in the Azure.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" class=\"wp-block-heading\" id=\"deploy-api-to-azure\">Deploy API &nbsp;to Azure<\/h2>\n\n\n\n<p>So far eveything we have done is local. Now we want to move our local Azure API app to Azure using Azure tools intgrated with Visual Studio 2015. To start, right click on the project and select Publish.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"\/community\/cfs-filesystemfile.ashx\/__key\/CommunityServer.Blogs.Components.WeblogFiles\/dhananjay_5F00_kumar.AZUREAPIAPP\/1031.pic17.png\" alt=\"  start, right click on the project and select Publish\" title=\" start, right click on the project and select Publish\"\/><\/figure>\n\n\n\n<p>In the Publish Web dialog box, select Microsoft Azure App Service and click Next.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"\/community\/cfs-filesystemfile.ashx\/__key\/CommunityServer.Blogs.Components.WeblogFiles\/dhananjay_5F00_kumar.AZUREAPIAPP\/0825.pic18.png\" alt=\" In the Publish Web dialog box, select Microsoft Azure App Service and click Next\" title=\"In the Publish Web dialog box, select Microsoft Azure App Service and click Next\"\/><\/figure>\n\n\n\n<p>On the next widow, select subscription and click on New.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"\/community\/cfs-filesystemfile.ashx\/__key\/CommunityServer.Blogs.Components.WeblogFiles\/dhananjay_5F00_kumar.AZUREAPIAPP\/2538.pic19.png\" alt=\" On the next widow, select subscription and click on New.\" title=\"On the next widow, select subscription and click on New.\"\/><\/figure>\n\n\n\n<p>In the \u201cCreate App Service\u201d window, first change the type to the API App as shown in image below:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"\/community\/cfs-filesystemfile.ashx\/__key\/CommunityServer.Blogs.Components.WeblogFiles\/dhananjay_5F00_kumar.AZUREAPIAPP\/6253.pic20.png\" alt=\" In the \u201cCreate App Service\u201d window, first change the type to the API App as shown in image\" title=\"In the \u201cCreate App Service\u201d window, first change the type to the API App as shown in image\"\/><\/figure>\n\n\n\n<p>Next give the following information:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Unique API name<\/li>\n\n\n\n<li>Choose the subscription<\/li>\n\n\n\n<li>If you have already created the App Service Plan, you can choose that. To create a new one click on New.<\/li>\n<\/ol>\n\n\n\n<p>In this example I am creating a new App Service plan as shown in the image below. We will use this newly created plan to publish the application.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"\/community\/cfs-filesystemfile.ashx\/__key\/CommunityServer.Blogs.Components.WeblogFiles\/dhananjay_5F00_kumar.AZUREAPIAPP\/3515.pic21.png\" alt=\" In this example I am creating a new App Service plan as shown in the image below. We will use this newly created plan to publish the application.\" title=\"In this example I am creating a new App Service plan as shown in the image below. We will use this newly created plan to publish the application.\"\/><\/figure>\n\n\n\n<p>After providing all the information, your hosting options should look like below:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"\/community\/cfs-filesystemfile.ashx\/__key\/CommunityServer.Blogs.Components.WeblogFiles\/dhananjay_5F00_kumar.AZUREAPIAPP\/5432.pic22.png\" alt=\" After providing all the information, your hosting options should look like below\" title=\"After providing all the information, your hosting options should look like below\"\/><\/figure>\n\n\n\n<p>As of now, we have provided all information required to publish the application. Click on Create to proceed further in the deployment. On the next screen, confirm all the details and click on Next to proceed further.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"\/community\/cfs-filesystemfile.ashx\/__key\/CommunityServer.Blogs.Components.WeblogFiles\/dhananjay_5F00_kumar.AZUREAPIAPP\/8103.pic23.png\" alt=\" On the next screen, confirm all the details and click on Next to proceed further.\" title=\"On the next screen, confirm all the details and click on Next to proceed further.\"\/><\/figure>\n\n\n\n<p>On this screen, you can verify the connection strings and update the database. To keep the things simple, leave all settings to default and click on Next.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"\/community\/cfs-filesystemfile.ashx\/__key\/CommunityServer.Blogs.Components.WeblogFiles\/dhananjay_5F00_kumar.AZUREAPIAPP\/5672.pic24.png\" alt=\" To keep the things simple, leave all settings to default and click on Next\" title=\"To keep the things simple, leave all settings to default and click on Next\"\/><\/figure>\n\n\n\n<p>On this screen, preview the deployments and click on publish to deploy the Azure API App to the Azure Service.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"\/community\/cfs-filesystemfile.ashx\/__key\/CommunityServer.Blogs.Components.WeblogFiles\/dhananjay_5F00_kumar.AZUREAPIAPP\/4087.pic25.png\" alt=\" On this screen, preview the deployments and click on publish to deploy the Azure API App to the Azure Service\" title=\"On this screen, preview the deployments and click on publish to deploy the Azure API App to the Azure Service\"\/><\/figure>\n\n\n\n<p>You can see the publish status in the ouput window of Visual Studio. On a sucessful pubish, you will be navigated to the Azure API App hosted in Azure Service. You should get Azure API app running in Azure service as shown in the image below.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"\/community\/cfs-filesystemfile.ashx\/__key\/CommunityServer.Blogs.Components.WeblogFiles\/dhananjay_5F00_kumar.AZUREAPIAPP\/4426.pic26.png\" alt=\" You should get Azure API app running in Azure service as shown in the image below.\" title=\"You should get Azure API app running in Azure service as shown in the image below.\"\/><\/figure>\n\n\n\n<p>You have sucessfuly deployed Azure API App to Azure Service!<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" class=\"wp-block-heading\" id=\"configuring-metadata-url-in-portal\">Configuring metadata URL in portal&nbsp; <\/h2>\n\n\n\n<p>To configiure the metadata URL, login to the portal and in the App Services section you will find your newly created API App.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"\/community\/cfs-filesystemfile.ashx\/__key\/CommunityServer.Blogs.Components.WeblogFiles\/dhananjay_5F00_kumar.AZUREAPIAPP\/0447.pic27.png\" alt=\" To configiure the metadata URL, login to the portal and in the App Services section you will find your newly created API App.\" title=\"To configiure the metadata URL, login to the portal and in the App Services section you will find your newly created API App.\"\/><\/figure>\n\n\n\n<p>&nbsp;Click on the API App and select API defintion.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"\/community\/cfs-filesystemfile.ashx\/__key\/CommunityServer.Blogs.Components.WeblogFiles\/dhananjay_5F00_kumar.AZUREAPIAPP\/4848.pic28.png\" alt=\" Click on the API App and select API defintion.\" title=\"Click on the API App and select API defintion.\"\/><\/figure>\n\n\n\n<p>In the API defintion, you can change the metadata URL. As discussed above, by default the metadata URL is set to&nbsp; <b>..\/swagger\/docs\/v1<\/b>.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"\/community\/cfs-filesystemfile.ashx\/__key\/CommunityServer.Blogs.Components.WeblogFiles\/dhananjay_5F00_kumar.AZUREAPIAPP\/0181.pic29.png\" alt=\" In the API defintion, you can change the metadata URL. As discussed above, by default the metadata URL is set to\u00a0 ..\/swagger\/docs\/v1.\" title=\"In the API defintion, you can change the metadata URL. As discussed above, by default the metadata URL is set to\u00a0 ..\/swagger\/docs\/v1.\"\/><\/figure>\n\n\n\n<p>We can change the metadata URL to something else as shown in the image below. After changing the URL, don\u2019t forget to save the new URL by clicking on the save button in the top. To keep it simple, I have left the metadata URL as the defualt here. So when you navigate to ..\/swagger\/docs\/v1, you will get the swagger metadata which is required to create client side code. The metadata can be seen in the browser as shown in the image below:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"\/community\/cfs-filesystemfile.ashx\/__key\/CommunityServer.Blogs.Components.WeblogFiles\/dhananjay_5F00_kumar.AZUREAPIAPP\/8640.pic30.png\" alt=\" The metadata can be seen in the browser as shown in the image\" title=\"The metadata can be seen in the browser as shown in the image\"\/><\/figure>\n\n\n\n<p>You can perform a GET operation and view all the departments in the browser by navigating to the URL<b> ..\/api\/departments. <\/b>Departments will be returned as JSON in the browser as shown in the image below:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"\/community\/cfs-filesystemfile.ashx\/__key\/CommunityServer.Blogs.Components.WeblogFiles\/dhananjay_5F00_kumar.AZUREAPIAPP\/6237.pic31.png\" alt=\" ou can perform a GET operation and view all the departments in the browser by navigating to the URL ..\/api\/departments. Departments will be returned as JSON in the browser as shown in the image\" title=\"ou can perform a GET operation and view all the departments in the browser by navigating to the URL ..\/api\/departments. Departments will be returned as JSON in the browser as shown in the image\"\/><\/figure>\n\n\n\n<p>You can also test the other operations using the swagger UI as we discussed in the previous section of this article.<\/p>\n\n\n\n<p>Great, so far we have created Azure API which is working with the SQL database in Azure. We have also sucessfuly deployed that to the Azure App Service.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" class=\"wp-block-heading\" id=\"creating-mvc-client\">Creating MVC Client <\/h2>\n\n\n\n<p>In this section of the article, we will create a .NET client. Let us go ahead and create an ASP.NET MVC project.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"\/community\/cfs-filesystemfile.ashx\/__key\/CommunityServer.Blogs.Components.WeblogFiles\/dhananjay_5F00_kumar.AZUREAPIAPP\/5850.pic32.png\" alt=\" In this section of the article, we will create a .NET client. Let us go ahead and create an ASP.NET MVC project.\" title=\"In this section of the article, we will create a .NET client. Let us go ahead and create an ASP.NET MVC project.\"\/><\/figure>\n\n\n\n<p>In the template, select MVC and choose No Authentication from the Change Authentication option.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"\/community\/cfs-filesystemfile.ashx\/__key\/CommunityServer.Blogs.Components.WeblogFiles\/dhananjay_5F00_kumar.AZUREAPIAPP\/1070.pic33.png\" alt=\" In the template, select MVC and choose No Authentication from the Change Authentication option\" title=\"In the template, select MVC and choose No Authentication from the Change Authentication option\"\/><\/figure>\n\n\n\n<p>After successful creation of the project, right click on the project and from the context menu select <b>Add-&gt;REST API Client. <\/b><\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"\/community\/cfs-filesystemfile.ashx\/__key\/CommunityServer.Blogs.Components.WeblogFiles\/dhananjay_5F00_kumar.AZUREAPIAPP\/3438.pic34.png\" alt=\" After successful creation of the project, right click on the project and from the context menu select Add-&gt;REST API Client. \" title=\"After successful creation of the project, right click on the project and from the context menu select Add-&gt;REST API Client. \"\/><\/figure>\n\n\n\n<p>On selecting the REST API Client option, you will get options to either Download API from Microsoft Azure or select to existing Swagger metadata file. Optionally you can change the client namespace name here as well.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"\/community\/cfs-filesystemfile.ashx\/__key\/CommunityServer.Blogs.Components.WeblogFiles\/dhananjay_5F00_kumar.AZUREAPIAPP\/3125.pic35.png\" alt=\" On selecting the REST API Client option, you will get options to either Download API from Microsoft Azure or select to existing Swagger metadata file.\" title=\"On selecting the REST API Client option, you will get options to either Download API from Microsoft Azure or select to existing Swagger metadata file.\"\/><\/figure>\n\n\n\n<p>Let us select option to Download from Microsoft Azure API App and click on the Browse button. &nbsp;To select the App Service, choose subscription and select Azure API App as shown in the image below and click on the ok button.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"\/community\/cfs-filesystemfile.ashx\/__key\/CommunityServer.Blogs.Components.WeblogFiles\/dhananjay_5F00_kumar.AZUREAPIAPP\/4527.pic36.png\" alt=\" To select the App Service, choose subscription and select Azure API App as shown in the image below and click on the ok button.\" title=\"To select the App Service, choose subscription and select Azure API App as shown in the image below and click on the ok button.\"\/><\/figure>\n\n\n\n<p>After further clicking on the Ok button, the metadata will be downloaded to the client app. On successful download of the metadata, you will find client side code has been generated. You can see them in solution explorer as shown in the image below:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"\/community\/cfs-filesystemfile.ashx\/__key\/CommunityServer.Blogs.Components.WeblogFiles\/dhananjay_5F00_kumar.AZUREAPIAPP\/5367.pic37.png\" alt=\" You can see them in solution explorer as shown in the image\" title=\"You can see them in solution explorer as shown in the image\"\/><\/figure>\n\n\n\n<p>Now we have created the client side code from the Azure API App. Let\u2019s go ahead and add a contoller: right click on the Controllers folder, and from context menu select Add-&gt;Controller. &nbsp;From the template, choose MVC 5 Controller with read\/write actions.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"\/community\/cfs-filesystemfile.ashx\/__key\/CommunityServer.Blogs.Components.WeblogFiles\/dhananjay_5F00_kumar.AZUREAPIAPP\/7331.pic38.png\" alt=\" From the template, choose MVC 5 Controller with read\/write actions\" title=\"From the template, choose MVC 5 Controller with read\/write actions\"\/><\/figure>\n\n\n\n<p>Using the genearted code, it is very easy to perform operation on Azure API.&nbsp; In the Index action of the generated controller, you can fetch all the departments by using instance of SchoolApiApp. To fetch all the departments, refer the listing below:<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">private SchoolApiApp app = new SchoolApiApp();\npublic ActionResult Index() {\n  return View(app.Departments.GetDepartments());\n}<\/pre>\n\n\n\n<p>As you might have inferred from the code listed above, it takes just a few lines of code to work with the REST API. Keep in mind that .NET client side code has been generated using the Swagger metadata of Azure API app.<\/p>\n\n\n\n<p>To add View, right click on the Index action and select add view. In the Add View template, select List and choose Department as model class.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"\/community\/cfs-filesystemfile.ashx\/__key\/CommunityServer.Blogs.Components.WeblogFiles\/dhananjay_5F00_kumar.AZUREAPIAPP\/1754.pic39.png\" alt=\" add View, right click on the Index action and select add view. In the Add View template, select List and choose Department as model class\" title=\"add View, right click on the Index action and select add view. In the Add View template, select List and choose Department as model class\"\/><\/figure>\n\n\n\n<p>Creating a record is also very simple. To do so, all you need to do is to call a Post method by passing the enity object as shown in the listing below.<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">public ActionResult Create([Bind(Include = \"Administrator,Budget,Name,StartDate\")] Department department) {\n  try {\n    \/\/ TODO: Add insert logic here\n    if (ModelState.IsValid) {\n      department.DepartmentID = 4569;\n      app.Departments.PostDepartmentByDepartment(department);\n    }\n    return RedirectToAction(\"Index\");\n  } catch (Exception ex) {\n    return View();\n  }\n}<\/pre>\n\n\n\n<p>The generated code will have all the operations like List, Post, Put, and Delete. You can use them as easily as we just used List and Post operations in above examples.<\/p>\n\n\n\n<p>In the last step let us go ahead and publish MVC client to Azure Web App. Publishing would be same as we published the API App. For brevity, I am avoiding the screenshots and only mentioning the steps.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" class=\"wp-block-heading\" id=\"publish-mvc-client-to-azure-web-app\">Publish MVC Client to Azure Web App<\/h2>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Right click on the project and click on publish<\/li>\n\n\n\n<li>Select Publish target as Microsoft Azure App Service<\/li>\n\n\n\n<li>Choose subscription and click on New<\/li>\n\n\n\n<li>Give the web app a name, select region, and click on Create<\/li>\n\n\n\n<li>In the last step, click on Publish<\/li>\n<\/ol>\n\n\n\n<p>On a successful publish, you will get a \u201cpublish succeeded\u201d message along with the URL in Visual Studio output window.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"\/community\/cfs-filesystemfile.ashx\/__key\/CommunityServer.Blogs.Components.WeblogFiles\/dhananjay_5F00_kumar.AZUREAPIAPP\/0714.pic40.png\" alt=\" successful publish, you will get a \u201cpublish succeeded\u201d message along with the URL in Visual Studio output window\" title=\"successful publish, you will get a \u201cpublish succeeded\u201d message along with the URL in Visual Studio output window\"\/><\/figure>\n\n\n\n<p>Great! We\u2019ve just published an ASP.NET MVC Application to Azure Web App, which is consuming an Azure API App.&nbsp;<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" class=\"wp-block-heading\" id=\"conclusion\">Conclusion <\/h2>\n\n\n\n<p>In this article, we learned how to perform the following tasks:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Make a SQL Connection to in SQL database in Azure<\/li>\n\n\n\n<li>Use Entity Framework database first approach to scaffold CRUD operation<\/li>\n\n\n\n<li>Expose the operations in Azure API App<\/li>\n\n\n\n<li>Configure the swagger API and UI for metadata and API testing<\/li>\n\n\n\n<li>Publish Azure API App in Azure App Service<\/li>\n\n\n\n<li>Create client side code using swagger metadata API in an ASP.NET MVC Application<\/li>\n\n\n\n<li>Use generated client code in MVC application to perform CRUD operations on table in SQL database in Azure<\/li>\n\n\n\n<li>Publish ASP.NET MVC application in Azure Web App<\/li>\n<\/ul>\n\n\n\n<p><b>&nbsp;<\/b><\/p>\n","protected":false},"excerpt":{"rendered":"<p>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\u2019re going to use Azure API App, Azure Web App, and SQL Server in Azure. <\/p>\n","protected":false},"author":65,"featured_media":2367,"comment_status":"publish","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[17],"tags":[],"class_list":["post-605","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-how-to"],"_links":{"self":[{"href":"https:\/\/www.infragistics.com\/blogs\/wp-json\/wp\/v2\/posts\/605","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.infragistics.com\/blogs\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.infragistics.com\/blogs\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.infragistics.com\/blogs\/wp-json\/wp\/v2\/users\/65"}],"replies":[{"embeddable":true,"href":"https:\/\/www.infragistics.com\/blogs\/wp-json\/wp\/v2\/comments?post=605"}],"version-history":[{"count":2,"href":"https:\/\/www.infragistics.com\/blogs\/wp-json\/wp\/v2\/posts\/605\/revisions"}],"predecessor-version":[{"id":2217,"href":"https:\/\/www.infragistics.com\/blogs\/wp-json\/wp\/v2\/posts\/605\/revisions\/2217"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.infragistics.com\/blogs\/wp-json\/wp\/v2\/media\/2367"}],"wp:attachment":[{"href":"https:\/\/www.infragistics.com\/blogs\/wp-json\/wp\/v2\/media?parent=605"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.infragistics.com\/blogs\/wp-json\/wp\/v2\/categories?post=605"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.infragistics.com\/blogs\/wp-json\/wp\/v2\/tags?post=605"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}