Telerik UI for ASP.NET Core Visual Studio Code Integration Overview
The Telerik UI for ASP.NET Core Productivity Tools is an extension for Visual Studio Code that enhances the application development experience with Telerik UI for ASP.NET Core.
As its primary advantage, the VS Code extension facilitates the creation of projects through a wizard directly in Visual Studio Code.
Telerik UI for ASP.NET Core is a
professional grade UI library with 110+ components for building modern and feature-rich applications. To try it out sign up for a free 30-day trial.
New to Telerik UI for ASP.NET Core?
Get Telerik UI for ASP.NET Core Productivity Tools
You can get the extension:
from the Visual Studio Marketplace
by opening the Extensions tab in Visual Studio Code, then searching for Telerik UI for ASP.NET Core Productivity Tools and clicking Install
Create a Telerik Project
To create a Telerik-enabled ASP.NET Core project:
Press
Ctrl
+Shift
+P
in Windows/Linux orCmd
+Shift
+P
on Mac to open the VSCode extension launcher.Type/Select
Telerik UI for ASP.NET Core Productivity Tools: Launch
and pressEnter
to launch the extension.Enter a project name and select the location.
-
Choose whether to start from a Blank project or use the Admin Dashboard template as a base.
Blank Project
The Blank Project has the package references and the client-side resources loaded in the _Layout.cshtml
. It also features the expected JSON serialization configuration in the Startup.cs
file.
Additionally, you can include multiple Telerik UI for ASP.NET Core components into your project (for example, the Grid, Chart, and Form).
Admin Dashboard
The Admin Dashboard is a is a Razor Pages template configured with TagHelpers. It features:
- Everything from the Blank Project.
- Authentication functionallity (Registration, Login, and Logout) in
Areas/Login/Pages
. - A navigation that is created by using the Drawer and AppBar components.
- A TileLayout with Cards, Arc Gauge, Chart and Grid in
Index.cshtml
. - A TileLayout with a variety of Charts and Gauges in
Performance.cshtml
. - A TileLayout with Bubble Chart and ListView with editable Cards in
Products.cshtml
as well as Pager and search panel. - A TileLayout with Form and Calendar in
Settings.cshtml
.
Configuration
License Type
Select the type of your Telerik license (trial or commercial, depending on what you have).
Target Framework
The wizard allows you to select the desired ASP.NET Core version.
Themes
The Built-in themes option enables you to add styling to your application by selecting one of the Sass-Based themes (Default, Bootstrap or Material) and pick from a variety of swatches that come with each theme. When you make your choice, the wizard will add to the _Layout.cshtml
only these files that are required by the selected theme.
Run the Project
After configuring the settings of the project, click Create Project to start creating the new UI for ASP.NET Core application.
To run the project:
- Open the terminal and navigate to the project folder.
- Execute
dotnet run
and navigate your browser to the link you see in the console output.
Alternatively, you can open the solution file with Visual Studio and build the application. Once the NuGet packages get restored and the build passes, you will have your Telerik UI for ASP.NET Core project up and running.
Troubleshooting
If the extension does not work right (missing pages, does not start, etc.), you can try the following to clean up cache files and get it working again:
- Uninstall the extension from VS Code.
- Go to the extensions templates cache folder and delete the
CoreT
folder - this is where cache for the Telerik extensions are kept:- on Windows, open
%localappdata%
- on Mac, open
/Users/[user_name]/.local/share/
- on Windows, open
- Install the extension again.
If you see Response status code does not indicate success: 401 (Logon failed.).
, then the Nuget.Config file in %APPDATA%\NuGet
may contain invalid credentials or keys. For more information check the Nuget Install article or Nuget Setup with CLI article