0

我开始使用 HTML 进行开发，并尝试在 ASP.NET MVC 中使用 Kendo UI 框架。

我从这个教程开始：Entity Framework 5.x – Database First Workflow 有了这个，我能够创建一个网页，向我展示一个包含来自数据库的数据的表。

但现在我想用 Kendo UI 小部件（网格）来设置表格样式。为此，我观看了这个视频：在 ASP.Net MVC 上使用 KendoUI 网格 - 教程 1（直到 4:37 分钟）

到目前为止我所做的步骤：

  • 下载 Kendo UI Complete for ASP.NET MVC 试用版
  • 将下载的文件夹中的文件kendo.default.min.css和文件复制到我的 Visual Studio 项目中的文件夹中kendo.common.min.cssContent
  • 将kendo.all.min.js文件从下载的文件夹复制到Scripts文件夹
  • 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>
4

1 回答 1

1

我的问题出在Views/Shared/_Layout.cshtml：

该文件是这样生成的：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>@ViewBag.Title</title>
    @Styles.Render("~/Content/css")
    @Scripts.Render("~/bundles/modernizr")
</head>
<body>
    @RenderBody()

    @Scripts.Render("~/bundles/jquery")
    @RenderSection("scripts", required: false)
</body>
</html>

所以我改为：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>@ViewBag.Title</title>
    @Styles.Render("~/Content/css")
    @Scripts.Render("~/bundles/modernizr")
    @Scripts.Render("~/bundles/jquery")
</head>
<body>
    @RenderBody()

    @RenderSection("scripts", required: false)
</body>
</html>

（我把@Scripts.Render("~/bundles/jquery")在标题）

现在问题已经解决了。

于 2013-03-09T10:11:25.623 回答