[WebMatrix] [MVC]在Grid中显示数据

411 views 0 comments last modified about 6 years ago Raymond Tang Fahao

ASP.NET MVC WebMatrix

In this page

原文地址: http://www.asp.net/web-pages/tutorials/data/6-displaying-data-in-a-grid

翻译者: Raymond http://kosmisch.net/

在Grid中显示数据

这一章节将说明怎样使用一个帮助类在HTML表格中(在一个网格中)展示数据。clip_image002

你将学到以下内容:

· 怎样在一个网页中使用WebGrid 帮助类展示数据。

· 怎样为展示在网格中的数据设置样式。

· 怎样为网格设置分页。

本章将介绍如下ASP.NET编程特性:

· WebGrid 帮助类.

关于WebGrid 帮助类

在之前的章节,你通过自己编写所有代码实现在一个网页中展示数据。但是这里有一个更加容易的方法来展示数据— 那就是使用WebGrid帮助类。这个帮助类可以帮你生成一个HTML表格用于展示数据。这个帮助类还提供设置格式,创建数据分页的方式,以及允许用户通过点击列标题来排列数据的选项。

使用WebGrid 帮助类展示数据

下面的步骤将为你展示如何通过简单的配置,在WebGrid 帮助类中展示数据。

1. 打开你在“第五章 使用数据”(Chapter 5-Working with Data)中创建的网站。

如果你没有执行那个章节的步骤,你不必全部创建。不过,你需要在第五章之初创建的数据库文件SmallBakery.sdf。这个文件必须位于你使用的网站的App_Data文件夹下。

2. 在你的网站中,创建一个新的CSHTML文件,名为WebGridBasic.cshtml

3. 用以下代码替换默认的标记:

@{

var db = Database.Open("SmallBakery") ;

var selectQueryString = "SELECT * FROM Product ORDER BY Id";

var data = db.Query(selectQueryString);

var grid = new WebGrid(data);

}

<!DOCTYPE html>

<html>

<head>

<title>Displaying Data Using the WebGrid Helper</title>

</head>

<body>

<h1>Small Bakery Products</h1>

<div id="grid">

@grid.GetHtml()

</div>

</body>

</html>

上述代码首先打开数据库SmallBakery.sdf 并且创建一个SQL Select 语句:

SELECT * FROM Product ORDER BY Id

执行查询语句返回的数据填充在一个名为data 的变量中。然后WebGrid 帮助类被用来通过data变量创建一个新的网格:

var data = db.Query(selectQueryString);

var grid = new WebGrid(data);

以上代码实例化一个WebGrid 对象,并且赋值给变量grid。在页的Body元素中,你使用如下代码通过 WebGrid 帮助类展示数据:

@grid.GetHtml()

这个grid 变量就是你创建的WebGrid 对象的值。

4. 运行此页(确保页面在文件工作区选择,然后再运行它。) WebGrid 助手类将呈现一个HTML 表格,其中包含基于SQL Select 语句选择的数据基础:

clip_image003

请注意,您可以点击列名在这些列的数据上来对表进行排序。

正如你可以看到,当显示和对数据排序的时候,即使是使用尽可能简单的代码的WebGrid帮助类为你做了很多工作。这个助手类还可以实现相当多的功能。在本章的剩余部分,你会看到如何配置的WebGrid帮助类做到以下几点:

· 指定数据列,以显示如何格式化显示这些列。

· 设置网格整体风格。

· 为数据分页。

指定以及格式化显示列

WebGrid帮助类在默认情况下显示的数据是由SQL查询返回的所有列。您可以按照下面的方式自定义此数据显示:

· 指定需要显示的列,以及以什么样的顺序。如果你想显示的数据是只是由SQL查询返回的所有列的子集,你可以由此实现。

· 指定数据应如何显示的格式说明 - 例如,为表示钱的数据添加一个货币符号(如“$”)。

在以下步骤中,你将使用的WebGrid帮助选项来格式化单个的列。

1. 在网站中,创造了新的一页名为WebGridColumnFormat.cshtml

2. 用下面的替换现有标记:

@{

var db = Database.Open("SmallBakery") ;

var selectQueryString = "SELECT * FROM Product ORDER BY Id";

var data = db.Query(selectQueryString);

var grid = new WebGrid(data);

}

<!DOCTYPE html>

<html>

<head>

<title>Displaying Data Using the WebGrid Helper (Custom Formatting)</title>

<style type="text/css">

.product { width: 200px; font-weight:bold;}

</style>

</head>

<body>

<h1>Small Bakery Products</h1>

<div id="grid">

@grid.GetHtml(

columns: grid.Columns(

grid.Column("Name", "Product", style: "product"),

grid.Column("Description", format:@<i>@item.Description</i>),

grid.Column("Price", format:@<text>$@item.Price</text>)

)

)

</div>

</body>

</html>

像前一个例子,除了在body元素中呈现网格时调用grid.GetHtml外,你指定显示的列以及如何显示它们。下面的代码演示如何指定要显示的列,以及它们应该显示的顺序:

