Web App Development Beginners Guide - ASP.NET Core 7 Part 1

ASP.NET Core 7: Creating A Razor Pages Web Application using Visual Studio 2022: Step-by-Step Guide

This is part 1 of the "Web App Development Beginners Guide" tutorial series. In this tutorial series, we will learn how to build a functional Web Application with individual account user login.

1. ASP.NET Core 7: Creating A Razor Pages Web Application: Step-By-Step Guide (This Tutorial)

2. ASP.NET Core 7: Executing (running) The Razor Pages Web Application 

3. ASP.NET Core 7: Getting Familiar With Visual Studio 2022 IDE

4. ASP.NET Core 7: Examining The Project Structure  

5. ASP.NET Core 7: Modifying And Extending Website Contents

6. ASP.NET Core 7: Modifying And Extending The Application.

In future tutorials, we will cover:

  • ASP.NET Core 7: Registering A User 
  • ASP.NET Core 7: A Quick Skim Through The Identity Framework And Entity Framework Used In The Project.
  • ASP.NET Core 7: Deploying The Razor Pages Web Application Into IIS Server
  • ASP.NET Core 7: Deploying The Razor Pages Web Application Into A Third-Party Shared Hosted IIS Server
  • ASP.NET Core 7: Adding Contact Us Page
  • ASP.NET Core 7: Enhancing The UI
  • ASP.NET Core 7: How To Add Client-Side Libraries
  • ASP.NET Core 7: Customizing User Profile
  • ASP.NET Core 7: User Authentication And Authorisation
  • ASP.NET Core 7: Further Extending The Application

Part1: ASP.NET Core 7: Creating A Razor Pages Web Application: Step-by-Step Guide

This is the updated version of part of my previous tutorial created for ASP.NET Core 3.1, which was a long tutorial. For .NET Core 7, I am splitting it into 2 or 3 parts with more detailed and additional instructions.

Note: I have marked red labels in the pictures shown in this tutorial for explanation purposes, those red typing or numbers are not actually shown in the actual Visual Studio windows on your computer.

Creating a new project using Visual Studio 2022


Open Free Visual Studio 2022 Community edition (or any paid version)

Figure 1: Visual Studio 2022 loading window

Prior to Visual Studio 2019, Previous editions of Visual Studio showed a startup tab inside the IDE whenever you open the IDE. In Visual Studio 2019 and 2022, this startup tab is no longer available, instead; it opens a Start Window and then continues as a wizard to create a new project/ Open a project or solution/ open a local folder /Clone or check out code. The IDE will not appear until you complete the following steps (wizard). The start page shows the Open recent project list and the Get Started list as you can see in the following figure. 





Figure 2: Visual Studio 2022 Start Wizard window before opening the IDE


Select Create a new project from the Get Started items list.

Then it will show Create a new project window as shown below. It shows the Recent project templates list and available project template list.


Figure 3: Create a new project window

We are going to use the ASP.NET Core Web Application template for this demonstration. Clicking on the item will highlight  it as shown below:

Figure 4: ASP.NET Core WebApp

In a later window in this wizard, we actually select the framework type and the actual project template. So this actually acts as a template category.




Figure 5: Select ASP.NET Core Web App in Create a new project


Select the ASP.NET Core Web Application template category, and click Next.

It will take you to the next window of the wizard "Configure your new project". In this window, we give names for the project and solution and select a path to the store. The solution is a container for one or more projects in Visual Studio.



Figure 6: Configure your new project

Give the Project name and select the folder to store the project, and also give a Solution name. You can override automatic typing in the Solution name field.

The next wizard window, "Additional information" is self-explanatory.


Figure 7:  Additional Infomation


Select the Framework you want to use, in our case; the latest available at the time of this writing is .NET 7.0



Figure 8: Framework Dropdown list


Note: Older .NET Framework and .NET Core were merged into .NET 5, since then it uses just .NET dropping "Core".

Then select the Authentication type as Individual Accounts from the dropdown list


Figure 9: Authentication type


Note: Changing the authentication to Individual Accounts is optional. For this tutorial, we will use Individual Accounts. If the application does not need authentication, skip this part. Just click create and go to the next step.

Leave the 'Configure for HTTPS' check box ticked while other options are blank (default values) as shown in Figure 10.



Figure 10: Additional Information filled

Now click create button; finally, it will create the project files for the selected Web Application template as shown in the figure below.



Figure 11: Wizard created project window

It will take some time to fully download the necessary packages after displaying the above window. Just look at the bottom blue status bar. Initially, it says "Ready" but it keeps downloading Nuget packages. Probably they mean "Ready" that you can browse the project while Visual Studio is downloading the necessary components. It will not execute (run) the app until, it finishes, its background work.

We will learn how to run the application in the next tutorial.

The completed Project can be found on GitHub


  Next, Part 2. ASP.NET 7: Executing (running) the Razor Pages Web Application
 

Comments

Post a Comment

Popular posts from this blog

Examining the Project structure - ASP.NET Core 7 Part 4

Image
ASP.NET Core 7: Examining the Project Structure This is part 4 of the " Web App Development Beginners Guide " tutorial series. In this tutorial series, we will learn how to build a functional Web Application with individual account user login. Part 4. ASP.NET Core 7: Examining the Project Structure We are going to use the project we created in the first tutorial  ASP.NET Core 7: Creating A Razor Pages Web Application: Step-by-Step Guide .    In that, we used the  ASP.NET Core Razor Web Page Application  template to create the project. Figure  1 shows the project structure  inside the Solution Explorer, where it displays the top-level folder structure.   It has 2 main files, 5 folders and two project items ( Connected Service  and  Dependencies ). Figure 1: Solution Explorer -Top-level view When using the wizard, there are a few options to choose from. The final generated project code and structure depend on these selections. For example, if a project is created using the AS
Read more

Getting Familiar with Visual Studio 2022 IDE - ASP.NET Core 7 Part 3

Image
ASP.NET Core 7: Getting Familiar with Visual Studio 2022 IDE This is part 3 of the " Web App Development Beginners Guide " tutorial series. In this tutorial series, we will learn how to build a functional Web Application with individual account user login. If haven't followed the last tutorial of the series, here is the link:   ASP.NET Core 7: Executing (running) The Razor Pages Web Application ,  Part 3. ASP.NET Core 7: Getting Familiar with Visual Studio 2022 IDE Now we will look at the project we created using Visual Studio 2022 Integrated development environment, acronym IDE. Throughout these tutorials, we use IDE for ease of use.  Figure 1:  Parts of the Visual Studio 2022 IDE The top section is marked in a red rectangle numbered  1 in  Figure 1 , and holds the commands menu and toolbar. Figure 2: Visual Studio 2022 IDE menu bar Most menu items are self-explanatory.  We already learned how to run the application using command buttons from the menu bar. Section  2  
Read more

Displaying A Start Page In ASP.NET Core 3.1 Web API Project.

Displaying A Start Page in ASP.NET Core 3.1 Web API project. When we create a Web API project using Visual Studio 2019 Template there is no file to display when the web application start. That is because Web API doesn't need to display any information to the user or the public. But some times we may need to add a little bit of information to the site, or even during the development stage we may need to show some information. Add app.UseDefaultFiles(); app.UseStaticFiles(); to the Configure method in the Startup.cs file. Then Add a Folder and name it as wwwroot . This is is very important. Then add the Index.html file inside wwwroot folder. Now we can edit the index.html file to add any information. That's it.
Read more