【发布时间】：2013-08-29 07:33:49
【问题描述】：
我有一个如下所示的控制器：
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/*（所有 kendo 文件，包括 mvc 文件）
- 脚本/require.js
- 脚本/jquery-2.0.3.min.js
几乎可以工作，只是没有应用服务器端排序。
这是因为从未下载过 kendo.aspnet.mvc.min.js 文件（当然，因为 require 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文件：
红点是404未找到，因为它正在scripts文件夹下一个名为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>
但这产生了这些错误：
并尝试加载js文件：
在这种情况下 - 红点是 404 未找到，因为它正在直接在 Scripts 文件夹下查找文件。
所以这是我的问题：
如何在需要 JS 类型的场景中包含所述文件？
除此之外：我想使用 kendo.all.min 文件而不是单独的文件，因为我想在将来使用 knockout-kendo，这似乎不适用于单独的文件，但如果完成这项工作的唯一方法是使用单独的文件方法，这很好。
【问题讨论】：
-
网络视图（Chrome 开发者工具、Firebug）中加载脚本文件的顺序是什么？
-
@Chris - 我已添加网络订单 - 红点表示未找到 404。
标签： asp.net-mvc kendo-ui requirejs kendo-grid kendo-asp.net-mvc