You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Welcome to the First Steps on Windows guide on getting started with Progress<sup>®</sup> Telerik<sup>®</sup> UI for ASP.NET Core with Visual Studio!
15
+
This article presents a use case scenario that demonstrates how to start working with the UI for ASP.NET Core. You will implement the Kendo UI DatePicker for ASP.NET Core in your project by using the Telerik UI DatePicker HtmlHelper or TagHelper. In this guide, we use Visual Studio 2019 for Windows.
16
16
17
-
The guide creates a use-case scenario which demonstrates how to start working with the suite and implements the Kendo UI DatePicker for ASP.NET Core in your project by using the Telerik UI DatePicker HtmlHelper or TagHelper. For its purposes, the guide uses Visual Studio for Windows 2019.
18
-
19
-
To configure an ASP.NET Core web application to use UI for ASP.NET Core, you can use either of the following approaches:
20
-
* (Demonstrated in this guide) Create the application from scratch and manually add the necessary setup.
17
+
To configure an ASP.NET Core web application to use Telerik UI for ASP.NET Core, you can apply either of the following approaches:
18
+
* Create the application from scratch and manually add the necessary setup (demonstrated in this article).
21
19
*[Use the Telerik UI for ASP.NET Core Visual Studio extensions]({% slug overview_visualstudio_aspnetcore %}) and create an application that has all necessary scripts, styles, and editor templates.
22
20
23
21
To get up and running with the project:
24
22
25
-
1.[Download the controls](https://www.telerik.com/download-trial-file/v2/aspnet-core-ui)
26
-
1.[Meet the requirements](#meeting-the-requirements)
27
-
1.[Create the ASP.NET Core application](#creating-the-application)
23
+
1.[Meet the requirements](#meet-the-requirements)
24
+
1.[Create the ASP.NET Core application](#create-the-application)
28
25
1.[Add the Telerik NuGet Feed to Visual Studio](#add-the-telerik-nuget-feed-to-visual-studio)
29
-
1.[Add the UI for ASP.NET Core NuGet package](#adding-the-nuget-package)
30
-
1.[Add reference to Kendo.Mvc.UI](#adding-reference-to-kendomvcui)
31
-
1.[Include the Telerik UI for ASP.NET Core client-side resources](#including-the-telerik-ui-for-aspnet-core-client-side-resources)
26
+
1.[Add the UI for ASP.NET Core NuGet package](#add-the-nuget-package)
27
+
1.[Add a reference to Kendo.Mvc.UI](#add-a-reference-to-kendomvcui)
28
+
1.[Include the Telerik UI for ASP.NET Core client-side resources](#include-the-telerik-ui-for-aspnet-core-client-side-resources)
29
+
1.[Add a Telerik UI component](#add-a-telerik-ui-component)
32
30
33
-
## Meeting the Requirements
31
+
## Meet the Requirements
34
32
35
-
Follow the instructions from the [official .NET Core documentation site](https://docs.microsoft.com/en-us/dotnet/core/windows-prerequisites).
33
+
Telerik UI for ASP.NET Core requires .NET Core. To install .NET core, follow the instructions on [Microsoft's .NET Core documentation site](https://docs.microsoft.com/en-us/dotnet/core/windows-prerequisites).
36
34
37
-
## Creating the Application
35
+
## Create the Application
38
36
39
-
1. Open Visual Studio for Windows 2019 and select **Create a New Project**.
37
+
1. Open Visual Studio 2019 for Windows and select **Create a new project**.
40
38
1. Select **ASP.NET Core Web Application** and click **Next**.
41
39
1. Set a name and location for the project and click **Create**.
42
40
1. Select **Web Application (Model-View-Controller)** and click **Create**.
43
41
44
42
## Add the Telerik NuGet Feed to Visual Studio
45
43
46
-
* Add the Telerik NuGet Feed for Trial License Users
47
-
* Add the Telerik NuGet Feed for Users with Commercial License
48
-
49
-
Note that when the Nuget Feed is added to Visual Studio through the Progress Trial Installer or through the Progress Control Panel, steps 2 and 3 from the [Add the UI for ASP.NET Core NuGet package section](#adding-the-nuget-package) will be set up automatically.
50
-
44
+
Telerik maintains a NuGet Feed with official UI for ASP.NET Core releases and service packs. These packages are available for registered users.
45
+
46
+
* If you use a free trial license, follow [these steps](#add-the-telerik-nuget-feed-for-trial-license-users) to add the NuGet feed to Visual Studio.
47
+
* If you purchased a commercial license, follow [these steps](#add-the-telerik-nuget-feed-for-users-with-commercial-license) to add the NuGet feed to Visual Studio.
48
+
49
+
>**Tip**
50
+
>
51
+
>If you have already configured the Telerik NuGet feed in Visual Studio, jump to [Add the NuGet Package](#add-the-nuget-package).
52
+
51
53
### Add the Telerik NuGet Feed for Trial License Users
52
54
53
-
1. If you don't have an active license, download an [UI for ASP.NET CORE trial](https://www.telerik.com/aspnet-core-ui). During the installation of the components, you can setup the [Telerik NuGet]({% slug nuget_install_aspnetmvc6_aspnetmvc %}) feed to be added automatically - check the "Set up Telerik NuGet package source" checkbox:
55
+
The easiest way to add the Telerik NuGet feed to Visual Studio if you are a trial user is to install the UI for ASP.NET Core free trial:
56
+
57
+
1. Download the [UI for ASP.NET Core free trial](https://www.telerik.com/aspnet-core-ui) installer. You need to create a free account if don't have one.
58
+
1. Run the installer.
59
+
1. Select the option **Set up Telerik NuGet package source** to automatically add the [Telerik NuGet feed]({% slug nuget_install_aspnetmvc6_aspnetmvc %}).
54
60
55
61
56
62
57
63
### Add the Telerik NuGet Feed for Users with Commercial License
58
64
59
-
1. If you have an active commercial UI for ASP.NET Core license, you can automatically set up the NuGet Feed through the Progress Control Panel. Download the Progress Control Panel from the Overview page of your Telerik account.
65
+
The easiest way to add the Telerik NuGet feed to Visual Studio if you purchased a commercial license is to use the Progress Control Panel:
66
+
67
+
1. Download the Progress Control Panel from the **Overview** page of your [Telerik account](https://www.telerik.com/account/).
60
68
61
69
62
70
63
-
1. When logging in the Progress Control Panel, check the "set up Telerik NuGet package source" option.
71
+
1. Run the Progress Control Panel exe.
72
+
73
+
1. On the Login screen, check the **set up Telerik NuGet package source** option.
64
74
65
75
66
76
67
-
If you miss to set up the Nuget Feed on login, go to the Progress Control Panel options and scroll to **Nuget Settings**. Enter your Telerik credentials and click `Save and Close` button.
77
+
1.If you miss to set up the Nuget Feed on login, go to the Progress Control Panel options and scroll to **Nuget Settings**. Enter your Telerik credentials and click the **Save and Close** button.
68
78
69
79
70
80
71
-
## Adding the NuGet Package
81
+
## Add the NuGet Package
72
82
73
83
1. Open the NuGet Package Manager.
74
84
75
85
76
86
77
-
1. Add a new [package source](https://docs.microsoft.com/en-us/nuget/tools/package-manager-ui#package-sources) to https://nuget.telerik.com/nuget.
78
-
79
-
80
-
81
-
1. From the package source drop-down, select **Telerik Source** and add your credentials (telerik.com email and password) as prompted.
82
-
83
-
87
+
1. From the **Package source** drop-down, select the Telerik NuGet source.
84
88
85
89
1. Click the **Browse** tab and search for `Telerik.UI.for.AspNet.Core` to install it. As a result, a line similar to `<PackageReference Include="Telerik.UI.for.AspNet.Core" Version="{{ site.mvcCoreVersion }}" />` is added to your `.csproj` file.
86
90
87
91
88
92
89
-
## Adding reference to Kendo.Mvc.UI
93
+
## Add a Reference to Kendo.Mvc.UI
90
94
91
95
1. Open the `Startup.cs` file and register the Kendo UI services in the `ConfigureServices` method.
92
96
@@ -104,32 +108,64 @@ Note that when the Nuget Feed is added to Visual Studio through the Progress Tri
104
108
@addTagHelper *, Kendo.Mvc
105
109
@using Kendo.Mvc.UI
106
110
107
-
## Including the Telerik UI for ASP.NET Core client-side resources
111
+
## Include the Telerik UI for ASP.NET Core Client-Side Resources
108
112
109
-
1. Include the client-side resources.
113
+
>**Note**
114
+
>
115
+
>* The CDN links and/or package versions have to point to the same UI for ASP.NET Core version that your project references.
116
+
>* The Kendo UI scripts have to be placed after `jQuery`.
110
117
111
-
> * The CDN links and/or package versions have to point to the same UI for ASP.NET Core version which your project references.
112
-
> * The Kendo UI scripts have to be placed after `jQuery`.
118
+
Before you can use a Telerik UI component, you must include the theme, the jQuery script, and the Kendo UI scripts:
113
119
114
-
7.1 Go to `~\Views\Shared\_Layout.cshtml` and add the theme of your choice to the `<head>` of the document. Since the Microsoft project uses Bootstrap, you can use the Kendo UI SASS Bootstrap v4 theme to match it.
120
+
1. Go to `~\Views\Shared\_Layout.cshtml` and add the theme of your choice to the `<head>` of the document. Since the Microsoft project uses Bootstrap, you can use the Kendo UI SASS Bootstrap v4 theme to match it:
115
121
116
-
7.2 The Microsoft ASP.NET Core Web Application template comes with a jQuery script reference at the end of _Layout.cshtml file. Find it and remove it. The Kendo UI script files required by UI for ASP.NET Core must be loaded in the `<head>` tag after the `jQuery` script.
7.3 Copy and paste the scripts from the snippet bellow to the `<head>` tag in the _Layout. The content of the `<head>` tag with the theme file and the script files included should look as shown in the snippet below. `kendo.all.min.js` and `kendo.aspnetmvc.min.js` script files have to be loaded after the `jquery.min.js` script. `jQuery` should be loaded only once in the `<head>` tag. Make sure there are no duplicate references elsewhere in the _Layout.
1. The Microsoft ASP.NET Core Web Application template comes with a jQuery script reference at the end of _Layout.cshtml file. Find the `jquery.min.js` script line in the `<body>` of the document and remove it.
133
+
134
+
1. Add the `jQuery` script hosted on the Telerik CDN:
Copy file name to clipboardExpand all lines: docs-aspnet/introduction.md
+5-3Lines changed: 5 additions & 3 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -16,11 +16,13 @@ position: 1
16
16
17
17
Thank you for choosing Progress<sup>®</sup> Telerik<sup>®</sup> {{ site.product_short }}!
18
18
19
-
[{{ site.product }}](https://www.telerik.com/{{ telerik_product_url }}) is a set of server-side wrappers (HTML{% if site.core %} and Tag{% endif %} helpers) that allow you to use the Kendo UI widgets in .NET {{ site.framework_short }}. From a client-side point of view, the vanilla HTML/JavaScript Kendo UI widgets and their {{ site.framework }} helpers represent the same functionalities and provide the same capabilities.
19
+
[{{ site.product }}](https://www.telerik.com/{{ telerik_product_url }}) is a set of server-side wrappers that bring the [HTML/JavaScript Kendo UI widgets](https://docs.telerik.com/kendo-ui/introduction) to .NET {{ site.framework_short }}. Our server-side wrappers come in the form of HTML{% if site.core %} and Tag{% endif %} helpers.
20
+
From client-side perspective, the vanilla HTML/JavaScript Kendo UI widgets and their {{ site.framework }} server-side wrappers represent the same functionalities and provide the same capabilities.
20
21
21
22
The {{ site.product }} HTML{% if site.core %} and Tag{% endif %} helpers:
22
-
* Allow you to configure a Kendo UI widget through the C# or VB.NET code—for example, to set its value, data source, and so on.
23
-
* Render the HTML and JavaScript that are needed to initialize a Kendo UI widget whose options propagate to the client-side through its initialization script.
23
+
* Allow you to configure a Kendo UI widget through C# or VB.NET code—for example, to set its value, data source, and so on.
24
+
* Render the HTML and JavaScript that are needed to initialize a Kendo UI widget.
25
+
* Propagate the widget’s options to the client-side through its initialization script.
24
26
25
27
To read more about the benefits of using {{ site.product }}, please visit the {% if site.core %}[product overview page](https://www.telerik.com/aspnet-core-ui){% else %}[product overview page](https://www.telerik.com/aspnet-mvc){% endif %}.
0 commit comments