学习时使用的是VS2017+Core2.1了,不再讨论VS2015和core1.1的东西。

配置ASP.NET Core Web应用程序以使用Telerik UI for ASP.NET Core:

第一步:创建ASP.NET Core Web应用程序。

本文演示如何配置ASP.NET Core项目以在Visual Studio(VS)2017中使用Telerik UI for ASP.NET Core。

本文演示如何配置ASP.NET Core项目以在Visual Studio(VS)2017中使用Telerik UI for ASP.NET Core。

 

第二步:添加Kendo UI NuGet包。

本文演示如何配置ASP.NET Core项目以在Visual Studio(VS)2017中使用Telerik UI for ASP.NET Core。

因为我们是本地安装,所以建立一个源

本文演示如何配置ASP.NET Core项目以在Visual Studio(VS)2017中使用Telerik UI for ASP.NET Core。

默认源路径(以安装路径为准):C:\Program Files (x86)\Progress\Telerik UI for ASP.NET Core R2 2018\wrappers\aspnetcore\Binaries\AspNet.Core

本文演示如何配置ASP.NET Core项目以在Visual Studio(VS)2017中使用Telerik UI for ASP.NET Core。

 

其实就做了一件事,就是在.csproj  文件中添加了一行引用代码,当然你可以不用以上操作,直接在该文件中添加一下代码也是可以的。

本文演示如何配置ASP.NET Core项目以在Visual Studio(VS)2017中使用Telerik UI for ASP.NET Core。

.csproj 文件的打开方法

 本文演示如何配置ASP.NET Core项目以在Visual Studio(VS)2017中使用Telerik UI for ASP.NET Core。

修改Startup.cs文件

 修改ConfigureServices方法

 public void ConfigureServices(IServiceCollection services)
        {
            services.Configure<CookiePolicyOptions>(options =>
            {
                // This lambda determines whether user consent for non-essential cookies is needed for a given request.
                options.CheckConsentNeeded = context => true;
                options.MinimumSameSitePolicy = SameSiteMode.None;
            });


            services.AddMvc().SetCompatibilityVersion(CompatibilityVersion.Version_2_1)
                .AddJsonOptions(options =>
                options.SerializerSettings.ContractResolver = new DefaultContractResolver());
            // Add Kendo UI services to the services container
            services.AddKendo();
        }

需要添加引用:using Newtonsoft.Json.Serialization;

修改Configure方法(这个方法自2018R2开始过时了,可以不用写)

public void Configure(IApplicationBuilder app, IHostingEnvironment env, ILoggerFactory loggerFactory)
{
    ...

    // Configure Kendo UI
    app.UseKendo(env);
}

将 Kendo.Mvc.UI 命名空间导入 文件~/Views/_ViewImports.cshtml ,使用指令:@using Kendo.Mvc.UI.

@using KendoUiTest
@using KendoUiTest.Models
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
@addTagHelper *, Kendo.Mvc
@using Kendo.Mvc.UI

复制Kendo UI客户端资源。

手动安装 - 要手动安装资源,请将teles.ui.for.aspnet mvc安装目录中的js和styles 夹复制到wwwroot \ lib \ kendo-ui

本文演示如何配置ASP.NET Core项目以在Visual Studio(VS)2017中使用Telerik UI for ASP.NET Core。

我个人更觉得再加一级版本号目录就好了

本文演示如何配置ASP.NET Core项目以在Visual Studio(VS)2017中使用Telerik UI for ASP.NET Core。

方便以后手动升级,毕竟肯定要手动升级,新版本放在新目录里,方便测试回滚吧,比较土的方法。

在〜/ Views / Shared / _Layout.cshtml中注册Kendo UI样式和脚本。

