Affichage conditionnel : tenir compte du navigateur

Ne vous êtes pas déjà posé la question de savoir si telle ou telle partie de votre page devrait être affichée ou non selon le navigateur (ou périphérique) le consultant ?

Deux cas typiques :

Masquer une partie du contenu lors de l'indexation par un robot pour améliorer le ranking ou éviter du bruit dans les résultats
Retirer ou afficher certains éléments pour optimiser le rendu sur les périphériques mobiles

De l'utilité des « Browser Capabilities » (browser caps)

Le Framework .Net propose un système de détection des capacités des navigateurs en se basant sur des fichiers de définition parsant les « user agents », une sorte de signature unique de chaque navigateur (cf. http://en.wikipedia.org/wiki/User_agent).

Je reviendrais dans un prochain article sur ce système, mais vous pouvez déjà consulter le MSDN : http://msdn.microsoft.com/en-us/library/x3k2ssx2.aspx pour en apprendre un peu plus sur le sujet.

Au final, vous pouvez utiliser la propriété « Browser » sur l'object « Request » du contexte HTTP de la page. Deux manières d'y accéder : via les index (nom de la capacité) soit en tant que propriété.

Un petit exemple pour illustrer : comment savoir si la navigation se fait depuis un mobile ?

[string] HttpContext.Current.Request.Browser["IsMobileDevice"]

[bool] HttpContext.Current.Request.Browser.IsMobileDevice

Ce simple test vous permettra de choisir entre plusieurs rendus le plus adapté pour la personne consultant votre site.

Oui mais… et si je voulais généraliser tout ça ?

Vous l'avez compris, on peut ajouter nos tests supplémentaires dans notre code, mais quid des composants existants ? Et puis, c'est parfois tout un ensemble de composants et/ou de code HTML que l'on désire masquer ou non. Comment faire dans ce cas ?

Hé bien, il y a de fortes chances que vous ayez déjà manipulé des contrôles fonctionnant de manière similaire :

SPSecurityTrimmedControl : affichage selon le niveau de permission de la personne connecté
EditModePanel : affichage selon l'état de la page (en mode édition ou lecture)

En bref, il vous suffit d'implémenter un contrôle et de surcharger les méthodes « Render » ou « AddParsedSubObject » afin d'effectuer notre test. L'avantage de la méthode « AddParsedSubObject » c'est que le rendu des éléments enfants ne sera pas appelé.

Voici rapidement le code nécessaire pour ce contrôle, sachant que vous pouvez télécharger le projet complet directement depuis cette url : http://code.msdn.microsoft.com/BrowserCapabilitiesP

public class BrowserCapabilitiesPanel : WebControl {
private bool? shouldRender;

[Category("Appearance"), DefaultValue(1)]
public string BrowserCapabilities
{
get { return (string)this.ViewState["BrowserCapabilities"]; }
set { this.ViewState["BrowserCapabilities"] = value; }
}

private const bool defaultRenderOnMatch = false;

[Category("Appearance"), DefaultValue(defaultRenderOnMatch)]
public bool RenderOnMatch
{
    get
    {
      object val = this.ViewState["RenderOnMatch"];
      if (val != null)
        return (bool)val;
      else
        return defaultRenderOnMatch;
    }
    set
    {
      this.ViewState["RenderOnMatch"] = value;
    }
}

[SharePointPermission(SecurityAction.Demand, ObjectModel = true)]
protected override void AddParsedSubObject(object obj)
{
    if (!this.shouldRender.HasValue)
      this.calculateShouldRender();
    if (this.shouldRender.Value)
    {
      base.AddParsedSubObject(obj);
    }
}

private void calculateShouldRender()
{
    this.shouldRender = RenderOnMatch;
    if (!string.IsNullOrEmpty(BrowserCapabilities))
    {
      string[] caps = BrowserCapabilities.Split(',');
      foreach (string broCap in caps)
      {
        string[] parts = broCap.Split('=');
        if (parts.Length == 2)
        {
          string browserCapability = Context.Request.Browser[parts[0]];
          if (!string.IsNullOrEmpty(browserCapability))
          {
            if (string.Compare(browserCapability, parts[1], StringComparison.InvariantCultureIgnoreCase) == 0)          {
                this.shouldRender = !RenderOnMatch;
                break;
            }
          }
        }
      }
    }
    this.Visible = this.shouldRender.Value;
}
}

A vous de jouer maintenant pour optimiser votre site SharePoint !

PS : bien que le projet au téléchargement soit pour SharePoint 2010, le code est tout à fait applicable pour la version 2007, voire pour un site ASP.Net classique.