Developing web apps in ms azure

This tutorial shows how to build a secure ASP.NET MVC 5 web app that lets users log in with credentials from Facebook or Google. The app is a simple contact list that uses the ADO.NET Entity Framework for database access. You'll deploy the app to Azure App Service.

On completing the tutorial, you'll have a secure data-driven web application up and running in the cloud and using a cloud database. The following illustration shows the login page for the completed application.

You'll learn:

• How to create a secure ASP.NET MVC 5 web project in Visual Studio.
• How to authenticate and authorize users who log on with credentials from their Google or Facebook accounts (social provider authentication using OAuth 2.0).
• How to authenticate and authorize users who register in a database managed by the application (local authentication using ASP.NET Identity).
• How to use the ADO.NET Entity Framework 6 Code First to read and write data in a SQL database.
• How to use Entity Framework Code First Migrations to deploy a database.
• How to store relational data in the cloud by using Azure SQL Database.
• How to deploy a web project that uses a database to a web app in Azure App Service.

Note:

This is a long tutorial. If you want a quick introduction to Azure App Service and Visual Studio web projects, see Create an ASP.NET web app in Azure App Service. For troubleshooting info, see the Troubleshooting section.

Or if you want to get started with Azure App Service before signing up for an Azure account, go to Try App Service, where you can immediately create a short-lived starter web app in App Service. No credit cards required; no commitments.

Prerequisites

To complete this tutorial, you need a Microsoft Azure account. If you don't have an account, you can activate your Visual Studio subscriber benefits or sign up for a free trial.

To set up your development environment, you must install Visual Studio 2013 Update 5 or higher, and the latest version of the Azure SDK for .NET. This article was written for Visual Studio Update 4 and SDK 2.8.1. The same instructions work for Visual Studio 2015 with the latest Azure SDK for .NET installed, but some screens will look different from the illustrations.

Create an ASP.NET MVC 5 application

Create the project

1. From the File menu, click New Project.
   
2. In the New Project dialog box, expand C# and select Web under Installed Templates, and then select ASP.NET Web Application. Name the application ContactManager, and then click OK.
   
   Note: Make sure you enter "ContactManager". Code blocks that you'll be copying later assume that the project name is ContactManager.
3. In the New ASP.NET Project dialog box, select the MVC template. Verify Authentication is set to Individual User Accounts, Host in the cloud is checked, and App Service is selected.
   
4. Click OK.
5. The Configure Microsoft Azure Web App Settings dialog appears. You may need to sign in if you have not already done so, or reenter your credentials if your login is expired.
6. Optional - change the value in the Web App name box (see image below).
   The URL of the web app will be {name}.azurewebsites.net, so the name has to be unique in the azurewebsites.net domain. The configuration wizard suggests a unique name by appending a number to the project name "ContactManager", and that's fine for this tutorial.
7. In the Resource group drop-down select an existing group or Create new resource group(see image below).
   If you prefer, you can select a resource group that you already have. But if you create a new resource group and only use it for this tutorial, it will be easy to delete all Azure resources you created for the tutorial when you're done with them. For information about resource groups, see Azure Resource Manager overview.
8. In the App Service plan drop-down select select an existing plan or Create new App Service plan(see image below).
   If you prefer, you can select an App Service plan that you already have. For information about App Service plans, see Azure App Service plans in-depth overview.
9. Tap Explore additional Azure services to add a SQL database.
   
10. Tap the + icon to add a SQL database.
    
11. Tap New on the Configure SQL Database dialog:
    
12. Enter a name for the administrator and a strong password.
    
    The server name must be unique. It can contain lower-case letters, numeric digits, and hyphens. It cannot contain a trailing hyphen. The user name and password are new credentials you're creating for the new server.
    If you already have a database server, you can select that instead of creating one. Database servers are a precious resource, and you generally want to create multiple databases on the same server for testing and development rather than creating a database server per database. However, for this tutorial you only need the server temporarily, and by creating the server in the same resource group as the web site you make it easy to delete both web app and database resources by deleting the resource group when you're done with the tutorial.
    If you select an existing database server, make sure your web app and database are in the same region.
    
