Build ASP.NET Core Web Application using Visual Studio Code and .NET 8 | Install C# Extensions

in this video I will show you how to create an asp.net web application using visual studio code so first it is necessary to check that the net SDK is installed on your computer so we can open the terminal or the command prompt then let's type net hyphen hyen version so here we can see that net is installed on my computer and this is the version that I have if you don't have net then it is necessary to download and install it so here let's type net let's go to the first link then download then we can click on this button to download the installer of net 8 we can also click on this link to download the installer and of course we have to save it in my case I already installed the Nets Decay so I will not install it again so let's click on cancel then let's go to visual studio code and we need to install two extensions so here let's type the name of the first extension which is C so this is the extension that we need it is from Microsoft and it provides the following features so it has intellisense which provides the Auto completion feature so we need to install it and in my case it is already installed then we need the second extension which is called C extensions so this is the extension that we need and this is the name of the developer and it provides the following features so it allows us to create new C classes then we need to install it and in my case it is already installed now let's create a new folder for the new application so let's click on open folder I want to create a new folder in the documents folder so here I already created a folder called vs code projects then here let's create a new folder and let's call it web app one then let's open this folder so for the moment this folder is empty and we need to to create a new asp.net web application so let's open the terminal and here we can type net hyen hyphen help so here we can see that we can use the new command to create a new project we can use run to build and run the project and also we can use the watch command to restart the application after every modification so now let's create a new project so we need to use the new command and here we have the common templates so to create a new web application using Razer Pages we can use the short name web app or also we can use razor and to have the full list of the available templates we can use net new then list so here let's write net new and let's add list and this is the full list of the available templates so here we have web app we have the MVC template and also we have the web API so now let's create a new web application using razor pages so we can use this short name so let's type net new then web app now the project has been created correctly and here we have new files and folders so to run this application we have to type net run so now the application is running correctly and it is available at this URL so we can click on follow link and we obtain this application so we can update the title so let's go to the pages folder then index. CSH HTML and let's update the title so here we can write Welcome to our website let's save the file and let's refresh the page so here we don't have the new title because we need to restart the application so to stop the application we can click on control and c and let's run it again let's go to this link again so here we have the new title so instead of restarting the application after every modification we can use the watch command so let's stop the application and let's use netwatch let's press enter so now the application is running using the watch command let's update the title so here let's write Welcome to our new website let's save the file and here we can see that the application has rest started so here we can see that we have the new title let's stop the application so another way to run the application is to create the configuration files of this application then let's click on run then add configuration and let's select the net core option so this file has been created and you can see also that we have the vs code folder that contains these two files so now we can run this application by clicking on run then run without debugging so we have this alert because we are using the https protocol with a self-signed certificate let's click on Advanced then accept the risk and continue and we obtain this application let's update the title of this page let's save the file and to restart the application we can click on this button or also we can stop the application and run it again so let's click on the restart button and here we have the new title now let's create a new razor page so let's create it in the pages folder we can make a right click then new C then razor page let's call it contact so this is the razor page it has the extension. CSH HTML and this is the corresponding C class so in this class we don't need this field so let's delete it and also we don't need the Constructor so let's delete it let's save the file and let's update the page so let's go to contact. CSH HTML let's delete this statement and let's delete this code then let's add the following HTML code so here we will create a bootst pro that contains this column then here we have this title so it is contact form then we have this form so in this form we have the first label and also we have this input field that allows us to provide the first name we have this label for the last name and this is the second input field we have another label for the email address and this is the input field for the email address and finally we have this row that contains a label with a text message and we have this text area and here we have the submit button so it has the text submit let's save the file and let's add a link to this page in the nav bar so we have to go to the shared folder under Pages let's open the lay file so for the moment we have this nav bar that contains two items so this is the home item and this is the Privacy item let's copy this item and let's paste it here let's rename the text and let's write contact then let's provide the name of the razor page so the razor page is the contact page that we created and here we have to provide the name of the razor page without the extension so we have to write contact let's save the file and let's restart the application so now we have the contact item let's click on it and we obtain this page

Channel: BoostMyTool

Views: 3,517

Keywords:

Id: sceitmw57aQ

Length: 10min 26sec (626 seconds)

Published: Wed Feb 21 2024