Develop ASP.NET Core apps using Visual Studio Code

Visual Studio Code or VS Code is a light weight IDE for modern web development. It supports a wide range of programming and scripting languages including C# and .NET Core. It has a very good extensions and libraries. If you are an ASP.NET developer familiar with Visual Studio and are looking to get introduced to Visual Studio Code this article is for you.

VS Code is a powerful code editor that comes with a plethora of features. But this also means that it's not exclusively targeted at .NET developers. So, there is a learning curve involved when you switch from Visual Studio to Visual Studio Code. In this article my aim is to quickly introduce you to the most common features that you need in day to day ASP.NET Core development.

Before you go any further install the latest version of .NET SDK and VS Code. You can download them here and here.

Once you install VS Code, you need to install a few extensions so that your .NET development experience will be enhanced. So, open VS Code on your machine and click on the extensions icon from the side bar as shown below.

Then search for C# Dev Kit extension and install it. Simply put, this extension adds Solution Explorer like interface to VS Code. Installing C# Dev Kit automatically installs three other extensions namely C#, IntelliCode, and .NET Install Tool.

The C# extension provides features such as IntelliSense, code refactoring, and navigation. The IntelliCode extension offers AI assisted code development. And the .NET Install Tool extension helps other extensions install the .NET runtime as and when needed. Feel free to vist the individual extensions on the marketplace website to read more about them.

