注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

天涯倦客的博客

祝福你朋友永远快乐!

 
 
 

日志

 
 

Razor 中如何显示表格--Displaying Data in a Grid  

2011-07-26 10:26:06|  分类: MVC |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

This chapter explains how to use a helper to display data in an HTML table (in a grid).Razor 中如何显示表格--Displaying Data in a Grid - 海里的贝壳 - apple的博客

What you'll learn:

  • How to display data in a web page using the WebGrid helper.
  • How to format the data that's displayed in the grid.
  • How to add paging to the grid.

These are the ASP.NET programming features introduced in the chapter:

  • The WebGrid helper.

The WebGrid Helper

In the previous chapter, you displayed data in a page by doing all the work yourself. But there's also an easier way to display data — use the WebGrid helper. The helper can render an HTML table for you that displays data. The helper supports options for formatting, for creating a way to page through the data, and for letting users sort just by clicking a column heading.

Displaying Data Using the WebGrid Helper

This procedure shows you how to display data in a WebGrid helper by using its simplest configuration.

  1. Open the website you created for Chapter 5-Working with Data.

    If you didn't run the procedures in that chapter, you don't need to run all of them now. However, you do need the SmallBakery.sdf database file that's created at the beginning of Chapter 5. This file must be in the App_Data folder of the website you're working with.

  2. In your website, create a new CSHTML file named WebGridBasic.cshtml.
  3. Replace the existing markup with the following:

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

    The code first opens the SmallBakery.sdf database file and creates a SQL Select statement:

    SELECT * FROM Product ORDER BY Id

    A variable named data is populated with the returned data from the SQL Select statement. The WebGrid helper is then used to create a new grid from data:

    var data = db.Query(selectQueryString);   var grid = new WebGrid(data);

    This code creates a new WebGrid object and assigns it to the grid variable. In the body of the page, you render the data using the WebGrid helper by using this code:

    @grid.GetHtml()

    The grid variable is the value you created when you created the WebGrid object.

  4. Run the page. (Make sure the page is selected in the Files workspace before you run it.) The WebGrid helper renders an HTML table that contains the data selected based on the SQL Select statement:

    ch06_WebGrid-01

    Notice that you can click column names to sort the table by the data in those columns.

As you can see, even using the simplest possible code for the WebGrid helper does a lot of work for you when displaying (and sorting) the data. The helper can do quite a bit more as well. In the remainder of this chapter, you'll see how you can configure the WebGrid helper to do the following:

  • Specify which data columns to display and how to format the display of those columns.
  • Style the grid as a whole.
  • Page through data.

Specifying and Formatting Columns to Display

By default, the WebGrid helper displays all the data columns that are returned by the SQL query. You can customize the display of this data in the following ways:

  • Specify which columns the helper displays, and in what order. You might do this if you want to display only a subset of the data columns that are returned by the SQL query.
  • Specify formatting instructions for how data should be displayed — for example, add a currency symbol (like "$") to data that represents money.

In this procedure, you'll use WebGrid helper options to format individual columns.

  1. In the website, create a new page named WebGridColumnFormat.cshtml.
  2. Replace the existing markup with the following:

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

    This example is like the previous one, except that when you render the grid in the body of the page by calling grid.GetHtml, you're specifying both the columns to display and how to display them. The following code shows how to specify which columns to display and the order in which they should be displayed:

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

    To tell the helper which columns to display, you must include a columns parameter for the GetHtml method of the WebGrid helper, and pass in a collection of columns. In this collection, you can specify each column to include. You specify an individual column to display by including a grid.Column object, and pass in the name of the data column you want. In this example, the code causes the WebGrid object to display only three columns: Name, Description, and Price. (These columns must be included in the SQL query results — the helper cannot display columns that were not returned by the query.)

    However, notice that in addition to just passing a column name to the grid, you can pass other formatting instructions. In the example, the code displays the Name column using the following code:

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

    This tells the WebGrid helper to do the following:

    • Display values from the Name data column.
    • Use the string "Product" as the column heading instead of the default name for the heading (which in this case would be "Name").
    • Apply the CSS style class named "product". In the example page markup, this CSS class sets a column width (200 pixels) and a font weight (bold).

    The example for the Description column uses the following code:

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

    This tells the helper to display the Description column. It specifies a format by using an expression that wraps the value from the data column in some HTML markup:

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

    The example for the Price column shows another variation of how to specify the format property:

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

    This again specifies some HTML markup to render, and adds a dollar sign ($) before the column value.

  3. View the page in a browser.

    ch06_WebGrid-02

    You see only three columns this time. The Name column customizes the column heading, size, and font weight. The Description column is in italics, and the Price column now includes a dollar sign.

Styling the Grid as a Whole

In addition to specifying how individual columns should be displayed, you can format the whole grid. To do so, you define CSS classes that specify how the rendered HTML table will look.

  1. In the website, create a new page named WebGridTableFormat.cshtml.
  2. Replace the existing markup with the following:

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

    This code builds on the previous example by showing you how to create new style classes (grid, head, grid th, grid td, and alt). The grid.GetHtml method then assigns these styles to various elements of the grid using the tableStyle, headerStyle, and alternatingRowStyle parameters.

  3. View the page in a browser. This time, the grid is displayed using different styles that apply to the table as a whole, such a banding for alternating rows.

    ch06_WebGrid-03

Paging Through Data

Rather than displaying all the data in the grid at once, you can let users page through the data. For the small quantity of data that you're working with here, paging isn't very important. But if you've got hundreds or thousands of data rows to display, paging is very handy.

To add paging to the rendered grid, you specify an additional parameter for the WebGrid helper.

  1. In the website, create a new page named WebGridPaging.cshtml.
  2. Replace the existing markup with the following:

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

    This code expands the previous example by adding a rowsPerPage parameter when creating the WebGrid object. This parameter lets you set the number of rows that are displayed. By including this parameter, you automatically enable paging.

  3. View the page in a browser. Notice that only three rows are shown. At the bottom of the grid, you see controls that let you page through the remaining data rows.

    ch06_WebGrid-04

Additional Resources

  评论这张
 
阅读(1041)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017