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

分享于 

6分钟阅读

Web开发

  繁體

介绍

本文旨在为在 ASP.NET MVC应用程序中实现网格提供一个快速入门指南。 在这里保持简单是关键,因这里我不想与网格相关的代码。

我试图尽可以能少地使用代码来演示如何通过json编码数据来驱动MVC控制器的网格。

源代码是用 Visual Studio 2010创建并在 Windows 7上测试的,但是应该使用Mono编译,并在 linux/OS X 机器上运行。

背景

我可以使用很多优秀的JavaScript网格组件,但是我已经选择了 SlickGrid,并且有很大的文档。 除了这个,SlickGrid还被认为是一个快速的闪电。

创建一个新的ASP.NET MVC

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

创建 ASP.NET MVC项目

出现提示时,选择"互联网应用"作为模板,将视图引擎作为"Razor"。

将SlickGrid添加到项目

SlickGrid目前位于GitHub上,可以从这里下载

下载并解压缩归档文件并将以下文件复制到项目脚本目录中,并将它们添加到项目中:

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

SlickGrid还依赖于 jquery.event.drag,应该包含在 上面 归档中,以便将它的复制到脚本文件夹并将它的添加到项目中。

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

最后将SlickGrid样式表添加到内容目录中,并将它的添加到项目中:

  • slick.grid.css

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

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

[Serializable]publicclass Player
{
 publicint ShirtNo { get; set; }
 publicstring Name { get; set; }
}

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

publicstring 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 and然后单击。

我们在这里返回JSON数据,这是一种简单的格式,可以直接进入 SlickGrid,这样我们就能很好地。

在JavaScript文件中定义网格

在脚本目录中创建一个新的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后,最后一个任务是在主视图中定义网格。

将网格添加到视图中( homeindex。cshtml )

final 步骤是在视图中显示网格,这需要添加对SlickGrid和 上面 SlickGridTest.js file:的引用。

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

添加网格现在只是在 div 中指定它的一种情况:

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

已经完成 !

按F5运行应用程序并查看实际的网格:

运行应用程序

历史记录

  • 11 2012年04月: 初始日志。

asp  asp-net  Using  sli  asp-net-mvc  Slick  
相关文章