如何将Kendo UI MVC扩展与require js一起使用？

debugcn 发表于 Dev

平方千米

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

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>

我的目录结构是：

脚本/ kendo-ui / *（所有的kendo文件，包括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>

但这产生了这个错误：

分割配置错误

并尝试加载js文件，从而：

尝试1个文件

在脚本文件夹下的kendo文件夹中寻找js文件时，找不到红色斑点404。

所以后来我想我会尝试包括所有版本，所以我尝试了这个：

<!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错误

并尝试加载js文件，从而：

案例2档案

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

所以这是我的问题：

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

另外：我想使用kendo.all.min文件，而不要使用单独的文件，因为将来我想使用基因敲除kendo，这似乎不适用于单独的文件，但是如果要这样做的话，这是唯一的方法是使用单独的文件方法，那很好。

奥林

我花了一段时间才能使您的代码正常工作，但经过一番摆弄之后，我设法对排序进行了修改，而您的原始代码只做了很小的更改。

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

['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>