Also, search for NuGet Gallery extension and install it. This extension allows you to install and uninstall NuGet packages easily (much like Visual Studio's Manage NuGet Packages dialog).

Upon installing these extensions your extensions pane should look like this (you might not have the Code Spell Checker entry in your extensions pane) :

Now we are ready to create our first ASP.NET Core project using VS Code! For this example we will create an MVC project. You can create a project using .NET Command Line Interface or CLI commands. You can issue the CLI commands either using Developer Command Prompt or VS Code's integrated terminal window. Since we want to learn VS Code, we will use the latter approach.

Open VS Code if it's not already opened and select View | Terminal menu option.

This will open a terminal window within the VS Code IDE as shown below :

We will use Entity Framework Core and ASP.NET Core Code Generator tools in our sample project. We need to install these tools on our machine in case they aren't installed already.

In the terminal window issue this command :

dotnet tool list --global

The above command lists all the .NET CLI tools installed globally on the machine. If no tools are installed yet, you will see a blank list as shown below:

To install these tools issue the following commands one-by-one :

dotnet tool install --global dotnet-ef
dotnet tool install --global dotnet-aspnet-codegenerator    

If all goes well, the newly installed tools will now appear in the listing as shown below :

Now, navigate to a folder where you want the ASP.NET Core project to be created and issue the following command :

dotnet new mvc -o EmployeeApp

The above command creates a new MVC application and the project files will be stored in the EmployeeApp output directory. You will also see a success message in the VS Code terminal window.

I created EmployeeApp project in Z:\Code folder and my project files look like this :

Next, open the EmployeeApp folder in VS Code. This can be done using File | Open Folder menu option.

Select EmployeeApp folder from your machine and click on the Select Folder button.

This will open EmployeeApp folder in VS Code IDE. Clicking on the Explorer side bar option will now reveal the VS Code Explorer window as shown below :

At this point, C# Dev Kit and the other extensions will kick in (it senses that the EmployeeApp folder contains a .csproj file) and the Explorer pane will also show Solution Explorer like this :

Expand the Models folder in the Solution Explorer and click on the Add New File icon. Then select Class as the file type, specify a name -- Employee, and hit enter.

This will create Employee.cs file under the Models folder and you can open it for editing.

Open Employee.cs and modify it as shown below:

using System.ComponentModel.DataAnnotations;

namespace EmployeeApp;

public class Employee
{
    [Required]
    public Guid EmployeeID{get;set;}
    [Required]
    public string FirstName{get;set;}
    [Required]
    public string LastName{get;set;}
    [Required]
    public DateOnly HireDate{get;set;}
}    

The Employee class is quite straightforward and contains just four public properties namely EmployeeID, FirstName, LastName, and HireDate. We use a few data annotations to mark them as required fields.

Now we need to add a few NuGet packages for our project. We will use NuGet Gallery VS Code extension that we installed earlier.

To open NuGet Gallery extension, select View | Command Palette menu option.

And then type nuget to reveal the Open NuGet Gallery command.

Clicking on the command opens the UI of the NuGet Gallery extension.

You will find this UI quite similar to the Manage NuGet Packages dialog of Visual Studio. Just look for the following packages and install them one-by-one.

• Microsoft.EntityFrameworkCore.Sqlite
• Microsoft.EntityFrameworkCore.Tools
• Microsoft.VisualStudio.Web.CodeGeneration.Design

The first package is required because we want to use Sqlite database as our data store. The second and third package is required by the dotnet-ef and dotnet-aspnet-codegenerator tools respectively.

Once these packages are installed they will appear under the Dependencies folder of the project in the Solution Explorer.

We have created the Employee model class. We will now create a controller and views for performing CRUD operations.

Open VS Code terminal window and navigate to EmployeeApp folder where the project's .csproj file is located. Then issue the following CLI command.

dotnet-aspnet-codegenerator 
controller 
-name EmployeeCRUDController 
-dc AppDbContext 
-m Employee 
--databaseProvider sqlite 
--useDefaultLayout
--referenceScriptLibraries

In this command we use dotnet-aspnet-codegenerator tool for scaffolding the required controller and views based on our Employee model class.

We tell the tool that we want to create a controller named EmployeeCRUDController. We specify that the tool should create an EF Core DbContext named AppDbContext. The model used in the controller and views is Employee. Since we want to use Sqlite as our data store, the database provider is specified to be sqlite. The views should use application's default layout and they should also reference script files used for client side validation.

If the above command is successful, you will see the controller and the view files (and a few more support files) as listed below :

• EmployeeCRUDController file is created in the EmployeeApp folder
• Data folder is created and contains AppDbContext class
• Views | EmployeeCRUD folder gets created and contains five .cshtml view files -- Index, Create, Edit, Details, and Delete.

Move the EmployeeCRUDController.cs from EmployeeApp folder to Controllers folder for the sake of better organization.

Now we will create the table inside a Sqlite database based on Employee model class. To do this issue the following two commands in the terminal window one-by-one.

dotnet ef migrations add Initial
dotnet ef database update

The first command creates a few EF Core migrations related files and places them inside the EmployeeApp | Migrations folder.

The second command will create the Employee table in the database. At this time a physical Sqlite database file gets created inside the EmployeeApp folder. On my machine it looks like this :

This completes our sample application. If you right click on the project in the Solution Explorer you will see these three options :

You can also resort to CLI commands to build and run the application :

dotnet build
dotnet run    

For this run let's use Solution Explorer's Start New Instance option. The following figure shows the main page of the application when this is done.

As you can see, my EmployeeApp is running on HTTP port 5053. Go to the address bar and navigate to EmployeeCRUD controller -- /EmployeeCRUD/Index.

Using Create New link add a new Employee. And also test Edit, Details, and Delete functionality.

Here is a sample employee added to the table.

Stop the application and re-run the app by issuing dotnet run command in the terminal window.

dotnet run    

Open your browser and type the URL as shown in the terminal window to launch that web app.

You might have noticed that although our EmployeeApp runs as expected, it uses HTTP by default. If you want to use HTTPS you need to do two things. Firstly, you need to trust the development SSL certificates installed by .NET SDK. Secondly, you need to use HTTPS launch profile while running the application.

To trust the development certificate, issue this command in the terminal window :

dotnet dev-certs https --trust    

You might be asked for concent via a dialog. Click on the Yes button in the dialog to trust the certificate.

You can now run the app on HTTPS using the following command :

dotnet run --launch-profile https    

The launch-profile option tells that we want to use https settings. The following figure shows sample HTTPS run of the application.

Open your browser and navigate to the HTTPS address of the app as shown in the terminal window.

If you run the app using Solution Explorer as discussed earlier, it might not be able to use HTTPS address because it uses the first launch profile from the launchSettings.json file.

This file can be found in the Properties folder. You will see three profiles under profiles section -- http, https, and IIS Express. Make https profile as the first profile and re-run the application. This time it will run on HTTPS as expected.

I hope this article gave you some idea about developing ASP.NET Core applications using Visual Studio Code.

That's it for now! Keep coding!!