In this chapter, we will learn how Visual Studio organizes the ASP.NET Core solution or project structure. We created ASP.NET Core project in the last tutorial. It created a project layout with the properties & dependencies folder and files like the program.cs, startup.cs, appsetting.json, appsetting.development.json, etc. The project structure changes as per the project template we choose while creating the project. The wwwroot, pages, controller, views & models are the other folders which VIsual Studio creates for us. We will learn the significance of the above folders and files in this tutorial.
Table of Content
ASP.NET Core Solution Structure
Open the Hello World ASP.NET Core solution from the last tutorial. The chose Visual Studio 2017, .NET Core 2.2 and ASP.NET core 2.2 and the Empty Template.
The solution contains two folders Dependencies & Properties. It contains two files in the project root program.cs and startup.cs. The older version of ASP.NET core project also created the wwwroot folder.
But, if you choose the other templates like Web application (Creates razor pages) or Web Application Model, View &Controller, you will get a slightly different project folders
The above templates also create wwwroot, pages, controller, views & models folders.
Properties
The Properties folder contains a file called launchSettings.json. This json file contains all the project-specific settings needed to launch the application. You will find debug profile, environment variables that should be used etc in this file
wwwroot
The wwwroot folder is new in ASP.NET Core. The Static files like HTML, CSS, JavaScript, and image files go into this folder or any subfolder under it.
The ASP.NER core treats the wwwroot folder is as the root of the website. The Url http://yourDomainName.com/ points to wwwroot.
All files are served from the wwwroot folder or a subfolder under it. Place only those files which you want to serve. This is called whitelisting. Files placed in other folder are automatically blocked.
The Code files should be placed outside of wwwroot. That includes all of your C# files, Razor files, configuration files, etc.
The three folders are automatically created under this folder. They are css, js & lib.
The css folder will contain the application CSS files.
The js folder is for the javascript files, which is part of the App.
The lib folder is for the third-party javascript libraries like jquery, bootstrap, etc. These Client-Side Packages are installed using the Libman
Pages
There are two ways. you can create web pages in ASP.NET core. One is the older Model-View-Controller approach. The other one is using the Razor pages. This folder is created, if you choose the Web application with the Razor pages template. All the Razor Pages will go into this folder.
Model, View, & Controller folder
These folders contain the models, views & controller related files. These folders are created if you choose the Model-View-Controller template under the Web Application.
Dependencies
This folder contains all the Dependencies of the project.
The Visual studio now uses NuGet Packages for all the server-side dependencies.
For the Client-Side dependencies, the Libman is used. This is a deviation from the previous versions where NuGet is used for both for Server & Client-side dependencies.
Under the Dependencies folder, we have NuGet folder, which contains NuGet Packages and SDK Folder, which contains Microsoft.NETCore.App. This is the .Net Core runtime that we are targeting in our project.
The libman.json file is created, when we install the third party packages using the libman
Files in your file System are now part of your Project
The project file (.csProj) has gone under a lot of changes in Visual Studio 2017. It has become a lot simpler now.
There is a direct correlation between the files in the solution folder and what is displayed in the Solution Explorer in Visual Studio. The files you add to the solution folder automatically become part of the Project.
To demonstrate this, we will add a file to the file structure in the File Explorer and see it show up in the Solution Explorer in real-time.
Open notepad and paste the following code
1 2 3 4 5 6 7 8 | namespace HelloWorld { public class test { } } |
Now, save this to the HelloWorld project folder.
This file is automatically picked by the visual studio and added to the Project.
New Project system
The project.json, which was introduced along with ASP.NET Core 1.0 is discarded from the .NET Core 2.0
The installed NuGet packages are now listed in the .csproj file.
The .csproj files can be opened and edited directly from Visual Studio.
We can now right-click on the project and edit the .csproj file. There is no need to unload the project before doing this.
The new csproj file contains very few elements compared to what it was in older versions of ASP.NET
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | <Project Sdk="Microsoft.NET.Sdk.Web"> <PropertyGroup> <TargetFramework>netcoreapp2.2</TargetFramework> <AspNetCoreHostingModel>InProcess</AspNetCoreHostingModel> </PropertyGroup> <ItemGroup> <PackageReference Include="Microsoft.AspNetCore.App"/> <PackageReference Include="Microsoft.AspNetCore.Razor.Design" Version="2.2.0" PrivateAssets="All" /> </ItemGroup> </Project> |
TargetFramework
The TargetFramework is netcoreapp2.2 which you can modify from here
You can also change the TargetFramework from the Project Property ( Select Project -> Right-click and select Property). Any things that changed in Project Property is updated in the .csproj file
Package Manager
The NuGet is the package manager for the older versions of the Visual Studio. But from .Net Core 2.2 onwards, we have two package managers.
- NuGet for Server-side packages
- Libman for client-side packages
NuGet for Server Side
There are three ways you can add NuGet Packages to the Project
- Modifying the .csproj file
- Using NuGet Package Manager
- Via Package Manager Console
Modifying the .csproj file
Select the project and Right-click and click on Edit HelloWorld.csproj
Add the following code and save the file
1 2 3 | <PackageReference Include="Microsoft.ApplicationInsights" Version="2.4.0" /> |
The NuGet Package Manager downloads and installs the dependency as soon as you save the .csproj file. The Yellow cautionary sign appears next to the assembly and it disappears when the installation is complete.
Using NuGet Package Manager
Select the Project and right-click and click on Manage NuGet Packages to install/remove NuGet Packages.
Package Manager Console
Tools -.NuGet Package Manager -> Package Manager console opens the Package Manager console windows.
Libman for Client-Side Packages
The libman is the new Client side package management tool to use in Visual Studio 2017 for ASP.NET Core projects. The VS 2017 now has built-in support for it.
You can open it by right-clicking on the Solution and selecting the Add-> Client-Side Library option
In the Add Client-side library, enter the name of the library and click on Install to install it. By default, the installed files are copied to the wwwroot/lib folder
Bower is no longer is the default of Managing the client-side packages in Visual Studio 2017 for ASP.NET Core projects.
Right Click on Project folder and click on Manage Bower Packages as shown in the image above. This opens up the Manage Bower Package page, where you can add/remove bower packages.
Installing the bower packages creates a folder name bower under dependencies folder
Summary
In this tutorial, we learned a few things about the ASP.NET Core Solution Structure or Project structure. The Visual Studio Team has made lots of improvements over the older system.