ASP.NET Web Pages WebGrid

## ASP.NET Tutorial

ASP.NET HOME ASP.NET Intro

## WP Tutorial

WebPages Intro WebPages Razor WebPages Layout WebPages Folders WebPages Global WebPages Forms WebPages Objects WebPages Files WebPages Databases WebPages Helpers WebPages WebGrid WebPages Charts WebPages Email WebPages PHP WebPages Publish WebPages Examples

## WP References

WebPages Classes WebPages Security WebPages Database WebPages WebMail WebPages Helpers

## ASP.NET Razor

Razor Intro Razor Syntax Razor C# Variables Razor C# Loops Razor C# Logic Razor VB Variables Razor VB Loops Razor VB Logic

## ASP.NET MVC

MVC Intro MVC Application MVC Folders MVC Layout MVC Controllers MVC Views MVC Database MVC Models MVC Security MVC HTML Helpers MVC Publish MVC Reference

## WF Tutorials

WebForms Intro WebForms Pages WebForms Controls WebForms Events WebForms Forms WebForms ViewState WebForms TextBox WebForms Button WebForms Data Binding WebForms ArrayList WebForms Hashtable WebForms SortedList WebForms XML Files WebForms Repeater WebForms DataList WebForms DbConnection WebForms Master Pages WebForms Navigation WebForms Examples

## WF References

WebForms HTML WebForms Controls WebForms Validation

# ASP.NET Web Pages - The WebGrid Helper

« Previous
Next Chapter »

WebGrid - One of many useful ASP.NET Web Helpers.

## Doing the HTML Yourself

In a previous chapter, you displayed database data by using razor code, and doing the HTML markup yourself:

## Database Example

@{
var db = Database.Open("SmallBakery");
var selectQueryString = "SELECT * FROM Product ORDER BY Name";
}
<html>
<body>
<h1>Small Bakery Products</h1>
<table>
<tr>
<th>Id</th>
<th>Product</th>
<th>Description</th>
<th>Price</th>
</tr>
@foreach(var row in db.Query(selectQueryString))
{
<tr>
<td>@row.Id</td>
<td>@row.Name</td>
<td>@row.Description</td>
<td style="text-align:right">@row.Price</td>
</tr>
}
</table>
</body>
</html>
Run example »

## Using The WebGrid Helper

Using the WebGrid helper is an easier way to display data.

The WebGrid helper:

- Automatically sets up an HTML table to display data
- Supports different options for formatting
- Supports paging through data
- Supports Sorting by clicking on column headings

## WebGrid Example

@{
var db = Database.Open("SmallBakery") ;
var selectQueryString = "SELECT * FROM Product ORDER BY Name";
var data = db.Query(selectQueryString);
var grid = new WebGrid(data);
}
<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>
Run example »
« Previous
Next Chapter »

## Your suggestion:

Your E-mail (optional):

Page address:

Description:

Close [X]

## Thank You For Helping Us!

Your message has been sent to W3Schools.

Close [X]
Search w3schools.com:

## WEB HOSTING

Best Web Hosting UK Reseller Hosting Wow! $5 SSD Hosting

## WEB BUILDING

Download XML Editor
FREE Website BUILDER FREE Website Creator

## WEB RESOURCES

Web Statistics Web Validation

## SHARE THIS PAGE