在 ASP.NET MVC 3 应用程序中使用 SlickGrid

• 下载源代码 - 494 KB

引言

本文旨在提供一个在 ASP.NET MVC 应用程序中实现网格的快速入门指南。保持简单是关键，所以我不想被与网格无关的代码分散注意力，因此考虑到这一点，采取了一些最佳实践设计方面的自由。

我尽量使用最少的代码来演示如何通过传递 JSON 编码的数据从 MVC 控制器驱动网格。

源代码使用 Visual Studio 2010 创建并在 Windows 7 上测试，但它应该可以使用 Mono 编译并在 Linux/OS X 机器上运行。

背景

有很多优秀的 JavaScript 网格组件可以使用，但我选择了 SlickGrid，因为它已经很成熟，并且在积极开发中，而且有很棒的文档。除此之外，SlickGrid 还以闪电般的速度而闻名。

创建一个新的 ASP.NET MVC Web 应用程序

打开 Visual Studio 并创建一个新的 ASP.NET MVC 3 应用程序

出现提示时，选择“Internet 应用程序”作为模板，选择“Razor”作为视图引擎。

将 SlickGrid 添加到项目中

SlickGrid 目前托管在 GitHub 上，可以从这里下载。

下载并解压归档文件，并将以下文件复制到项目的Scripts目录中并添加到项目中

• slick.core.js
• slick.grid.js

SlickGrid 还依赖于jquery.event.drag，它应该包含在上面的归档文件中，因此将其复制到Scripts文件夹并添加到项目中

• jquery.event.drag-2.0.min.js

最后，将 SlickGrid 样式表添加到 Content 目录并添加到项目中

• slick.grid.css

在控制器中创建一些虚拟数据 (HomeController.cs)

首先要做的是为我们要在网格中显示的数据类型定义一个类。为了保持简单，以下类在HomeController.cs中定义

[Serializable]
public class Player
{
	public int ShirtNo { get; set; }
	public string Name { get; set; }
}

现在实现一个虚拟方法来返回可以在网格中显示的数据。同样，这是在HomeController.cs中的HomeController类中实现的

public string ArsenalX11()
{
    List<Player> theSquad = new List<Player>{
        new Player{ShirtNo=4, Name="Mertesacker"},
        new Player{ShirtNo=5, Name="Vermaelen"},
        new Player{ShirtNo=7, Name="Rosicky"},
        new Player{ShirtNo=8, Name="Arteta"},
        new Player{ShirtNo=10, Name="Van Persie"},
        new Player{ShirtNo=11, Name="Santos"},
        new Player{ShirtNo=13, Name="Szczesney"},
        new Player{ShirtNo=14, Name="Walcott"},       
        new Player{ShirtNo=17, Name="Song"},
        new Player{ShirtNo=19, Name="Wilshere"},
        new Player{ShirtNo=28, Name="Gibbs"}
        };
    JavaScriptSerializer serializer = new JavaScriptSerializer();
    return serializer.Serialize(theSquad);
}

JavaScriptSerializer 需要 System.Web.Script.Serialization，要添加它，请右键单击 JavaScriptSerializer 并解析。

我们在这里返回 JSON 数据，因为它是一种可以被直接导入 SlickGrid 的简单格式，这很自然地将我们带到下一步。

在 JavaScript 文件中定义网格

在Scripts目录中创建一个新的 JavaScript 文件并将其命名为SlickGridTest.js。

SlickGridTest.js文件中的此 JavaScript 将执行以下操作

• 定义网格列
• 从 HomeController 请求数据

来自控制器的 JSON 编码数据通过 jQuery 调用 getJSON() 加载。

var grid;
var columns = 	[
					{ id: "ShirtNo", name: "ShirtNo", field: "ShirtNo" },
					{ id: "Name", name: "Name", field: "Name" },          
                ];

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

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

请注意，为了简单起见，这些列是硬编码的，但它们可以像内容一样通过从控制器接收的数据来设置。有关更多信息，请参阅 SlickGrid 文档。

完成 JavaScript 后，最后一项任务是在 Home View 中定义网格。

将网格添加到视图 (Home\Index.cshtml)

最后一步是在视图中显示网格，这需要添加对 SlickGrid 和上述SlickGridTest.js文件的引用

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

现在添加网格只需在 div 中指定它

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

完成！

按 F5 运行应用程序并查看网格运行效果

历史

• 2012 年 4 月 11 日：初始发布。