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

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 1in 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 in Figure 1 is the main editor area. This is where the coding is done. All opened files are stacked here as tabs. This section in the above picture shows the overview page created by the template wizard and is not required for the actual application.

Figure 3 shows the editor window with the code when the file "Program.cs" is selected from the Solution Explorer.  


Figure 3: Showing Program. cs in Visual Studio 2022 IDE editor pane
  • Section 3 in Figure 1 Called "Solution Explorer" shows the folder or directory structure of the projects. Figure 4 below shows the Solution Explorer window.



Figure 4: Top-level view of the Project in the Solution Explorer window

  • Section 4 in Figure 1 shows various messaging tabs, such as the output tab, Error list tab, Package Manager console, etc.
  • Section 5 in Figure 1 shows the properties window which shows the properties of the selected item in the Solution Explorer.
  • Section 6 in Figure 1 is the status bar.
  • Section 2 in Figure 7 shows the toolbox, the SQL Server Object Explorer and Source Control Explorer. By default, this Source Control Explorer will not show up in this section, for this tutorial, we are not using source control. In another tutorial, I will show how to use source control. 

Try out yourself:

Expand the items by clicking on the little arrow icon in front of a folder or a file inside Solution Explorer. 

Note that appsettings.json is not a folder, but it can be expandable. Also, expand the Pages folder and then Index.cshtml

Associated files and objects


Figure 5: Associated items

I'll explain this in detail in the following tutorial  4. ASP.NET Core 7: Examining the Project Structure

Error list 


If there are errors in your code, they will show up in the Error List tab at the bottom.


Figure 7: Error List tab

In above figure 7, I have typed 3 xxx, and IDE will quickly show the error in the Error List tab.

Package Manager console



Figure 8: Package Manager console

Package Manager console is used to execute the NuGet command directly from the IDE. NuGet is the package management system for .NET development. It enables developers to share and reuse compiled code (DLLs).

Tools - Options


There are many tools available for Visual Studio 2022 which can be accessed through the top menu.
 

Figure 9: Tools & Extensions

Also, developers can customise the default setting for the IDE via Tools/options. For example, we can change the default project location to select automatically when we create a new project. 


Figure 10: Options dialogue window

Extensions

Another useful menu command, extensions allow developers to add additional and useful functionalities for their project


Figure 11: Extension for Visual Studio

Above figure 11 shows installed extensions for my computer. The most useful extensions for me are "Web Compiler 2022+" and "Bundle & Minifire 2022+". I am sure you might also need these 2 to follow future tutorials.  If your Visual Studio doesn't have those try installing them. Use the "Online" tab at the left pane and then type the name in the "Search" text box and click the search button.

So this completes the "Part 3:  ASP.NET Core 7: Getting Familiar with Visual Studio 2022 IDE" tutorial. Hope this tutorial is a valuable introduction for those new to ASP.NET Core and Visual Studio 2022 IDE.

Hope this helps you familiarise yourself with Visual Studio 2022 ID.

To learn more details about the application we created, please look at the next article:


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

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