Skip to content

Latest commit

 

History

History
182 lines (137 loc) · 10.3 KB

introduction.md

File metadata and controls

182 lines (137 loc) · 10.3 KB
title page_title description previous_url slug position
Overview
Visual Studio Code Integration Overview
Learn how to enhance your experience in developing web applications with Progress Telerik UI for ASP.NET Core.
/installation/vs-code-integration/introduction
overview-vs-code-integration
1

Telerik UI for {{ site.framework }} 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.

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:

  1. Press Ctrl+Shift+P in Windows/Linux or Cmd+Shift+P on Mac to open the VSCode extension launcher.

  2. Type/Select Telerik UI for ASP.NET Core Template Wizard: Launch and press Enter to launch the extension.

  3. Enter a project name and select the location.

  4. Choose whether to start from a Blank Project or use one of the available Telerik project templates as a base:

    {{ site.product_short }} choose Telerik template, project name and location

Install or Update License Key

If necessary, the Telerik Visual Studio Code extension will notify you about a missing or outdated [license key]({%slug installation_license_key_aspnetcore%}), and will install or update it.

Configure the Project

With the template wizard, you can configure the following project options:

  • Project template
  • License type
  • Target framework
  • Tag or HTML Helpers
  • Localization
  • Visual theme

Project Templates

The following project templates are available:

Project Description
Blank Project

The Blank template has the package references and the client-side resources loaded in the _Layout.cshtml file. It also features the expected JSON serialization configuration in the Program.cs file. The default editor templates are included in the ~Views\Shared\EditorTemplates folder.
Standard

The Standard template features:

  • Everything from the Blank Project.
  • A Responsive Panel and Menu in _Layout.cshtml.
  • A PanelBar in Index.cshtml.
  • A TabStrip in Contact.cshtml.
  • An HTML styled with Cards in About.cshtml.
The Content Security Policy (CSP)

Content Security Policy (CSP) template features:

  • A Menu in _Layout.cshtml.
  • A Detail Grid with a TabStrip in Index.cshtml.
  • A Child Grid in _Child_Grid.cshtml.
  • A DeferredToScriptFiles setting in Program.cs.
  • A KendoDeferredScripts Middleware in Program.cs.
Grid and Menu

The Grid and Menu template features:

  • Everything from the Blank Project.
  • Buttons and Grid in Index.cshtml.
  • A Responsive Panel and Menu in _Layout.cshtml.
Grid Razor Pages

The Grid Razor Pages template includes everything from the Blank Project. It features an editable Grid in the Index.cshtml that uses handlers for the CRUD data operations. The AntiForgeryToken is set up, as well.
Dashboard

The Dashboard template features:

  • Everything from the Blank Project except the editor templates folder.
  • A TileLayout with Charts and Grids in the Index.cshtml, as well as shared DataSource and dynamically populated templates.
Admin

The Admin is a Razor Pages template configured with TagHelpers. It features:

License Type

Select the type of your Telerik license (trial or commercial).

{{ site.product_short }} choose Telerik license

Target Framework

Choose the desired target framework version.

{{ site.product_short }} choose target framework

Helper Selection

You can choose if you want the template project to use [HtmlHelpers or TagHelpers]({% slug knownissues_aspnetmvc6_aspnetmvc %}) version of the components.

{{ site.product_short }} HTML/Tag helper options

Localization

If you enable the localization option, the language specific files will be copied to ~/wwwroot/lib/kendo-ui/js/messages/ folder. For more information, refer to the [localization documentation]({% slug overview_localization_core %}).

{{ site.product_short }} enable project localization

Themes

You can add styling to your application by selecting one of the [Kendo UI Sass-Based themes]({% slug sassbasedthemes_overview %}) (Default, Bootstrap, Material, Fluent, or Classic) and pick from a variety of [swatches]({% slug sassbasedthemes_overview %}#swatch) 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.

{{ site.product_short }} Theme options

Run the Project

After configuring the settings of the project, click Create Project to start creating the new {{site.product_short}} application.

To run the project:

  1. Open the terminal and navigate to the project folder.
  2. Execute dotnet run and open the link in the console output in your browser.

Alternatively, 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 {{ site.product }} project up and running.

See Also

  • [Troubleshooting the Telerik UI for ASP.NET Core Productivity Tools Extension]({%slug vs-code-extension-issues%})