我有一个看起来像这样的控制器：
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文件（当然，因为 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 未找到，因为它正在脚本文件夹下名为 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，这似乎不适用于单独的文件，但如果唯一的方法可以使这项工作是使用单独文件的方法，那很好。