Getting Started with ASP.NET Core in VS Code using Razor pages

19 Dec 20223 minutes to read

This article provides a step-by-step instruction for building ASP.NET Core web application using the Visual Studio Code and ASP.NET Core tag helper.

Prerequisites

System requirements for ASP.NET Core components

Create an ASP.NET Core web application

1.Create a new folder and open it in the VS Code by File > Open Folder….

NOTE

Visual Studio Code displays a dialog box that asks Do you trust the authors of the files in this folder. Select:

* The checkbox trust the authors of all files in the parent folder.

* Yes, I trust the authors.

2.Open the Integrated Terminal by selecting a menu using View > Terminal in VS Code.
3.Run the following command in the terminal to create a new ASP.NET Core web application.

.NET CLI
dotnet new webapp -o AspNetCoreWebApp

The dotnet new command creates new Razor Pages project in the AspNetCoreWebApp folder. Refer to this topic for more information about .NET CLI commands.

4.Run the following command in the terminal to open the project in current instance of the VS Code.

.NET CLI
code -r AspNetCoreWebApp

Install Syncfusion ASP.NET Core package in the application

Run the following command in the terminal to install Syncfusion.EJ2.AspNet.Core NuGet package in the application.

.NET CLI
dotnet add package Syncfusion.EJ2.AspNet.Core

Refer to NuGet packages topic for more details about NuGet packages.

Add Syncfusion ASP.NET Core Tag Helper

Open ~/Views/_ViewImports.cshtml file and import the Syncfusion.EJ2 package.

~/_ViewImports.cshtml
@addTagHelper *, Syncfusion.EJ2

Add style sheet

Checkout the Themes topic to learn different ways (CDN, NPM package, and CRG) to refer styles in ASP.NET Core application, and to have the expected appearance for Syncfusion ASP.NET Core controls. Here, the theme is referred using CDN inside the <head> of ~/Pages/Shared/_Layout.cshtml file as follows,

~/_Layout.cshtml
<head>
    ...
    <!-- Syncfusion ASP.NET Core controls style -->
    <link rel="stylesheet" href="https://cdn.syncfusion.com/ej2/21.1.35/material.css" />
</head>

Add script reference

In this getting started walk-through, the required scripts are referred using CDN inside the <head> of ~/Pages/Shared/_Layout.cshtml file as follows,

~/_Layout.cshtml
<head>
    ...
    <!-- Syncfusion ASP.NET Core controls script -->
    <script src="https://cdn.syncfusion.com/ej2/21.1.35/dist/ej2.min.js"></script>
</head>

Register Syncfusion Script Manager

Open ~/Pages/Shared/_Layout.cshtml page and register the script manager at the end of `<body>` in the ASP.NET Core application as follows.

~/_Layout.cshtml
<body>
    ...
    <!-- Syncfusion ASP.NET Core Script Manager -->
    <ejs-scripts></ejs-scripts>
</body>

Add ASP.NET Core Calendar control

Now, add the Syncfusion ASP.NET Core Calendar tag helper in ~/Pages/Index.cshtml page.

CSHTML
<div>
    <ejs-calendar id="calendar"></ejs-calendar>
</div>

Press Ctrl+F5 to run the app. Set Select Environment to .NET Core, if settings required for VS Code. Then, the default web browser launched with Syncfusion ASP.NET Core Calendar control.