Executing (running) the Razor Pages Web Application - ASP.NET Core 7 Part 2

ASP.NET Core 7: Executing (running) the Razor Pages Web Application using Visual Studio 2022



This is part 2 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. We are using the project we created in the previous tutorial: ASP.NET Core 7: Creating A Razor Pages Web Application: Step-By-Step Guide 


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

In the previous tutorial, we created the ASP.NET Core 7 Razor Pages Web application using Visual Studio 2022. In this tutorial, we are going to learn about how to see, in other words, run the web application we created on the browser. 

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.


Figure 1: Wizard Created Project

The project is ready to execute(run). The top of the IDE contains most of the common commands in the Menu bar and the Toolbar. The IDE provides two main modes to run the application, debug or release. Debug mode is the default selection in the VS2022 IDE.


Figure 2: Debug commands in the top menu

Make sure that Debug and the Any CPU dropdown options are selected. And also note that the full green arrowhead button is for running the program with the debugging mode while the green outlined arrowhead button is for running the app without debugging. Also if there are no compile errors you can use Ctrl + F5 to run the program without debugging. 


Figure 3: Debug dropdown menu

Since we didn't change any code after creating the project using the ASP.NET Core Web application project there shouldn't be any errors. We can run the program to see the finished product.

To run the application without debugging select the Debug menu item and then select "Start Without Debugging" or use the shortcut keys Ctrl + F5

Once you run the App IDE will compile the program and then open the App in the Web browser. During the compilation, it will show up messages in the output window and some animations on the bottom blue status bar.


Figure 4: Build Started


Figure 5: Build completed and web server running

When running the App that we created using the selected ASP.NET Core Razor Pages Web Application template, Visual Studio 2022 builds the app by compiling the code. If there are no errors, it will start the default web server.


Figure 6: Webserver is running

After a few seconds, it shows the following website in the default web browser.


Figure 7: Generated website

So this completes the "Part 2: ASP.NET Core 7: Executing (running) the Razor Pages Web Application" tutorial. Hope this tutorial is a valuable introduction for those new to ASP.NET core and Visual Studio 2022 IDE.

Hope this helps you create an ASP.NET Core 7 Razor Pages Web Application. 

To learn more details about the application we created, please look at the next article:
Part 3: ASP.NET Core 7: Getting Familiar with Visual Studio 2022 IDE


Reference:

Links: Icon used 


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