使用ASP.NET MVC使用Kendo UI设置网格

Question

I'm starting developing in HTML and I'm trying to use the Kendo UI framework in ASP.NET MVC. 我开始使用HTML开发，并尝试在ASP.NET MVC中使用Kendo UI框架。

I started with this tutorial: Entity Framework 5.x – Database First Workflow With this I was able to create a Web Page that show me a table with data from a database. 我从本教程开始： Entity Framework 5.x –数据库优先工作流以此，我能够创建一个Web页面，向我显示一个包含来自数据库的数据的表。

But now I want to style de table with Kendo UI widgets (Grid). 但是现在我想用Kendo UI小部件（网格）设置表样式。 To do that I followed this video: Using KendoUI Grids on ASP.Net MVC - Tutorial 1 (until 4:37min) 为此，我按照以下视频操作：在ASP.Net MVC上使用KendoUI网格-教程1 （至4:37分钟）

The steps that I made so far: 我到目前为止所做的步骤：

Download trial version of Kendo UI Complete for ASP.NET MVC 下载适用于ASP.NET MVC的Kendo UI Complete的试用版
Copy kendo.default.min.css and kendo.common.min.css files from the downloaded folder to the Content folder in my Visual Studio project 将kendo.default.min.css和kendo.common.min.css文件从下载的文件夹复制到Visual Studio项目中的Content文件夹
Copy kendo.all.min.js file from the downloaded folder to the Scripts folder 将kendo.all.min.js文件从下载的文件夹复制到Scripts文件夹
Changed the View with the following code: 使用以下代码更改了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>

But when I run the page, no changes are made to the grid... What am I missing? 但是，当我运行页面时，没有对网格进行任何更改……我缺少什么？

PS: The source code of the loaded page is: 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

My problem was in the Views/Shared/_Layout.cshtml : 我的问题是在Views/Shared/_Layout.cshtml ：

The file was generated like this: 该文件是这样生成的：

<!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>

So I changed to: 所以我改为：

<!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>

(I put the @Scripts.Render("~/bundles/jquery") at the header) （我将@Scripts.Render("~/bundles/jquery")放在标题中）

The problem is now solved. 现在问题已解决。

使用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