Asp.net mvc 如何将Kendo UI MVC扩展与require js一起使用？
我有一个控制器，看起来像这样：Asp.net mvc 如何将Kendo UI MVC扩展与require js一起使用？,asp.net-mvc,kendo-ui,requirejs,kendo-grid,kendo-asp.net-mvc,Asp.net Mvc,Kendo Ui,Requirejs,Kendo Grid,Kendo Asp.net Mvc,我有一个控制器，看起来像这样： 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
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>
<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>
["./kendo.data.min","./kendo.combobox.min","./kendo.multiselect.min","./kendo.validator.min"]
使用System.Collections.Generic；
使用System.Web.Mvc；
使用Kendo.Mvc.Extensions；
使用Kendo.Mvc.UI；
命名空间kendomvccapplication.Controllers
{
公共类HomeController:控制器
{
公共行动结果索引（）
{
返回视图（）；
}
公共操作结果GetData（[DataSourceRequest]DataSourceRequest请求）
{
var products=CreateProducts（）；
var结果=products.ToDataSourceResult（req）；
返回Json（结果）；
}
私有静态IEnumerable CreateProducts（）
{
对于（int i=1；i让我们尝试从最小的工作版本构建。您说过您在目录中有以下内容：
- Scripts/kendo ui/*（所有剑道文件，包括mvc文件）
- 脚本/require.js
- Scripts/jquery-2.0.3.min.js
要加载所有依赖项，可以尝试以下操作：
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>
<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>
["./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 ($) {
});
require.config({
baseUrl:“@Url.Content（“~/Scripts”）”，
路径：{
“jquery”：“jquery-2.0.3.min”，
“剑道ui/kendo”：“剑道ui/kendo.all.min”，
“剑道ui/kendo mvc”：“剑道ui/kendo.aspnetmvc.min”
},
...
require（['jquery'，'kendo ui/kendo'，'kendo ui/kendo mvc'，函数（$）{
});
我花了一段时间才让您的代码正常工作，但在对其进行了一点修改后，我设法使排序工作正常，只对您的原始代码进行了一点小小的更改
我唯一改变的是在require行添加了mvc文件，然后所有的路径都正确了，一切都很顺利
['jquery', 'kendo/kendo.grid.min', 'kendo/kendo.aspnetmvc.min']
在我的代码中，我将“Kendo UI for ASP.NET MVC 2013年第二季度”与包中包含的jQuery.min.js
文件一起使用。完整的视图代码变成：
<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>
require.config({
baseUrl:“@Url.Content（“~/Scripts”）”，
路径：{
“jquery”：“jquery-2.0.3.min”，
“剑道”：“剑道ui”
},
垫片：{
“jquery”：{
导出：“jQuery”
}
}
});
require（['jquery'，'kendo/kendo.grid.min'，'kendo/kendo.aspnetmvc.min'，函数（$）{
$（文档）.ready（函数（）{
$（“#网格”）.kendoGrid({
数据源：{
模式：{
数据：'数据'，
总计：'总计'，
聚合：“聚合结果”，
型号：{
id:“产品id”，
字段：{
产品名称：{type:“string”}，
ProductPrice:{type:“number”}
}
}
},
运输：{
阅读：{
url:“@url.Action（“GetData”、“Home”）”，
数据类型：“json”，
方法：“员额”
}
},
页面大小：10，
对,，
对,，
类型：“aspnetmvc ajax”
},
可排序：{
模式：“单一”
},
列：[“产品名称”、“产品价格”]，
可滚动：false，
可分页：正确
});
});
});
我希望它也能在您的代码中工作。在网络视图（Chrome developer tools，Firebug）中加载的脚本文件的顺序是什么？@Chris-我已经添加了网络顺序-红色点表示找不到404。谢谢。使用您的方法，我仍然可以在r kendo.data.min、combobox、multiselect和validator中找到404（与问题中的第二次尝试相同）。它直接在脚本目录下查找所有4个文件。我打开了kendo.aspnetmvc.min文件，可以看到这一位“（[”/kendo.data.min“，”/kendo.combobox.min“，”/kendo.multiselect.min“，”/kendo.validator.min“），function（）{'这看起来像是指定这些依赖项的定义。这让我有点困惑，因为这些文件与kendo.aspnetmvc.min位于同一目录中，所以。/将能够找到它们：-s.Anyhoo，因此，是否有可能以某种方式将其配置为./xxx将指向kendo ui下？尝试将kendo.data.min等添加到r中的路径中equire.config.这些文件现在在哪里，剑道ui？另外，你能分享你正在使用的这些文件的副本吗？好的，我试试。你可以从这里下载所有剑道材料：-这是一个30天的试用许可证。哦，是的-所有这些文件现在都在剑道ui文件夹中谢谢-输入这段代码我得到两个javascript错误：jquery的脚本错误和引用错误：jquery未定义这是因为我使用的jquery位于名为jquery.min.js
的文件中。请将我示例中的该行更改为您的jquery文件名。我应该更清楚地说明这一点。我将更新我的示例，使其与您的jquery文件名相同。我还有kendoWell附带的jquery.min文件，请使用您的原始代码并忽略我的。然后只需在require行添加“kendo/kendo.aspnetmvc.min”…如果我的答案对您有效，请将我的答案标记为正确：）非常感谢。。。