Create ASP.NET Core Web Application using Visual Studio 2022

hello everyone in this video i will show you how to create your first asp.net core project using visual studio 2022 so let's click on create new project so in this window we can use these fields to filter the different available templates so for the language i will select c-sharp for the platform let's select all platforms and for the project type let's select web so this is the web option then here we can select asp.net core web app but if you cannot find this option in this list then you have to scroll down and to click on install more tools and features then in this window we have to select this component which is called asp.net and web development and then we have to click on modify but in my case i have already installed this component so i will just close this window so in this window we have just to select the option asp.net core web app so let's select it and let's click on next in this window we have to provide the project name let's call it first web app so it will be saved at this location and now let's click on next in this window we can accept this latest version of the dotnet platform and for the https we can disable it now let's click on create so this project has been created and by default it contains some files for example it contains this program.cs file which allows us to configure the application also it contains this folder called pages so this folder contains some reads or pages and here we have the shared folder which contains the template of our application so in the pages folder we have several files for example we have this index.cs html file which is the main file of the application also if we want to see the model behind this page we have just to make a right click and to click on view code and here we have the model associated to the view so this is the view it is called index.cs.html and this is the model it is called index.cshtml.cs now to run this application here we have to select the server let's select iis express then let's click on this button and here we obtain this welcome page so this welcome page is accessible at this url we can also click on privacy and we obtain the second page so the second page is accessible at this url which ends with privacy so privacy is the name of the cshtml file let's take a look on this file so let's stop the application first and here we have this file which is called privacy.cs html if we open it we can see this text if we want to see the model behind this view we have to make a right click then view code and here we have the model now let's close the model so here we have the page keyword which means that we will not use any controller this is the name of the model associated to this view and this is the title that we will set to this page and here we have some html code so this page is using this layout if we open this layout we can find the head the html the doctype and also the body and here we will display the content of the file called privacy so now i will show you how to create a new page so we have to make a right click on the pages folder then add then eraser page so here let's select razor page empty then let's click on add in this page the option eraser page empty is already selected so let's provide a name to this file i will call it about.cshtml and let's click on add in this page i don't need to use the controller so i need to use the keyword at page but i don't need the module so i will remove this source code now let's create some html code then let's print some text to the user we can also display the current date to the user now let's save this file and if we want to display the text about in the menu of this application we have to modify the file layout.cshtml so here i will copy this code and i will paste it just here and let's add a new item so i will call it about and it is accessible at the url slash about so we can access this file using the url about where about is the file name without the extension now let's save this file and let's run the application so here we have this new item let's click on it and here we obtain the content of this page now i will show you how to create a new razer page which uses a model so let's go back to visual studio let's stop the application and let's create a new razer page so let's make a right click on pages then add then eraser page so i will select razer page empty then add so here the option eraser page is already selected let's modify the file name i will call it contact dot cs html so in this page we will not use the controller so we need to add this keyword at page also we will use this model which is associated to this view so then i will add some html code so first let's display the title of this page and also let's display a contact form so this form will be transmitted using the method post and it will be transmitted to the same url of the page then we have the first field that allows the user to provide his first name another field to provide the last name and the third field that allows the user to write some text finally we have a button to submit this form so when we submit the data of this form the model of this view will be executed first so let's go to the model let's make a right click then view code so in this model we have the onget method this method will be executed when we request the page using the get method but we will submit the form using the post method so we need to add onpost method so this method will be executed when we submit the form using the post method now let's create some public variables that you can access from the view so the first variable allows us to know if there is some data in the form or not and we will have some data if the form is transmitted using the submit button and then we will have these three variables that will contain the data of the different fields of the firm now we need to initialize these variables in the onpost method so when we submit the data of this form has data will become true and the other fields will be initialized using the data of the form now let's use these variables in the view so let's make a right click then go to page and here let's add some modifications so to use the public variables of the model we have to use the class model for load by the name of the variable so if we have some data in the form then we will display this text to the user now we can add an item to this page in the layout so let's go to the layout file let's copy these lines and let's paste them just here let's modify the name of the item let's call it contact and let's modify the url it is contact now let's run the application so in this page we have this contact item let's click on it and you can see that this url ends with slash contact now let's provide some data in this form for example let's say bill gates then let's click on this submit button so here we can see this welcome message but we can see that i don't have the message of the user this means that i need to correct my source code let's go to the model and here let's correct the key of the field so the field is called message let's save it and let's run the application again so we can use this button to restart the application let's click on contact and let's fill the form let's click on submit and here we have the welcome message in addition to the message transmitted by the user but we can see that this page does not have a title we can fix this so in this area we can provide the title of the page let's restart the application so let's click on contact and this time we have this title contact page followed by the name of the application finally thank you very much for watching and please subscribe to the channel

Channel: BoostMyTool

Views: 229,526

Keywords:

Id: dTIjAJO-tcQ

Length: 11min 7sec (667 seconds)

Published: Mon Dec 27 2021