2022-06-28 12:00:00 By Winston 1234

Telerik Kendo｜ASP.NET MVC adding with Nuget

Prerequisites

.NET Framework.
Visual Studio 2012 or later.
Telerik Account

Adding the Telerik NuGet Feed for Trial License Users

PS: 如果是試用，建議單純下載 jquery trial 試用包，再 reference 至自已的專案，日後可直接安裝正式版即可，減少升級問題的可能性。

最簡單新增 NuGet feed 的方式，可以透過 Kendo Installer 的 UI 界面進行操作。
下載 ASP.NET free trial installer
並在安裝畫面勾選 Set up Telerik NuGet package source

Adding the Telerik NuGet Feed for Users with Commercial License

如果是正式版用戶，一樣在登入 kendo account 後，進入到 overview 頁面，下載 installer。

您可以在登入頁面勾選 Set up Telerik NuGet package source，或是在登入後，至 Options 頁面進行設定。

Installing the NuGet Package

新增一個 MVC 專案
右鍵點選 Manage NuGet Packages for Solution
Package source 選擇 nuget.telerik.com，並點擊 Browse
選擇 Telerik.UI.for.AspNet.Mvc5

PS: 安裝成功，會新增一個 reference 為 Kendo.Mvc.dll assembly，包含了 Telerik UI for ASP.NET MVC helpers，並更新 web.config。

Including the Client-Side Resources

新增 jquery、kendo theme、kendo js 至您的前端程式中。

1. 在 ~\Views\Shared\_Layout.cshtml 中新增 Kendo UI theme 在 <head> 中.

<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>@ViewBag.Title - My ASP.NET Application</title>
@Styles.Render("~/Content/css")
@Scripts.Render("~/bundles/modernizr")
@* Add the Kendo SASS Bootstrap theme: *@
<link href="https://kendo.cdn.telerik.com/2022.2.621/styles/kendo.bootstrap-main.min.css" rel="stylesheet" type="text/css" />
</head>

2. 如果在 _Layout.cshtml 中有發現 @Scripts.Render("~/bundles/jquery")，請將之刪除。該 jquery script 包含了 Microsoft ASP.NET Web Application template，因為接下來會新增 Telerik 所提供的 jquery 相關 script，如此可避免未預期的狀況發生。

3. 新增由 Telerik CDN 所提供的 jQuery script 至 <head>。

<head>
...
<link href="https://kendo.cdn.telerik.com/2022.2.621/styles/kendo.bootstrap-main.min.css" rel="stylesheet" type="text/css" />
@* Add the jQuery script from the Telerik CDN: *@
<script src="https://kendo.cdn.telerik.com/2022.2.621/js/jquery.min.js"></script>
</head>

4. 新增 Kendo UI scripts，其中 ASP.NET MVC 的 script 必需要在最後一個引入。

<head>
...
<link href="https://kendo.cdn.telerik.com/2022.2.621/styles/kendo.bootstrap-main.min.css" rel="stylesheet" type="text/css" />
<script src="https://kendo.cdn.telerik.com/2022.2.621/js/jquery.min.js"></script>
@* Add the Kendo UI scripts: *@
<script src="https://kendo.cdn.telerik.com/2022.2.621/js/jszip.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2022.2.621/js/kendo.all.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2022.2.621/js/kendo.aspnetmvc.min.js"></script>
</head>

5. 最後，新增專案中預設的 bootstrap.min.js 至 <head> 中，像是：

<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>@ViewBag.Title - My Telerik MVC Application</title>
@Styles.Render("~/Content/css")
@Scripts.Render("~/bundles/modernizr")
<link href="https://kendo.cdn.telerik.com/2022.2.621/styles/kendo.bootstrap-main.min.css" rel="stylesheet" type="text/css" />
<script src="https://kendo.cdn.telerik.com/2022.2.621/js/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2022.2.621/js/jszip.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2022.2.621/js/kendo.all.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2022.2.621/js/kendo.aspnetmvc.min.js"></script>
@* Add the bootstrap.min.js script: *@
<script src="@Url.Content("~/Scripts/bootstrap.min.js")"></script>
</head>