Kendo UI Web 和 Kendo UI ASP.NET for MVC 之间的区别

Posted 2023-05-07

【中文标题】Kendo UI Web 和 Kendo UI ASP.NET for MVC 之间的区别

【英文标题】：Difference between Kendo UI Web and Kendo UI ASP.NET for MVC

【发布时间】：2013-10-18 23:36:04

【问题描述】：

通过 Visual Studio 创建 MVC 项目时，会使用“.cshtml”文件创建视图。

KendoUI Server Wrappers 在 View 中有一个模型，而 KendoUI Web 不仅没有任何模型，而且没有“.cshtml”文件；只有 HTML。 HTML 似乎只是指向用于数据检索/更新的数据源，而 KendoUI 服务器包装器需要一个模型来传递给控制器​​以进行相同类型的操作。

两者有什么区别？我只是不了解 KendoUI Web 概念以及它是如何工作的。自适应渲染如何创建“.cshtml”文件的多个副本以在特定设备上渲染。 KendoUI Web 是如何实现的？

您还可以使用 KendoUI Web 工具集（其名称不会更改）的选择器来使用 jQuery，而不是使用 KendoUI Server Wrappers。您只是不知道 KendoUI 服务器包装器中的 jQuery 选择器是什么。

我发现很难针对 KendoUI 服务器包装器进行编程（即使它们应该更容易和更快地实现），因为特定扩展需要处理不同的事件并且不知道选择器的名称是。 KendoUI Web 工具集似乎并非如此。

【参考方案1】：

简单地说，Kendo UI Web 对任何可以支持 javascript/jQuery 的框架开放，但 Kendo UI Server Wrappers/Kendo UI ASP.NET for MVC > 仅适用于 ASP.NET MVC 项目。

使用 Kendo UI Web 需要大量额外的编码和处理，而 MVC 版本对开发人员更友好，更易于维护。如果您正在处理 ASP.NET MVC 项目，那么您可以使用服务器包装器简化编码。

Kendo UI web 可以免费使用，而服务器包装器（用于 ASP.NET MVC 的 Kendo UI）需要每个开发人员付费许可。

剑道网格的代码差异的简单示例如下：

使用服务器包装器

@model IEnumerable<Kendo.Mvc.Examples.Models.ProductViewModel>

@(Html.Kendo().Grid(Model)    
    .Name("Grid")
    .Columns(columns =>
    
        columns.Bound(p => p.ProductID).Groupable(false);
        columns.Bound(p => p.ProductName);
        columns.Bound(p => p.UnitPrice);
        columns.Bound(p => p.UnitsInStock);
    )
    .Groupable()
    .Pageable()
    .Sortable()
    .Scrollable()
    .Filterable()
    .DataSource(dataSource => dataSource
        .Ajax()
        .Read(read => read.Action("Products_Read", "Grid"))
    )
)

与 Kendo UI Web

<script>
    $(document).ready(function() 
        $("#grid").kendoGrid(
            dataSource: 
                data: createRandomData(50),
                pageSize: 10
            ,
            groupable: true,
            sortable: true,
            pageable: 
                refresh: true,
                pageSizes: true
            ,
            columns: [ 
                field: "FirstName",
                width: 90,
                title: "First Name"
             , 
                field: "LastName",
                width: 90,
                title: "Last Name"
             , 
                width: 100,
                field: "City"
             , 
                field: "Title"
             , 
                field: "BirthDate",
                title: "Birth Date",
                template: '#= kendo.toString(BirthDate,"dd MMMM yyyy") #'
             , 
                width: 50,
                field: "Age"
             ]
        );
    );
</script>

您可以查看渲染的网格here。

有关server wrappers 和Kendo UI Web 的更多详细信息。

【讨论】：

我已经使用服务器包装器完成了一个生产项目。但是，我发现困难的是当您需要使用服务器包装器处理事件时（例如 OnItemDataBound 用于网格检查每条记录并对其进行处理等）。所有示例均使用 KendoUI Web。此外，我不知道如何使用 jquery 对 mvc 包装器对象做任何事情，因为我不知道选择器名称是什么。使用 KendoUI 网络，您实际上为扩展命名并知道它是什么。关于如何使用服务器包装器了解扩展选择器的任何建议？

demos.kendoui.com/web/grid/events.html docs.kendoui.com/api/web/grid#events 如果您有具体问题，很容易为您提供帮助

【参考方案2】：

嗯，HaBo 基本上都说了。服务器包装器非常适合那些（像我一样）在编码时喜欢“懒惰”的人。我更喜欢用包装器做事的流利方式，而不是纯 javascript 方式。

也就是说，您应该牢记 KendoUI MVC 包装器并不是灵丹妙药。如果您不了解 javascript，您可能会发现自己对使用 KendoUI 框架可以做什么感到茫然。

对我来说，我一直在使用包装器和 javascript（例如，使用“事件”）来做更多“高级”事情之间找到平衡。 :)

【参考方案3】：

我知道这是一个相当老的问题，但我认为我的回答会增加价值（因为它包含更新的信息）。

Telerik 的文档中有 this page 很好地解释了 Kendo-UI 与其服务器端包装器（尤其是 ASP.NET MVC 包装器）之间的比较。

另外，关于选择器名称，实际上包装器要求您指定一个名称（将呈现为元素的id 属性）。 Telerik 的文档和论坛也有一些必要的 CSS 选择器，您可以在必要时使用 CSS。你只需要用谷歌搜索它。例如，here 是您可以找到 CSS 选择器以修改 Kendo Grid 标头行为的页面。

希望对你有帮助