@grid.GetHtml(

columns: grid.Columns(

grid.Column("Name", "Product", style: "product"),

grid.Column("Description", format:@<i>@item.Description</i>),

grid.Column("Price", format:@<text>$@item.Price</text>)

)

告诉帮助类要显示的列,你必须包括WebGrid的GetHtml方法的columns参数,并通过传入列的集合。在此集合,你可以指定需要包含的每一列。您可以包括grid.Column对象来指定单个列的显示,并传入你需要的数据列的名称。在这个例子中,代码使得WebGrid显示只有三列:名称,描述和价格。 (这些列必须包含在SQL的查询结果 – 帮助类不能显示非查询所返回之外的列。)

然而,注意到,除了只传递列名到网格外,你还可以传递其他的格式化指令。在这个例子中,使用下面的代码显示Name列:

grid.Column("Name", "Product", style: "product")

这告诉的WebGrid帮助类做到以下几点:

· 显示Name数据列的值。

· 使用字符串“Product”作为列标题,而不是默认的名称为标题(在本例中,默认为“Name”)。

· 应用CSS样式类“product”。在这个示例的页面标记,这个CSS类设置一个列的宽度(200像素)和字体粗细(粗体)。

Description 列的示例如下代码所示:

grid.Column("Description", format:@<i>@item.Description</i>)

这告诉帮助类,显示Description列。它通过表达式指定格式为数据列的值包装在一些HTML标记中:

@<i>@item.Description</i>

Price列的例子显示了如何指定的格式属性的另一个变化:

grid.Column("Price", format:@<text>$@item.Price</text>)

这再次指定渲染一些HTML标记,并在列值前增加了一个美元符号($)。

3. 在浏览器中查看页面。clip_image004

你看这次只有三列。 “Name”列定制了列标题,尺寸,粗细和字体。Description列是斜体,现在的Price列包含一个美元符号。

为整个表格设置样式

除了指定个别列应如何显示,您可以格式化整个网格。为了实现这样的效果,你可以定义CSS类,指定将如何呈现HTML表。

1. 在网站中,创造了新的一页名为WebGridTableFormat.cshtml

2. 用以下代码替换现有标记:

@{

var db = Database.Open("SmallBakery");

var selectQueryString = "SELECT * FROM Product ORDER BY Id";

var data = db.Query(selectQueryString);

var grid = new WebGrid(source: data, defaultSort: "Name");

}

<!DOCTYPE html>

<html>

<head>

<title>Displaying Data Using the WebGrid Helper (Custom Table Formatting)</title>

<style type="text/css">

.grid { margin: 4px; border-collapse: collapse; width: 600px; }

.head { background-color: #E8E8E8; font-weight: bold; color: #FFF; }

.grid th, .grid td { border: 1px solid #C0C0C0; padding: 5px; }

.alt { background-color: #E8E8E8; color: #000; }

.product { width: 200px; font-weight:bold;}

</style>

</head>

<body>

<h1>Small Bakery Products</h1>

<div id="grid">

@grid.GetHtml(

tableStyle: "grid",

headerStyle: "head",

alternatingRowStyle: "alt",

columns: grid.Columns(

grid.Column("Name", "Product", style: "product"),

grid.Column("Description", format:@<i>@item.Description</i>),

grid.Column("Price", format:@<text>$@item.Price</text>)

)

)

</div>

</body>

</html>

以上代码基于之前的例子,展示了怎样创建的新的样式类 (grid, head, grid th, grid td, 以及alt)。方法 grid.GetHtml 然后通过使用tableStyle, headerStyle, 以及alternatingRowStyle参数将这些样式赋值给网格不同的元素。

3. 在浏览器中查看页面。这一次,网格通过应用不同风格样式显示为一个整体,同时交替行显示不同的样式。

clip_image005

为数据分页

除了一次在网格中显示所有数据,还可以让用户对数据分页。对于你这里使用的少量的数据,分页不是很重要。但是,如果你有数百或数千行数据显示,分页功能将会非常方便。

为了给呈现网格添加分页,您可以为WebGrid帮助类指定一个额外的参数。

1. 在网站中,创造了新的一页名为WebGridPaging.cshtml

2. 用以下代码替换默认的标记:

@{

var db = Database.Open("SmallBakery");

var selectQueryString = "SELECT * FROM Product ORDER BY Id";

var data = db.Query(selectQueryString);

var grid = new WebGrid(source: data,

defaultSort: "Name",

rowsPerPage: 3);

}

<!DOCTYPE html>

<html>

<head>

<title>Displaying Data Using the WebGrid Helper (with Paging)</title>

<style type="text/css">

.grid { margin: 4px; border-collapse: collapse; width: 600px; }

.head { background-color: #E8E8E8; font-weight: bold; color: #FFF; }

.grid th, .grid td { border: 1px solid #C0C0C0; padding: 5px; }

.alt { background-color: #E8E8E8; color: #000; }

.product { width: 200px; font-weight:bold;}

</style>

</head>

<body>

<h1>Small Bakery Products</h1>

<div id="grid">

@grid.GetHtml(

tableStyle: "grid",

headerStyle: "head",

alternatingRowStyle: "alt",

columns: grid.Columns(

grid.Column("Name", "Product", style: "product"),

grid.Column("Description", format:@<i>@item.Description</i>),

grid.Column("Price", format:@<text>$@item.Price</text>)

)

)

</div>

</body>

</html>

此代码扩展了前面的例子,在创建WebGrid对象时增加一个rowsPerPage参数。此参数可以让你设置所显示的行数。包含这个参数,就会自动启用分页。

3. 在浏览器中查看页面。请注意,只有三行数据显示。在网格的底部,你会看到控制项,允许你在其余的数据行的页面之间切换。

clip_image006

更多的资源

Chapter 5 - Working with Data

Chapter 7 - Displaying Data in a Chart

ASP.NET Web Pages with Razor Syntax Reference

Add comment

Please login first to add comments.  Log in New user?  Register

Comments (0)

No comments yet.