Question

我有一个看起来像这样的控制器：

using System.Collections.Generic;
using System.Web.Mvc;

using Kendo.Mvc.Extensions;
using Kendo.Mvc.UI;

namespace KendoMvcApplication.Controllers
{
    public class HomeController : Controller
    {
        public ActionResult Index()
        {
            return View();
        }

        public ActionResult GetData([DataSourceRequest] DataSourceRequest req)
        {
            var products = CreateProducts();
            var result = products.ToDataSourceResult(req);
            return Json(result);
        }     

        private static IEnumerable<Product> CreateProducts()
        {
            for (int i = 1; i <= 20; i++)
            {
                yield return new Product
                {
                    ProductId = i,
                    ProductName = "Product " + i,
                    ProductPrice = i * 2.5
                };
            }
        }
    }

    public class Product
    {
        public int ProductId { get; set; }
        public string ProductName { get; set; }
        public double ProductPrice { get; set; }
    }
}

一个看起来像这样的观点：

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8" />
    <link href="~/Content/kendo.common.min.css" rel="stylesheet" />
    <link href="~/Content/kendo.default.min.css" rel="stylesheet" />
    <script type="text/javascript" src="~/Scripts/require.js"></script>
</head>
<body>            
<div id="grid"></div>
<script type="text/javascript">            
    require.config({
        baseUrl : '@Url.Content("~/Scripts")',
        paths: {
            'jquery': 'jquery-2.0.3.min',
            'kendo': 'kendo-ui'
        },
        shim: {
            'jquery': {
                exports: 'jQuery'
            }
        }            
    });           
    require(['jquery', 'kendo/kendo.grid.min'], function ($) {
        $(document).ready(function () {
            $('#grid').kendoGrid({
                dataSource: {
                    schema: {
                        data: 'Data',
                        total: 'Total',
                        aggregates: 'AggregateResults',
                        model: {
                            id: "ProductId",
                            fields: {
                                ProductName: { type: "string" },
                                ProductPrice: { type: "number" }
                            }
                        }
                    },
                    transport: {
                        read: {
                            url: "@Url.Action("GetData", "Home")",
                            dataType: "json",
                            method: "post"
                        }
                    },
                    pageSize: 10,
                    serverPaging: true,
                    serverSorting: true,
                    type: "aspnetmvc-ajax"
                },
                sortable: {
                    mode: "single"
                },
                columns: ["ProductName", "ProductPrice"],
                scrollable: false,
                pageable: true
            });
        });            
    });
</script>
</body>
</html>

我的目录结构是：

Scripts / kendo-ui / *（所有剑道文件，包括mvc文件）
脚本/ require.js
脚本/ jQuery的2.0.3.min.js

几乎的工作原理除了服务器端排序没有得到应用。

这是因为永远不会下载 kendo.aspnet.mvc.min.js 文件（当然，因为JS对此一无所知）所以为了解决这个问题，我尝试了这个：

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8" />
    <link href="~/Content/kendo.common.min.css" rel="stylesheet" />
    <link href="~/Content/kendo.default.min.css" rel="stylesheet" />
    <script type="text/javascript" src="~/Scripts/require.js"></script>
</head>
<body>            
<div id="grid"></div>
<script type="text/javascript">
    require.config({
        baseUrl: '@Url.Content("~/Scripts")',
        paths: {
            'jquery': 'jquery-2.0.3.min',
            'kendo': 'kendo-ui',
            'kendo-mvc': 'kendo/kendo.aspnetmvc.min'
        },
        shim: {
            'jquery': {
                exports: 'jQuery'
            }
        }
    });
    require(['jquery', 'kendo-mvc', 'kendo/kendo.grid.min'], function ($) {
        $(document).ready(function () {
            $('#grid').kendoGrid({
                dataSource: {
                    schema: {
                        data: 'Data',
                        total: 'Total',
                        aggregates: 'AggregateResults',
                        model: {
                            id: "ProductId",
                            fields: {
                                ProductName: { type: "string" },
                                ProductPrice: { type: "number" }
                            }
                        }
                    },
                    transport: {
                        read: {
                            url: "@Url.Action("GetData", "Home")",
                            dataType: "json",
                            method: "post"
                        }
                    },
                    pageSize: 10,
                    serverPaging: true,
                    serverSorting: true,
                    type: "aspnetmvc-ajax"
                },
                sortable: {
                    mode: "single"
                },
                columns: ["ProductName", "ProductPrice"],
                scrollable: false,
                pageable: true
            });
        });
    });
</script>
</body>
</html>

但是这产生了这个错误：

split configuration error

并尝试加载js文件：

try 1 files

找不到404红点，因为它正在脚本文件夹下的名为kendo的文件夹中查找js文件。

那么我想我会尝试包含所有版本，所以我尝试了这个：

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8" />
    <link href="~/Content/kendo.common.min.css" rel="stylesheet" />
    <link href="~/Content/kendo.default.min.css" rel="stylesheet" />
    <script type="text/javascript" src="~/Scripts/require.js"></script>
