SlickGrid未显示

Question

新手here..Currently开发了我的第一个ASP.NET web应用程序。我正在尝试使用SlickGrid。不知何故，网格根本没有出现，甚至没有显示标题:-(

下面是我的Index.cshtml代码:

@model IEnumerable<E_2.Models.DYE>

<link href="@Url.Content("~/Content/slick.grid.css")" rel="stylesheet" type="text/css" />
<script src="@Url.Content("~/Scripts/jquery.event.drag-2.0.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/slick.core.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/slick.grid.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/SlickGridTest.js")" type="text/javascript">

</script>

@{
    ViewBag.Title = "Index";
}

<h2>Index</h2>


<p>
    @Html.ActionLink("Create New", "Create")
</p>


<table width="100">
  <tr>
    <td>
      <div id="teamGrid" style="width:400px;height:300px;"></div>
    </td>
  </tr>
</table>

..this是我的SlickGridTest.js脚本

var grid;
var columns = [
    { id: "ID", name: "ID", field: "ID" },
    { id: "DESCRIPTION", name: "DESCRIPTION", field: "DESCRIPTION" },
];

var options = {
    enableCellNavigation: true,
    enableColumnReorder: false
};

$(function () {
    var myData = [];
    $.getJSON('/DYE/ReloadDyeData', function (data) {
        myData = data;
        grid = new Slick.Grid("#teamGrid", myData, columns, options);
    });

..my模型

using System;
using System.Collections.Generic;
using System.ComponentModel.DataAnnotations;

namespace E_2.Models
{
    public partial class DYE
    {
        public int ID { get; set; }

        [Required]
        public string DESCRIPTION { get; set; }

        [StringLength(3)]
        public string COLOR_CODE { get; set; }
        public Nullable<System.DateTime> VALID_UNTIL { get; set; }
    }
}

*..and重新加载数据的控制器部分*

public string ReloadDyeData()
{
    var dyes = db.DYEs.ToList();
    JavaScriptSerializer serializer = new JavaScriptSerializer();
    return serializer.Serialize(dyes);
}

由于缺乏对这个HTML，JavaScriot和ASP.NET的经验，我真的不知道哪里会是根本问题。

Answer 1

可能会出现问题，因为您将.js文件加载到错误的位置。

在视图底部(在上一个cshtml代码之后)，您需要为脚本添加一个节，如下所示

</div>
@section scripts {
    <script type="text/javascript" src="~/Scripts/yourfile"></script>
}

这是一个快速的答案，很容易成为其他的答案。

Answer 2

据我所知，您没有包括jQuery、jQuery UI，而且您正在使用过时的jquery.event.drag版本。您可以在这里获得更新的版本：http://threedubmedia.com/code/event/drag

Answer 3

我在IDE中复制并粘贴了您的代码，在我们的slickGridTest.js代码末尾缺少一个支撑和括号。