WebGrid Class
Displays data on a web page using an HTML table element.
Namespace:
System.Web.Helpers
Assembly: System.Web.Helpers (in System.Web.Helpers.dll)
The WebGrid type exposes the following members.
| Name | Description | |
|---|---|---|
 | AjaxUpdateCallback | Gets the name of the JavaScript function to call after the HTML element that is associated with the WebGrid instance has been updated in response to an Ajax update request. |
| AjaxUpdateContainerId | Gets the value of the HTML id attribute that marks an HTML element on the web page that gets dynamic Ajax updates that are associated with the WebGrid instance. |
| ColumnNames | Gets a collection that contains the name of each data column that is bound to the WebGrid instance. |
| FieldNamePrefix | Gets the prefix that is applied to all query-string fields that are associated with the WebGrid instance. |
| HasSelection | Gets a value that indicates whether a row in the WebGrid instance is selected. |
| PageCount | Gets the number of pages that the WebGrid instance contains. |
| PageFieldName | Gets the full name of the query-string field that is used to specify the current page of the WebGrid instance. |
| PageIndex | Gets or sets the index of the current page of the WebGrid instance. |
| Rows | Gets a list that contains the rows that are on the current page of the WebGrid instance after the grid has been sorted. |
| RowsPerPage | Gets the number of rows that are displayed on each page of the WebGrid instance. |
| SelectedIndex | Gets or sets the index of the selected row relative to the current page of the WebGrid instance. |
| SelectedRow | Gets the currently selected row of the WebGrid instance. |
| SelectionFieldName | Gets the full name of the query-string field that is used to specify the selected row of the WebGrid instance. |
| SortColumn | Gets or sets the name of the data column that the WebGrid instance is sorted by. |
| SortDirection | Gets or sets the direction in which the WebGrid instance is sorted. |
| SortDirectionFieldName | Gets the full name of the query-string field that is used to specify the sort direction of the WebGrid instance. |
| SortFieldName | Gets the full name of the query-string field that is used to specify the name of the data column that the WebGrid instance is sorted by. |
| TotalRowCount | Gets the total number of rows that the WebGrid instance contains. |
| Name | Description | |
|---|---|---|
| Bind | Binds the specified data to the WebGrid instance. |
| Column | Creates a new WebGridColumn instance. |
| Columns | Returns an array that contains the specified WebGridColumn instances. |
| Equals | (Inherited from Object.) |
| Finalize | (Inherited from Object.) |
| GetContainerUpdateScript | Returns a JavaScript statement that can be used to update the HTML element that is associated with the WebGrid instance on the specified web page. |
| GetHashCode | (Inherited from Object.) |
| GetHtml | Returns the HTML markup that is used to render the WebGrid instance and using the specified paging options. |
| GetPageUrl | Returns a URL that can be used to display the specified data page of the WebGrid instance. |
| GetSortUrl | Returns a URL that can be used to sort the WebGrid instance by the specified column. |
| GetType | (Inherited from Object.) |
| MemberwiseClone | (Inherited from Object.) |
| Pager | Returns the HTML markup that is used to provide the specified paging support for the WebGrid instance. |
| Table | Returns the HTML markup that is used to render the WebGrid instance. |
| ToString | (Inherited from Object.) |
The following example shows how to create and populate a WebGrid instance.
@{
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);
grid.SortDirection = SortDirection.Ascending;
}
<!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>
