This site uses cookies to deliver our services. By using this site, you acknowledge that you have read and understand our Cookie and Privacy policy. Your use of Kontext website is subject to this policy. Allow Cookies and Dismiss

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

531 views 0 comments last modified about 7 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://kontext.tech/

在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

Related pages

Issue - Unable to get property 'apply' of undefined or null reference occurred in Angular 4.*, VS2017 15.3, ASP.NET Core 2.0

6818 views   10 comments last modified about 2 years ago

Issue Context After installed Visual Studio 2017 15.3 preview and .net core 2.0 preview SDK, I upgraded one of my existing asp.net core project to 2.0. The project was created using ‘dotnet new angular’ SPA template.&nbsp; I also upgraded all the client app packages to the latest. For exa...

View detail

Retrieve Identity username, email and other information in ASP.NET Core

1353 views   0 comments last modified about 11 months ago

The identity system in ASP.NET has evolved over time. If you are using ASP.NET Core, you probably found User property is an instance of ClaimsPrincipal in Controller or Razor views. Thus to retrieve the information, you need to utilize the claims.

View detail

Retrieve Azure AppSettings and Connection String Settings in ASP.NET Core Apps

1743 views   0 comments last modified about 10 months ago

In ASP.NET Core, we can easily use user secrets to manage our password or credentials. This post will summarize the approaches we can use after the websites are deployed into Azure.

View detail

Server.MapPath Equivalent in ASP.NET Core 2

4995 views   0 comments last modified about 11 months ago

In traditional asp.net applications, Server.MapPath is commonly used to generate absolute path in the web server. However, this has been removed from ASP.NET Core. So what is the equivalent way of doing it?

View detail

Migrating from ASP.NET Core 1.x to ASP.NET Core 2.0

1138 views   2 comments last modified about 12 months ago

Migrating from ASP.NET Core 1.x to 2.0 is not an easy job especially if you have customized Identity and used customized authentication. This post summarizes the issues and errors I have experienced and their resolutions when upgrading my project. Hopefully it can save you sometime if you are doi...

View detail

OpenIddict Refresh Token Flow issue ASP.NET Core 2.0

1233 views   0 comments last modified about 12 months ago

Context When I followed OpenIDDict refresh flow sample, I constantly got the issue “The refresh token is no longer valid”, which is returned by the following code in my authorization web api controller: result.Content = new OpenIdConnectResponse &nbsp;&...

View detail

Add comment

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

Comments (0)

No comments yet.