Create ASP.NET Web App With SQL Database In Azure

Prerequisites

• Microsoft Azure Account: If you do not have Azure account, you can open a free Azure account. It comes with 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

• Login to Azure portal with your Azure Account.
• Select SQL Database, click on new button.

• On the right side panel (blade), provide 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 ‘webappsample’. After that click ‘Create’.



• It will take 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 Client IP address to connect to SQL DB server. In left navigation, click on 'All resources', then select the SQL DB server we created, click 'All settings' and then select 'Firewall'.



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



• We are all set here.

Create Tables in 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 user name & password you provided while creating database server in Azure, 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 snapshot. Use ‘Update’ button to update database.



• Now table is ready to use.

Create ASP.NET MVC web application

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

4. Click OK and select ‘MVC’ from ASP.NET templates in next screen. Click ‘Change Authentication’ button. Make sure ‘Host in the Cloud’ checkbox is checked and ‘Web App’ 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 first part of URL). Select ‘Create a new web service plan’; give some meaningful name. Create new resource group; give some meaningful name. Select region based on your location. Click OK.



8. It will take 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 project is created, you can check 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, click Add.



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



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



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



• Entity Model will be created.



• Build the project.

• Now to create Controller; Go to Controllers folder, right click, Add-> Controller.

• Select ‘MVC 5 Controller with views using Entity Framework’ controller template, click Add.



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



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



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



• Build the project & we are ready to deploy.

• You can hit F5 to deploy locally to test or can go ahead with Azure deployment.

Deploy web app to Azure

• In solution explore, select project, right click, then Publish. It will open publish web dialog box, click ‘Next’.

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



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



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



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



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