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.
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.
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.
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.
@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,
<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,
<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
<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.
<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.