Visualizzare un template per browser mobile tramite un custom control ASP.NET

Quando dobbiamo sviluppare siti ottimizzati per mobile con ASP.NET, una delle possibilità che abbiamo è quella di adattare il contenuto delle nostre pagine, in modo che siano correttamente visualizzate quando visitate da uno smartphone.

Se le media query di CSS non bastano, perchè vogliamo modificare anche radicalmente il contenuto della pagina, tipicamente agiamo a livello di server control, rendendo visibili alcune porzioni della pagina piuttosto di altre, a seconda della tipologia del browser. In questo contesto, risulta molto comodo avvalersi di un controllo che ci permetta di specificare due distinti template, uno standard e uno mobile, visualizzando poi quello più opportuno:

<ucalessioarrigoni:MobileView runat="server" ID="mv">
    <MobileTemplate>
        <asp:Label runat="server" ID="lblMobile" Text="Hi from mobile" />
    </MobileTemplate>
    <StandardTemplate>
        <asp:Label runat="server" ID="lblStandard" Text="Hi from standard" />
    </StandardTemplate>
</ucalessioarrigoni:MobileView>

Realizzare un controllo di questo tipo è solo questione di creare una classe MobileView che erediti da WebControl ed esponga due proprietà MobileTemplate e StandardTemplate, di tipo ITemplate:

public class MobileView : WebControl, INamingContainer {
    [PersistenceMode(PersistenceMode.InnerProperty),
    Browsable(false), TemplateInstance(TemplateInstance.Single)]
    public ITemplate MobileTemplate { get; set; }

    [PersistenceMode(PersistenceMode.InnerProperty),
    Browsable(false), TemplateInstance(TemplateInstance.Single)]
    public ITemplate StandardTemplate { get; set; }
}

Ognuna di queste proprietà è marcata, tra gli altri, dall'attributo TemplateInstance impostato al valore Single. Questo fa sì che il designer crei i field relativi ai controlli contenuti nel template, così che possiamo referenziarli dal code-behind della pagina:

protected void Page_Load(object sender, EventArgs e) {
    this.lblMobile.Text = "Hi from mobile";
}

Internamente, il nostro controllo effettua l'override del metodo CreateChildControls, all'interno del quale istanziamo entrambi i template, ognuno all'interno di un Panel, visualizzando però solo quello corretto, a seconda delle BrowserCapability del nostro visitatore. Se invochiamo EnsureChildControls all'OnInit, siamo sicuri che siano istanziati e valorizzati per tutto il ciclo di vita della pagina:

protected override OnInit(EventArgs e) {
    base.OnInit(e);
    this.EnsureChildControls();
}

protected override void CreateChildControls() {
    base.CreateChildControls();

    Panel standardContainer = new Panel();
    this.StandardTemplate.InstantiateIn(standardContainer);

    Panel mobileContainer = new Panel();
    this.MobileTemplate.InstantiateIn(mobileContainer);
           
    if (this.Context.Request.Browser.IsMobileDevice) this.Controls.Add(mobileContainer);
    else this.Controls.Add(standardContainer);

}

Istanziando entrambi i template, siamo sicuri che tutti i Server Control in essi contenuti, siano essi appartenenti allo StandardTemplate o al MobileTemplate, vengano comunque creati, così che possiamo referenziarli in pagina senza effettuare controlli di sorta. Se non procedessimo in questo modo, quelli del template non visualizzato risulterebbero null, costringendoci quindi ad una serie di verifiche prima di poterli utilizzare, per non incorrere in NullReferenceException.

Oppure hai ancora dubbi e semplicemente vuoi approfondire l'argomento? Contattami liberamente, senza alcun impegno, per un preventivo gratuito di consulenza personalizzata.

Nella sessione studiata su misura per te sarò a tua completa disposizione fornendoti risposte chiare, immediate e precise.

Consulenze telefoniche o per posta elettronica prevedono un costo.

L'autore

Mi sono laureato in informatica presso l'università degli studi di Milano. Da sempre mi occupo di informatica e programmazione.
Da qualche anno sono diventato un blogger e collaboro con alcune testate on-line.
Ho al mio attivo anche alcune pubblicazioni on-line.
Alessio Arrigoni - CONSULENTE INFORMATICO
Via per Senna, 15 - 22070 Capiago Intimiano (CO)
info@alessioarrigoni.it
PRIVACY | P.I. 02752540134