使用ASP.NET MVC使用Kendo UI設置網格

Question

我開始使用HTML開發，並嘗試在ASP.NET MVC中使用Kendo UI框架。

我從本教程開始： Entity Framework 5.x –數據庫優先工作流以此，我能夠創建一個Web頁面，向我顯示一個包含來自數據庫的數據的表。

但是現在我想用Kendo UI小部件（網格）設置表樣式。 為此，我按照以下視頻操作：在ASP.Net MVC上使用KendoUI網格-教程1 （至4:37分鍾）

我到目前為止所做的步驟：

下載適用於ASP.NET MVC的Kendo UI Complete的試用版
將kendo.default.min.css和kendo.common.min.css文件從下載的文件夾復制到Visual Studio項目中的Content文件夾
將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>

Answer 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")放在標題中）

現在問題已解決。

使用ASP.NET MVC使用Kendo UI設置網格

問題描述

1 個解決方案

解決方案1
1 已采納 2013-03-09 10:11:25

使用ASP.NET MVC使用Kendo UI設置網格

問題描述

1 個解決方案

解決方案1 1 已采納 2013-03-09 10:11:25

解決方案1
1 已采納 2013-03-09 10:11:25