在.Net Core 2.1上的Kendo ListView问题

Question

我在.Net Core 2.1上使用Kendo ListView，问题是以下行中的HTML标记

@(Html.Kendo().ListView<CheckedListViewApp.Models.ProductViewModel>()

错误信息

Severity    Code    Description Project File    Line    Suppression State
Error   CS1061  'IHtmlHelper<dynamic>' does not contain a definition for 'Kendo' and no accessible extension method 'Kendo' accepting a first argument of type 'IHtmlHelper<dynamic>' could be found (are you missing a using directive or an assembly reference?)  CheckedListViewApp  C:\Users\Lenovo-PC\Documents\Visual Studio 2017\Projects\CheckedListViewApp\CheckedListViewApp\Views\Home\Index.cshtml  12  Active

我在_ViewImports.cshtml中定义了Kendo.Mvc

 @addTagHelper *, Kendo.Mvc

完整代码

<script type="text/x-kendo-tmpl" id="template">
    <div class="product">
        <img src="@Url.Content("~/shared/web/foods/")#:ProductID#.jpg" alt="#:ProductName# image" />
        <h3>#:ProductName#</h3>
        <p>#:kendo.toString(UnitPrice, "c")#</p>
    </div>
</script>
<div class="demo-section k-content wide">
    @(Html.Kendo().ListView<CheckedListViewApp.Models.ProductViewModel>()
            .Name("listView")
            .TagName("div")
            .ClientTemplateId("template")
            .DataSource(dataSource => dataSource
                    .Ajax()
                    .Read(read => read.Action("Products_Read", "ListView"))
                    .PageSize(21)
                )
                .Pageable(pageable => pageable
                   .Refresh(true)
                   .ButtonCount(5)
                   .PageSizes(new[] { 5, 15, 21 })
                )
    )
</div>

<style>
    #listView {
        padding: 10px 5px;
        margin-bottom: -1px;
        min-height: 510px;
        /* Avoid cutout if font or line is bigger */
        font: inherit;
    }

    .product {
        float: left;
        position: relative;
        width: 111px;
        height: 170px;
        margin: 0 5px;
        padding: 0;
    }

        .product img {
            width: 110px;
            height: 110px;
        }

        .product h3 {
            margin: 0;
            padding: 3px 5px 0 0;
            max-width: 96px;
            overflow: hidden;
            line-height: 1.1em;
            font-size: .9em;
            font-weight: normal;
            text-transform: uppercase;
            color: #999;
        }

        .product p {
            visibility: hidden;
        }

        .product:hover p {
            visibility: visible;
            position: absolute;
            width: 110px;
            height: 110px;
            top: 0;
            margin: 0;
            padding: 0;
            line-height: 110px;
            vertical-align: middle;
            text-align: center;
            color: #fff;
            background-color: rgba(0,0,0,0.75);
            transition: background .2s linear, color .2s linear;
            -moz-transition: background .2s linear, color .2s linear;
            -webkit-transition: background .2s linear, color .2s linear;
            -o-transition: background .2s linear, color .2s linear;
        }

    .k-listview:after {
        content: ".";
        display: block;
        height: 0;
        clear: both;
        visibility: hidden;
    }
</style>

有谁知道问题在哪里？

Answer 1

按照以下步骤解决问题：1-打开NuGet包管理器。

2-单击“浏览”选项卡，选择Telerik软件包源并搜索Telerik.UI.for.AspNet.Core。

3-安装Telerik.UI.for.AspNet.Core包。它为.csproj文件添加了一行，类似于以下示例。

<PackageReference Include="Telerik.UI.for.AspNet.Core" Version="2019.1.115" />

4-打开Startup.cs并按以下方式更新它：

在顶部添加使用Newtonsoft.Json.Serialization行。

using Newtonsoft.Json.Serialization;

找到ConfigureServices方法并添加调用。

public void ConfigureServices(IServiceCollection services)
{

    // Maintain property names during serialization. See:
    // https://github.com/aspnet/Announcements/issues/194
    services
        .AddMvc().SetCompatibilityVersion(CompatibilityVersion.Version_2_1)
        .AddJsonOptions(options =>
            options.SerializerSettings.ContractResolver = new DefaultContractResolver());

    // Add Kendo UI services to the services container
    services.AddKendo();
}

如果您使用的是R2 2018之前的版本，请找到Configure方法并在结尾处添加对app.UseKendo的调用。

public void Configure(IApplicationBuilder app, IHostingEnvironment env)
{
    //If using versions older than R2 2018, configure Kendo UI
    app.UseKendo(env);
}

5-通过@using Kendo.Mvc.UI导入〜/ Views / _ViewImports.cshtml中的Kendo.Mvc.UI命名空间。

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

6-包括Kendo UI客户端资源。

7-通过将以下示例中的代码段添加到〜/ Views / Home / Index.cshtml，使用Kendo UI小部件。

<h2>Kendo UI DatePicker</h2>

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

就这样