重要说明:在默认的.NET Core模板中,jQuery脚本包含在<body>元素的末尾。 要正确加载ASP.NET HtmlHelpers的Telerik UI,请将jQuery脚本和Kendo UI客户端脚本移动到<head>元素,并确保在jQuery之后加载Kendo UI脚本。

 _Layout.cshtml文件

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>@ViewData["Title"] - KendoUiTest</title>

    <environment include="Development">
        <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.css" />
        <link rel="stylesheet" href="~/css/site.css" />
        <link rel="stylesheet" href="~/lib/kendo-ui/2018.2.260/styles/kendo.common-nova.min.css" />
        <link rel="stylesheet" href="~/lib/kendo-ui/2018.2.260/styles/kendo.nova.min.css" />
    </environment>
    <environment exclude="Development">
        <link rel="stylesheet" href="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.7/css/bootstrap.min.css"
              asp-fallback-href="~/lib/bootstrap/dist/css/bootstrap.min.css"
              asp-fallback-test-class="sr-only" asp-fallback-test-property="position" asp-fallback-test-value="absolute" />
        <link rel="stylesheet" href="~/css/site.min.css" asp-append-version="true" />
        <link rel="stylesheet"
              href="~/lib/kendo-ui/2018.2.260/styles/kendo.common-nova.min.css"
              asp-fallback-href="~/lib/kendo-ui/2018.2.260/styles/kendo.common-nova.min.css"
              asp-fallback-test-class="k-common-test-class"
              asp-fallback-test-property="opacity" asp-fallback-test-value="0" />

        <link rel="stylesheet"
              href="~/lib/kendo-ui/2018.2.260/styles/kendo.nova.min.css"
              asp-fallback-href="~/lib/kendo-ui/2018.2.260/styles/kendo.nova.min.css"
              asp-fallback-test-class="k-theme-test-class"
              asp-fallback-test-property="opacity" asp-fallback-test-value="0" />
    </environment>
    <environment include="Development">
        <script src="~/lib/jquery/dist/jquery.js"></script>

        @* Place Kendo UI scripts after jQuery *@
        <script src="~/lib/kendo-ui/2018.2.260/js/kendo.all.min.js"></script>
        <script src="~/lib/kendo-ui/2018.2.260/js/kendo.aspnetmvc.min.js"></script>
    </environment>
    <environment exclude="Development">
        ...

        <script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-2.2.0.min.js"
                asp-fallback-src="~/lib/jquery/dist/jquery.min.js"
                asp-fallback-test="window.jQuery"
                crossorigin="anonymous"
                integrity="sha384-K+ctZQ+LL8q6tP7I94W+qzQsfRV2a+AfHIi9k8z8l9ggpc8X+Ytst4yBo/hH+8Fk">
        </script>

        @*  Place Kendo UI scripts after jQuery *@
        <script src="~/lib/kendo-ui/2018.2.260/js/kendo.all.min.js"
                asp-fallback-src="~/lib/kendo-ui/2018.2.260/js/kendo.all.min.js"
                asp-fallback-test="window.kendo">
        </script>
        <script src="~/lib/kendo-ui/2018.2.260/js/kendo.aspnetmvc.min.js"
                asp-fallback-src="~/lib/kendo-ui/2018.2.260/js/kendo.aspnetmvc.min.js"
                asp-fallback-test="kendo.data.transports['aspnetmvc-ajax']">
        </script>
    </environment>
</head>
<body>
   
        @RenderBody()
 

    @RenderSection("Scripts", required: false)
</body>
</html>

通过将以下示例中的代码段添加到〜/ Views / Home / Index.cshtml,演示使用Kendo UI DatePicker组件。

Index.cshtml文件(替换掉默认的代码,否则可能导致样式或js不起作用)

@{
    ViewData["Title"] = "Home Page";
}
<h2>Kendo UI DatePicker</h2>

@(Html.Kendo().DatePicker()
      .Name("datepicker")
      )

运行网站,查看效果

本文演示如何配置ASP.NET Core项目以在Visual Studio(VS)2017中使用Telerik UI for ASP.NET Core。

测试完成。

关于:Copy Kendo UI Client Resources through NPM and Webpack(通过NPM和Webpack复制Kendo UI客户端资源)

请移步原网站查看:https://docs.telerik.com/aspnet-core/getting-started/getting-started

 

相关文章:

  • 2021-05-12
  • 2021-05-07
  • 2022-12-23
  • 2021-10-02
  • 2022-12-23
猜你喜欢
  • 2021-11-03
  • 2022-12-23
  • 2022-02-09
  • 2021-06-23
  • 2021-04-06
  • 2022-12-23
  • 2021-09-07
相关资源
相似解决方案