Made withASP.NET CoreClip

Create ASP.NET Core Web Application using Visual Studio 2022

B

BoostMyTool

Creator on the ASP.NET Core channel

Watch on YouTube ↗

528K viewsDec 27, 202111:07 runtime

Learn to build your first ASP.NET Core web application from scratch using Visual Studio 2022. This comprehensive guide walks you through creating a new project, explaining the necessary workloads and project templates. You'll explore the fundamental structure of an ASP.NET Core…

Chapters

#aspnetcore#clip#frameworks

Project Setup in Visual Studio 2022

To create a new ASP.NET Core Web Application:

In Visual Studio 2022, select Create a new project.
Filter templates by language (C#) and project type (Web).
Choose the ASP.NET Core Web App template.

Important
If the template is missing, click Install more tools and features and ensure the ASP.NET and web development workload is installed.

Configure the project name and location.
Select the desired .NET framework version and create the project. HTTPS can be disabled for local development.

Core Project Structure

The default project contains several key components:

Program.cs: The entry point and configuration file for the application.
Pages/: This folder contains the application's Razor Pages.
Pages/Shared/_Layout.cshtml: A shared template file that defines the common layout (header, footer, navigation menu) for all pages.

Understanding Razor Pages

Razor Pages follow a page-centric model for building web UIs.

View (.cshtml): Contains HTML markup and C# code using Razor syntax (@). It defines the page's structure and presentation. The @page directive at the top is essential.
Model (.cshtml.cs): The "code-behind" file. It's a C# class that contains the page's logic, data, and event handlers (like form submissions).
Routing: Pages are automatically routed based on their file path. For example, Pages/Contact.cshtml is accessible at the URL /contact.

Creating a Simple Static Page

To create a page without a code-behind model:

Right-click the Pages folder and select Add > Razor Page.
Choose Razor Page - Empty.
Name the file (e.g., About.cshtml).
In the .cshtml file, remove the @model directive if you don't need a code-behind file.
Add your HTML and Razor syntax directly. For example, to display the current date: @DateTime.Now.
Add a link to the page in _Layout.cshtml to make it accessible from the navigation menu.

Creating a Page with a Model (Form Handling)

To handle user input from a form, create a Razor Page with a model.

The View (HTML Form)

Create a standard HTML <form> element.
Set the method to post to submit data.
Add input fields (<input>, <textarea>) with unique name attributes. These names are the keys used to retrieve data in the backend.

The Model (Code-Behind)

The model class inherits from PageModel.
It has handler methods corresponding to HTTP verbs:
- OnGet(): Executes when the page is requested with an HTTP GET request (navigating to the page).
- OnPost(): Executes when a form on the page is submitted with method="post".

Tip
Define public properties in your model class to hold the data from the form. In the OnPost() method, retrieve the form data from the Request.Form collection and assign it to your properties. The keys in this collection match the name attributes of your HTML form inputs.

Creating a New ASP.NET Core Project

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#. 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.

Configuring the Project Details

In this window, we have to provide the project name. Let's call it FirstWebApp. 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 .NET platform and for the HTTPS, we can disable it. Now let's click on Create.

Exploring the Default Project Structure

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 Razor 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.cshtml 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.cshtml. And this is the model, it is called Index.cshtml.cs.

Running the Application and Understanding Routing

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.

Inspecting a Razor Page and its Layout

So let's stop the application first. And here we have this file which is called Privacy.cshtml. 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.

Creating a Simple Static Razor Page

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 Razor Page. So here, let's select Razor Page - Empty, then let's click on Add.

In this page, the option Razor 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 @page. But I don't need the model, 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 /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.

Creating a Razor Page with a Model and Form

Now I will show you how to create a new Razor Page which uses a model. So let's go back to Visual Studio. Let's stop the application and let's create a new Razor Page. So let's make a right click on Pages, then Add, then Razor Page. So I will select Razor Page - Empty, then Add.

So here the option Razor Page is already selected. Let's modify the file name. I will call it Contact.cshtml. So in this page, we will not use the controller, so we need to add this keyword @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.

Implementing the C# Model Logic

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 an 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 form. Now we need to initialize these variables in the OnPost method. So when we submit the data of this form, hasData will become true, and the other fields will be initialized using the data of the form.

Displaying Form Data in the View

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 followed 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.

Testing and Debugging the Form Submission

So in this page, we have this Contact item. Let's click on it. And you can see that this URL ends with /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.

Setting the Page Title and Final Test

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.