Create ASP.NET Web App With SQL Database In Azure

Prerequisites

• Microsoft Azure Account: If you do not have an Azure account, you can open a free Azure account. It comes with a 1-month free trial.
• Visual Studio 2013/2015: You need to have Visual Studio installed on your machine.
• Install the Azure SDK for Visual Studio 2015 or the Azure SDK for Visual Studio 2013.

Let’s Start

Create SQL Database in Azure

• Log in to theAzure portal with your Azure Account.
• Select SQL Database, and click on the new button.

• On the right side panel (blade), provide the database name as ‘dasautodb’, in server configuration – select ‘Create a new server’- server name can be any unique name, user name & password – a new user name and password to connect to DB server, Location as 'Southeast Asia'.


• Select source – ‘Blank database’, Pricing – leave it to default ‘Standard S0’, Resource Group – create new as ‘web app sample’. After that click ‘Create’.

• It will take a few minutes to create the DB and it will be visible in SQL Databases where you can see the properties and manage settings.

• Now we need to allow the Client IP address to connect to the SQL DB server. In the left navigation, click on 'All resources', then select the SQL DB server we created, click 'All settings', and then select 'Firewall'.

• You can see the client's IP address there. Click on the ‘Add client IP’ link, IP will be added in the panel below. Now click Save.

• We are all set here.
Create Tables in the Database
• Open Visual Studio 2013/2015. In Server Explorer, select SQL Server Object Explorer.

• Click on Add SQL Server button

• Provide the SQL server name you’ve already created. Select ‘SQL Server Authentication’ and enter the user name & password you provided while creating the database server in Azure, and click Connect.

• Once connected, you can see the ‘dasautodb’ in Explorer. Navigate to Tables, right-click, and create a new table.

• Create table ‘CarModels’ with 5 columns as given in the snapshot. Use the ‘Update’ button to update the database.

• Now the table is ready to use.
Create ASP.NET MVC web application

1. Open Visual Studio and from the file menu, click New, then Project.
2. Under templates, select Visual C#, Web, then ASP.NET Web application.
3. Provide the appropriate project name, in my case it's ‘DSWebAppSample1’.

4. Click OK and select ‘MVC’ from ASP.NET templates on the next screen. Click the ‘Change Authentication’ button. Make sure the ‘Host in the Cloud’ checkbox is checked and the ‘Web App’ is selected.

5. Select ‘No Authentication’, OK, then again click OK.
6. If you are not already logged in to Azure, Visual Studio prompts you to do so. Sign in with the ID and password of the account that you use to manage your Azure subscription.
7. Once you're signed in, the Configure Microsoft Azure Web App Setting dialog box asks you what resources you want to create. Provide a unique web app name (this would be the first part of the URL). Select ‘Create a new web service plan’; give some meaningful name. Create a new resource group; give some meaningful name. Select a region based on your location. Click OK.

8. It will take a few seconds to create the project. It will ask to select a source control. If you have TFS or Git configured, you can select one otherwise cancel the popup.

9. Once a project is created, you can check the Azure App service activity window to see details.

10. Build the project.
11. Create a new ADO.NET entity model: Go to Project, then Models, Right click on Models, Add, then New Item. Select ‘ADO.NET Entity Data Model’ from Data, give some name, and click Add.

• Select ‘EF Designer from database’ on the next screen, and click Next.

• Select the ‘Yes, include the sensitive...‘radio button, and then click Next.

• On the next screen, select the ‘CarModels’ table and click Finish


• Entity Model will be created.

• Build the project.
• Now to create a Controller; Go to the Controllers folder, right-click, and Add-> Controller.
• Select ‘MVC 5 Controller with views using Entity Framework’ controller template, and click Add.

• On the next screen- In the Model class drop-down, select CarModel. Select ‘sadautodbEntities’ from the data context drop-down. Ensure all 3 views check boxes are selected, and click Add.

• It will add a controller class ‘CarModelsController’. Do not change anything in this class as it’s already generated by the entity framework with all required actions.

• Now we need to modify the view to link. Navigate to Project -> Views -> Shared. Open _Layout. cshtml and add one <li> as given in the snapshot below.

• Build the project & we are ready to deploy.
• You can hit F5 to deploy locally to test or go ahead with Azure deployment.
Deploy web app to Azure
• In solution explore, select a project, right-click, then Publish. It will open publish web dialog box, click ‘Next’.

• In the configuration, ensure ‘Release’ is selected’ click Next, then Publish. It will take some time to publish on Azure, you can see the process in the output window:

• Once it’s published, it will be opened in the browser. Click on the ‘My Cars’ link in the top navigation, and here you go.

• You can create a new item using ‘Create New Link’.

• Other operations- edit, and delete can also be performed using this page.

• Your web app is in Azure now, anyone with the URL can access this site.