ASP.NET Web Pages - Assistant WebGrid
WebGrid - l'un des nombreux assistants Web ASP.NET utiles.
HTML écrit à la main
Dans les chapitres précédents, vous avez utilisé du code Razor pour afficher les données de la base de données, et tout le balisage HTML était écrit à la main :
Exemple de base de données
@{
var db = Database.Open("SmallBakery");
var selectQueryString = "SELECT * FROM Product ORDER BY Name";
}
<html>
<body>
<h1>Produits de la petite boulangerie</h1>
<table>
<tr>
<th>Id</th>
<th>Produit</th>
<th>Description</th>
<th>Prix</th>
</tr>
@foreach(var row in db.Query(selectQueryString))
{
<tr>
<td>@row.Id</td>
<td>@row.Name</td>
<td>@row.Description</td>
<td align="right">@row.Price</td>
</tr>
}
</table>
</body>
</html>
var db = Database.Open("SmallBakery");
var selectQueryString = "SELECT * FROM Product ORDER BY Name";
}
<html>
<body>
<h1>Produits de la petite boulangerie</h1>
<table>
<tr>
<th>Id</th>
<th>Produit</th>
<th>Description</th>
<th>Prix</th>
</tr>
@foreach(var row in db.Query(selectQueryString))
{
<tr>
<td>@row.Id</td>
<td>@row.Name</td>
<td>@row.Description</td>
<td align="right">@row.Price</td>
</tr>
}
</table>
</body>
</html>
Exécuter l'exemple »
Utilisation du WebGrid Helper
L'assistant WebGrid offre un moyen plus simple d'afficher des données.
L'assistant WebGrid :
- Crée automatiquement un tableau HTML pour afficher les données
- Prend en charge différentes options de mise en forme
- Prend en charge l'affichage paginé des données
- Prend en charge le tri en cliquant sur les en-têtes de colonnes
Exemple WebGrid
@{
var db = Database.Open("SmallBakery") ;
var selectQueryString = "SELECT * FROM Product ORDER BY Id";
var data = db.Query(selectQueryString);
var grid = new WebGrid(data);
}
<html>
<head>
<title>Affichage des données à l'aide de l'assistant WebGrid</title>
</head>
<body>
<h1>Produits de la petite boulangerie</h1>
<div id="grid">
@grid.GetHtml()
</div>
</body>
</html>
var db = Database.Open("SmallBakery") ;
var selectQueryString = "SELECT * FROM Product ORDER BY Id";
var data = db.Query(selectQueryString);
var grid = new WebGrid(data);
}
<html>
<head>
<title>Affichage des données à l'aide de l'assistant WebGrid</title>
</head>
<body>
<h1>Produits de la petite boulangerie</h1>
<div id="grid">
@grid.GetHtml()
</div>
</body>
</html>
Exécuter l'exemple »
Autres extensions