0
我开始在HTML中开发,我试图在ASP.NET MVC中使用Kendo UI框架。用Kendo UI使用ASP.NET MVC设置网格
我从本教程开始:Entity Framework 5.x – Database First Workflow 这样我就可以创建一个Web页面,向我显示一个包含数据库数据的表格。
但是现在我想用Kendo UI小部件(网格)来表格样式。要做到这一点我跟这个视频:Using KendoUI Grids on ASP.Net MVC - Tutorial 1(直到4:37分钟)
,我迄今所取得的步骤:
- 剑道UI的试用版下载完成ASP.NET MVC
- 复制
kendo.default.min.css
并且从下载的文件夹到文件夹Content
文件kendo.common.min.css
在我的Visual Studio项目从下载的文件夹到文件夹Scripts
- 复制
kendo.all.min.js
文件用下面的代码改变了View
:
@model IEnumerable<DatabaseFirst.Models.Artesano> @{ ViewBag.Title = "Index"; } <link href="@Url.Content("~/Content/kendo.common.min.css")" rel="stylesheet" /> <link href="@Url.Content("~/Content/kendo.default.min.css")" rel="stylesheet" /> <script src="@Url.Content("~/Scripts/kendo.all.min.js")" type="text/javascript" ></script> <script type="text/javascript"> $(function() { $("#artesanos-grid").kendoGrid(); }); </script> <h2>Index</h2> <p> @Html.ActionLink("Create New", "Create") </p> <table id="artesanos-grid"> <thead> <tr> <th> @Html.DisplayNameFor(model => model.RFC) </th> <th> @Html.DisplayNameFor(model => model.RazonSocial) </th> <th> @Html.DisplayNameFor(model => model.Telefonos) </th> <th> @Html.DisplayNameFor(model => model.Fax) </th> <th>Actions</th> </tr> </thead> <tbody> @foreach (var item in Model) { <tr> <td> @Html.DisplayFor(modelItem => item.RFC) </td> <td> @Html.DisplayFor(modelItem => item.RazonSocial) </td> <td> @Html.DisplayFor(modelItem => item.Telefonos) </td> <td> @Html.DisplayFor(modelItem => item.Fax) </td> <td> @Html.ActionLink("Edit", "Edit", new { id=item.RFC }) | @Html.ActionLink("Details", "Details", new { id=item.RFC }) | @Html.ActionLink("Delete", "Delete", new { id=item.RFC }) </td> </tr> } </tbody> </table>
但是当我运行的页面,不更改网格制成... 我缺少什么?
PS: 加载页面的源代码是:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>Index</title>
<link href="/Content/site.css" rel="stylesheet"/>
<script src="/Scripts/modernizr-2.6.2.js"></script>
</head>
<body>
<link href="/Content/kendo.common.min.css" rel="stylesheet" />
<link href="/Content/kendo.default.min.css" rel="stylesheet" />
<script src="/Scripts/kendo.all.min.js" type="text/javascript" ></script>
<script type="text/javascript">
$(function() {
$("#artesanos-grid").kendoGrid();
});
</script>
<h2>Index</h2>
<p>
<a href="/Artesano/Create">Create New</a>
</p>
<table id="artesanos-grid">
<thead>
<tr>
<th>
RFC
</th>
<th>
RazonSocial
</th>
<th>
Telefonos
</th>
<th>
Fax
</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<tr>
<td>
325
</td>
<td>
sdfwef
</td>
<td>
wetfgvs
</td>
<td>
sdfsdgs
</td>
<td>
<a href="/Artesano/Edit/325">Edit</a> |
<a href="/Artesano/Details/325">Details</a> |
<a href="/Artesano/Delete/325">Delete</a>
</td>
</tr>
<tr>
<td>
2
</td>
<td>
weg
</td>
<td>
asdgweg
</td>
<td>
dsg
</td>
<td>
<a href="/Artesano/Edit/2">Edit</a> |
<a href="/Artesano/Details/2">Details</a> |
<a href="/Artesano/Delete/2">Delete</a>
</td>
</tr>
<tr>
<td>
235423
</td>
<td>
sdga
</td>
<td>
et
</td>
<td>
wefwf
</td>
<td>
<a href="/Artesano/Edit/235423">Edit</a> |
<a href="/Artesano/Details/235423">Details</a> |
<a href="/Artesano/Delete/235423">Delete</a>
</td>
</tr>
<tr>
<td>
23
</td>
<td>
wq
</td>
<td>
sasdga
</td>
<td>
aegweg
</td>
<td>
<a href="/Artesano/Edit/23">Edit</a> |
<a href="/Artesano/Details/23">Details</a> |
<a href="/Artesano/Delete/23">Delete</a>
</td>
</tr>
</tbody>
</table>
<script src="/Scripts/jquery-1.8.2.js"></script>
</body>
</html>
DId你检查控制台的JS错误? – 2013-03-09 06:52:05
@PeturSubev正如你所看到的,我已经解决了这个问题。但是,因为我是初学者,你能告诉我在哪里可以看到JS错误吗?它是在Visual Studio中还是在浏览器中(Chrome)?这将在未来有用。 – amp 2013-03-09 10:14:36
在您的浏览器的控制台。我建议你查看这个视频,我想你会发现它很有用。 http://www.kendoui.com/blogs/teamblog/posts/13-01-02/screencast_debugging_kendo_ui_applications.aspx – 2013-03-10 19:38:15