Asp.Net Web Page (Razor) : le WebGrid



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

  • selectQueryString : c’est la requête dont le résultat chargera les données dans le WebGrid
  • id : est un identifiant utilisé comme paramètre dans la requête
  • data : est la variable contenant une liste d’objet résultant @item dans le Webgrid permet d’accès au propriété de chaque ligne (colonne)
  • rowsPerPage : autorise le multi page c’est donc automatique. cela créé des liens de page en page. Ici 50 lignes par page.


  • Voici le helper pour construire la grille :

    @grid.GetHtml(
         tableStyle: "webgrid",
         headerStyle: "webgrid-header",
         footerStyle: "webgrid-footer",
         rowStyle: "webgrid-rows",
         alternatingRowStyle: "webgrid-alternating-rows",
         columns: grid.Columns(
                     grid.Column(format: @<a href="@Href("~/Private/Edit", item.ID)" title="Editer la fiche">
                         <img src="@Href("~/images/icons/user_edit.png")" alt="Editer la fiche" />
                                  </a>),
         grid.Column("", "", @<text>@if (item.C_LOGO_VIG != "")
         {
              <a href="@Href("~/Private/Edit", item.ID)" title="@item.C_SOCIETE">
               <img src="../d/@item.C_ABRE/@item.VIG.Replace("zoom", "vig")" alt="@item.C_SOCIETE" />
              </a>
          }</text>),
        grid.Column("Société", "Société", format:  @<i>@item.SOCIETE</i>),
        grid.Column("Nom", "Nom", format: @<i>@item.NOM</i>),
        grid.Column("Prénom", "Prénom", format: @<i>@item.PRENOM</i>),
        grid.Column("Code postal", "Code postal", format: @<i>@item.CODEPOSTAL</i>),
        grid.Column("Ville", format: @<i>@item.VILLE</i>),
        grid.Column("Revendeur", format: @<i>@item.SOCIETE</i>),
        grid.Column("Rubrique", format: @<i>@item.RLIBELLE</i>),
        grid.Column("Département", format: @<i>@item.DLIBELLE</i>),
        grid.Column(format:@<a href="@Href("~/Private/Del", item.ID)" title="Supprimer"><img src="@Href("~/images//user_delete.png")" alt="Supprimer" /></a>)
         )
        )

     

    
    

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

  • columns: défini la liste des colonnes de la grille
  •  

  • grid.Column : ceci défini la colonne –> Société, Nom, Prénom, …
  • 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 Clignement d'œil), 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.

    @<text>
    @if (item.C_LOGO_VIG != "")
      {
        <a href="@Href("~/Private/Edit", item.ID)"
          title="@item.SOCIETE">
          <img   src="../d/@item.C_ABRE/ @item.VIG.Replace("zoom", "vig")"
          alt="@item.SOCIETE" />
        </a>
       }
      </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

    <span class="lnum"> 1:</span>
    @item.VIG.Replace(<span class="str">"zoom"</span>, <span class="str">"vig"</span>)
    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: <span class="str">"webgrid"
    </span> headerStyle: <span class="str">"webgrid-header"
    </span> footerStyle: <span class="str">"webgrid-footer"
    </span> rowStyle: <span class="str">"webgrid-rows"
    </span> alternatingRowStyle: <span class="str">"webgrid-alternating-rows"</span>

     

    le complément pour les styles se paramètre dans grid.Column Il manque quelques petits ajustements sur les styles comme l’alignement des titres des colonnes par exemple.

    1:

    grid.Column("DatePublication", "Publication",
     format: @&lt;i&gt;
     @item.DatePublication.ToString("d")
     &lt;/i&gt;,
     <strong>style</strong>: "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.

    Laisser un commentaire

    Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

    trois + un =