</head>
<body>            
<div id="grid"></div>
<script type="text/javascript">
    require.config({
        baseUrl: '@Url.Content("~/Scripts")',
        paths: {
            'jquery': 'jquery-2.0.3.min',
            'kendo': 'kendo-ui/kendo.all.min',
            'kendo-mvc': 'kendo-ui/kendo.aspnetmvc.min'
        },
        shim: {
            'jquery': {
                exports: 'jQuery'
            }
        }
    });
    require(['jquery', 'kendo', 'kendo-mvc'], function ($) {
        $(document).ready(function () {
            $('#grid').kendoGrid({
                dataSource: {
                    schema: {
                        data: 'Data',
                        total: 'Total',
                        aggregates: 'AggregateResults',
                        model: {
                            id: "ProductId",
                            fields: {
                                ProductName: { type: "string" },
                                ProductPrice: { type: "number" }
                            }
                        }
                    },
                    transport: {
                        read: {
                            url: "@Url.Action("GetData", "Home")",
                            dataType: "json",
                            method: "post"
                        }
                    },
                    pageSize: 10,
                    serverPaging: true,
                    serverSorting: true,
                    type: "aspnetmvc-ajax"
                },
                sortable: {
                    mode: "single"
                },
                columns: ["ProductName", "ProductPrice"],
                scrollable: false,
                pageable: true
            });
        });
    });
</script>
</body>
</html>

但是这产生了这些错误：

ASP NET MVC Errors

并尝试加载js文件：

case 2 files

在这种情况下 - 找不到404红点，因为它正在Scripts文件夹下直接查找文件。

所以这是我的问题：

如何在require JS类型场景中包含所述文件？

除了：我想使用kendo.all.min文件，而不是单独的文件，因为我希望将来使用knockout-kendo，这似乎不适用于单独的文件，但如果使这项工作的唯一方法是使用单独的文件方法，这很好。

Answer 1

我花了一段时间才能让你的代码正常工作，但是在我一点点摆弄它之后，我设法让你的原始代码只需稍加改动即可进行排序。

我唯一更改的是在require行中我也添加了mvc文件。然后所有的路径都变得正确，一切都很顺利。

['jquery', 'kendo/kendo.grid.min', 'kendo/kendo.aspnetmvc.min']

在我的代码中，我使用了“用于ASP.NET MVC Q2 2013的Kendo UI”和该软件包中包含的jQuery.min.js文件。然后完整的View代码变为：

<script type="text/javascript">            
  require.config({
    baseUrl : '@Url.Content("~/Scripts")',
    paths: {
        'jquery': 'jquery-2.0.3.min',
        'kendo': 'kendo-ui'
    },
    shim: {
        'jquery': {
            exports: 'jQuery'
        }
    }            
  });           
  require(['jquery', 'kendo/kendo.grid.min', 'kendo/kendo.aspnetmvc.min'], function ($) {
    $(document).ready(function () {
        $('#grid').kendoGrid({
            dataSource: {
                schema: {
                    data: 'Data',
                    total: 'Total',
                    aggregates: 'AggregateResults',
                    model: {
                        id: "ProductId",
                        fields: {
                            ProductName: { type: "string" },
                            ProductPrice: { type: "number" }
                        }
                    }
                },
                transport: {
                    read: {
                        url: "@Url.Action("GetData", "Home")",
                        dataType: "json",
                        method: "post"
                    }
                },
                pageSize: 10,
                serverPaging: true,
                serverSorting: true,
                type: "aspnetmvc-ajax"
            },
            sortable: {
                mode: "single"
            },
            columns: ["ProductName", "ProductPrice"],
            scrollable: false,
            pageable: true
        });
    });            
  });
</script>

我希望它也适用于您的代码。

Answer 2

让我们尝试从最小的工作版本构建。你说你在目录中有以下内容：

Scripts / kendo-ui / *（所有剑道文件，包括mvc文件）
脚本/ require.js
脚本/ jQuery的2.0.3.min.js

要加载所有依赖项，您可以尝试这样的事情：

<html>
<body>
<script type="text/javascript" src="~/Scripts/require.js"></script>
<script type="text/javascript">
    require.config({
        baseUrl: '@Url.Content("~/Scripts")',
        paths: {
            'jquery': 'jquery-2.0.3.min',
            'kendo': 'kendo-ui/kendo.all.min',
            'kendo-mvc': 'kendo-ui/kendo.aspnetmvc.min'
        },
        shim: {
            'jquery': {
                exports: 'jQuery'
            },
            'kendo-mvc' : {
                deps: ['kendo'] //kendo needs to be loaded before kendo-mvc?
            }
        }
    });
    require(['jquery', 'kendo', 'kendo-mvc'], function ($) {
    });
</script>
</body>
</html>

我把它放在jsFiddle中，但遇到了许多问题（Kendo实际上需要jQuery 1.9.0等），你可以自己解决。

关键似乎是您的上一个版本正在加载kendo.data，kendo.combobox以及其他未在任何地方引用的其他文件。找出这些请求的来源将有助于解决这个谜团。

<强>更新：这是一种可能性。如果kendo-mvc正在加载这样的依赖：

["./kendo.data.min","./kendo.combobox.min","./kendo.multiselect.min","./kendo.‌validator.min"]

然后它可能会失败，因为RequireJS会查找相对于模块名称的依赖项，该名称已被别名为kendo-mvc。让我们尝试不重命名它（见下文），看看是否有效：

<script type="text/javascript">
    require.config({
        baseUrl: '@Url.Content("~/Scripts")',
        paths: {
            'jquery': 'jquery-2.0.3.min',
            'kendo-ui/kendo': 'kendo-ui/kendo.all.min',
            'kendo-ui/kendo-mvc': 'kendo-ui/kendo.aspnetmvc.min'
        },
...
    require(['jquery', 'kendo-ui/kendo', 'kendo-ui/kendo-mvc'], function ($) {
    });

如何使用需要js的Kendo UI MVC扩展？

2 个答案: