0

HTMLで開発を開始し、ASP.NETMVCでKendoUIフレームワークを使用しようとしています。

私はこのチュートリアルから始めました：Entity Framework 5.x –データベースファーストワークフロー これにより、データベースからのデータを含むテーブルを表示するWebページを作成することができました。

しかし、今度はKendo UIウィジェット（グリッド）を使用してテーブルのスタイルを設定したいと思います。そのために、私はこのビデオに従いました：ASP.Net MVCでのKendoUIグリッドの使用-チュートリアル1（4:37分まで）

これまでに行った手順：

  • ASP.NETMVC用のKendoUICompleteの試用版をダウンロードする
  • ダウンロードしたフォルダーからVisualStudioプロジェクトのフォルダーにファイルをコピーkendo.default.min.cssします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 に答える