13. Tap Create.
    Visual Studio creates the ContactManager web project, creates the resource group and App Service plan that you specified, and creates a web app in Azure App Service with the name you specified.

Set the page header and footer

1. In Solution Explorer open the Layout.cshtml file in the Views\Shared folder.
   
2. Replace the ActionLink in the Layout.cshtml file with the following code.
   @Html.ActionLink("CM Demo", "Index", "Contacts", new { area = "" }, new { @class = "navbar-brand" })
   Make sure you change the third parameter from "Home" to "Contacts". The markup above will create a "Contacts" link on each page to the Index method of the Contacts controller. Change the application name in the header and the footer from "My ASP.NET Application" and "Application name" to "Contact Manager" and "CM Demo".

Run the application locally

1. Press CTRL+F5 to run the app.
   The application home page appears in the default browser.
   

This is all you need to do for now to create the application that you'll deploy to Azure.

Deploy the application to Azure

1. In Visual Studio, right-click the project in Solution Explorer and select Publish from the context menu.
   
   The Publish Web wizard opens.
2. In the Publish Web dialog box, click Publish.
   
   The application you created is now running in the cloud. The next time you deploy the application, only the changed (or new) files will be deployed.
   

Enable SSL for the Project

1. In Solution Explorer, click the ContactManager project, then click F4 to open theProperties window.
2. Change SSL Enabled to True.
3. Copy the SSL URL.
   The SSL URL will be https://localhost:44300/ unless you've previously created SSL web apps.
   
4. In Solution Explorer, right click the Contact Manager project and click Properties.
5. Click the Web tab.
6. Change the Project Url to use the SSL URL and save the page (Control S).
   
7. Verify that Internet Explorer is the browser that Visual Studio launches, as shown in the image below:
   
   The browser selector lets you specify the browser Visual Studio launches. You can select multiple browsers and have Visual Studio update each browser when you make changes. For more information see Using Browser Link in Visual Studio 2013.
   
8. Press CTRL+F5 to run the application. Click Yes to start the process of trusting the self-signed certificate that IIS Express has generated.
   
9. Read the Security Warning dialog and then click Yes if you want to install the certificate representing localhost.
   
10. IE shows the Home page and there are no SSL warnings.
    
    Internet Explorer is a good choice when you're using SSL because it accepts the certificate and shows HTTPS content without a warning. Microsoft Edge and Google Chrome also accept the certificate. Firefox uses its own certificate store, so it displays a warning.
    

Add a database to the application

Next, you'll update the app to add the ability to display and update contacts and store the data in a database. The app will use the Entity Framework (EF) to create the database and to read and update data.

Add data model classes for the contacts

You begin by creating a simple data model in code.

1. In Solution Explorer, right-click the Models folder, click Add, and then Class.
   
2. In the Add New Item dialog box, name the new class file Contact.cs, and then click Add.
   
3. Replace the contents of the Contact.cs file with the following code.
   Copy

   using System.ComponentModel.DataAnnotations;
   using System.Globalization;
   namespace ContactManager.Models
   {
       public class Contact
       {
           public int ContactId { get; set; }
           public string Name { get; set; }
           public string Address { get; set; }
           public string City { get; set; }
           public string State { get; set; }
           public string Zip { get; set; }
           [DataType(DataType.EmailAddress)]
           public string Email { get; set; }
       }
   }

   The Contact class defines the data that you will store for each contact, plus a primary key,ContactID, that is needed by the database.

Create web pages that enable app users to work with the contacts

The ASP.NET MVC scaffolding feature can automatically generate code that performs create, read, update, and delete (CRUD) actions.

1. Build the project (Ctrl+Shift+B). (You must build the project before using the scaffolding mechanism.)
2. In Solution Explorer, right-click the Controllers folder and click Add, and then clickController.
   
3. In the Add Scaffold dialog box, select MVC 5 Controller with views, using EF and then click Add.
   
4. In the Model class dropdown box, select Contact (ContactManager.Models). (See the image below.)
5. In the Data context class, select ApplicationDbContext (ContactManager.Models). TheApplicationDbContext will be used for both the membership DB and our contact data.