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:

<aspitalia: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>
</aspitalia: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();

    this.Controls.Clear();

    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.

Link e riferimenti utili