用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設置網格

回答

相關問題