How to connect an asp.net webapp to a an sql database
Tags: aspnet
Published: 2023-05-24 23:25:02

This is a documentation showing how to connect an asp.net app service to  an azure sql database

to carry out this Project, I used the following tools

1. Visual studio 2023
2. A to do list app source code written in html , javascript and css.

To connect an asp.net web app to sql database, we will go through the following steps:

## Create a new project


1. Open visual Studio 2023 and click on new project
2. select ASP.net core web app
3. click on next

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ce3kficgycrhvrghntl6.PNG)

4. I named the application MyFirstAzureWebApp, and then selected 
  Next.
5. Select .NET 7.0 (Standard-term support).
6. Set Authentication to None and create as shown below


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vc7f45un4fb2ne1ufanx.PNG)

7. From the Visual Studio menu, select Debug > Start Without Debugging to run the web app locally. If you see a message asking you to trust a self-signed certificate, select Yes.


## Publish the app

1. look Solution Explorer at the left hand side , right-click the MyFirstAzureWebApp project and select Publish.
2. In Publish, select Azure and then Next.



![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6cn8k154z9aec1ffe2jh.PNG)
3. Choose the Specific target,  Azure App Service (Linux)  Then, select Next


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0878hfghpwve6ddwp58j.PNG)


4. To publish your app, you need an account. I signed into my account by clicking on the sign in button to use your Azure subscription.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/y08ggn0n0a1tals015w2.PNG)

5. For Subscription, I select the subscription already listed 
 since that is the subscription I am using

6. For Resource group, I select my resource group gracewebapp

7. For hosting plan, I clicked on the one with my webapp name
8. Select Create to create the Azure resources.


Once the wizard completes, the Azure resources are created for you, and you're ready to publish your ASP.NET Core project.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xyyokcpkcgpf0gzd8y8q.PNG)

In the Publish dialog, ensure your new App Service app is selected, then select Finish, then select Close. Visual Studio creates a publish profile for you for the selected App Service app.

In the Publish page, select Publish. If you see a warning message, select Continue.

##
3. Update the app and redeploy

1. In Solution Explorer, I open Index.cshtml.

2. I replaced the <div> element with my html ,css and javascript  code as shown below


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2zdbyc9kh0lk2wzsyanm.PNG)

Save your changes.

3. To redeploy to Azure, right-click the MyFirstAzureWebApp project in Solution Explorer and select Publish.

4. In the Publish summary page, select Publish.

5. After  a successful publishing completes, Visual Studio opens a browser with the webapp showing


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yxi8jhvr895uiw0idap8.PNG)


## Manage the Azure app

1. Go to Azure portal , then go to appservice, look for the app MyFirstAzureWebApp

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hndbe9j04m1a1vel4q0f.PNG)

2. Select the name of the name of the app and the picture below is showed

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/67vm1ryqiyr3z3jgkifi.PNG)

## Connecting to SQL Database

1. Create an sql database. I already have one from creating a web app + database

2. Go to your sql database, select connection string

3. navigate to ADO.net and copy the value

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lx1qjc5ij1dsy47smsfk.PNG)



4. go to the  app service you just deployed, navigate to configuration 

5. click on create new connection string


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4zgu9e18bnanyomvptsd.PNG)


6. Under name, enter dbconnection

7. under value, paste the value you just copied form the sqldatabase ado.net. 

8. under type, select sql server.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gw3p032s0udlrrad9a1t.png)

click on ok

Our app service has  ben successfully connected to a Azure SQL database