Commençons par la requête et le remplissage du WebGrid

var data = db.Query(selectQueryString, id);
var grid = new WebGrid(source: data, rowsPerPage: 50);

Voii le helper pour construire la grille :

1:     @grid.GetHtml(
2:      tableStyle: « webgrid »,
3:      headerStyle: « webgrid-header »,
4:      footerStyle: « webgrid-footer »,
5:      rowStyle: « webgrid-rows »,
6:      alternatingRowStyle: « webgrid-alternating-rows »,
7:      columns: grid.Columns(
8:    grid.Column(format: @<a href= »@Href(« ~/Private/Edit », item.ID) »
title= »Editer la fiche »>
9:                     <img src= »@Href(« ~/images/icons/user_edit.png ») »
alt= »Editer la fiche » />
10:                              </a>),
11:     grid.Column(«  », «  », @<text>@if (item.C_LOGO_VIG != «  »)
12:     {
13:          <a href= »@Href(« ~/Private/Edit », item.ID) »
14:          title= »@item.C_SOCIETE »>
15:          <img
src= »../d/@item.C_ABRE/@item.VIG.Replace(« zoom », « vig ») »
16:                  alt= »@item.C_SOCIETE » />
17:          </a>
18:     }</text>),
19:    grid.Column(« Société », « Société », format:  @<i>@item.SOCIETE</i>),
20:    grid.Column(« Nom », « Nom », format: @<i>@item.NOM</i>),
21:    grid.Column(« Prénom », « Prénom », format: @<i>@item.PRENOM</i>),
22:    grid.Column(« Code postal », « Code postal »,
format: @<i>@item.CODEPOSTAL</i>),
23:    grid.Column(« Ville », format: @<i>@item.VILLE</i>),
24:    grid.Column(« Revendeur », format: @<i>@item.SOCIETE</i>),
25:    grid.Column(« Rubrique », format: @<i>@item.RLIBELLE</i>),
26:    grid.Column(« Département », format: @<i>@item.DLIBELLE</i>),
27:    grid.Column(
format:
@<a href= »@Href(« ~/Private/Del », item.ID) »
title= »Supprimer »>
<img src= »@Href(« ~/images//user_delete.png ») »
alt= »Supprimer » />
</a>)
28:   )
29:  )

Le résultat de ce WebGrid

Cela parait un peu rebutant de prime à bord mais vous allez voir que tout s’explique :

on peut ajouter tout type de code html, des liens, des images mais aussi des variables en provenance de liste d’objets pour afficher des données dynamiques (c’est le but ), des conditions avec le if. La balise <text> s’avère en fait très utile et indispensable pour personnaliser au plus précis ce type de helper.

1:   @<text>

2:  @if (item.C_LOGO_VIG != «  »)

3:   {

4:    <a href= »@Href(« ~/Private/Edit », item.ID) »

5:      title= »@item.SOCIETE »>

6:      <img   src= »../d/@item.C_ABRE/

@item.VIG.Replace(« zoom », « vig ») »

7:      alt= »@item.SOCIETE » />

8:    </a>

9:   }

10:  </text>

Pour faire des liens sans se soucier du chemin on utilise @Href. Le tilde “~” permet de partir de la racine du site et de construire le chemin. item.Id ajoute l’identifiant pour agir sur la base de données. on obtient ceci http://monnomdedomaine.com/Private/Edit/10

La condition test l’existence d’une vignette, si c’est le cas on affiche les balises nécessaire

   1:  @item.VIG.Replace("zoom", "vig")

ceci permet de remplacer le texte “zoom” par “vig” dans le nom de l’image

Les styles sont définis de façon précises

 tableStyle: "webgrid"
 headerStyle: "webgrid-header"
 footerStyle: "webgrid-footer"
 rowStyle: "webgrid-rows"
 alternatingRowStyle: "webgrid-alternating-rows"

1:   grid.Column(« DatePublication », « Publication »,

format: @<i>

@item.DatePublication.ToString(« d »)

</i>,

style: « datepub »),

donc à la fin on trouve style : qui permet d’agir sur la colonne

A suivre pour d’autres explications sur Les Asp.Net Web Pages.