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

我开始在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>

来源

2013-03-08 amp

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

我的问题是在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-09 10:11:25 amp

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

回答

相关问题