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
Il nostro speciale sullo sviluppo web mobilehttps://www.aspitalia.com/focuson/1267/Speciale-Web-Mobile-Costruire-Applicazioni-ASP.NET-JQuery-Mobile.aspx
Commenti
Per inserire un commento, devi avere un account.
Fai il login e torna a questa pagina, oppure registrati alla nostra community.
Approfondimenti
Esportare ed analizzare le issue di GitHub con la CLI e GraphQL
Personalizzare l'errore del rate limiting middleware in ASP.NET Core
Usare un KeyedService di default in ASP.NET Core 8
Creare gruppi di client per Event Grid MQTT
Specificare il versioning nel path degli URL in ASP.NET Web API
Eseguire una GroupBy per entity in Entity Framework
Gestire la cancellazione di una richiesta in streaming da Blazor
Ottenere il contenuto di una cartella FTP con la libreria FluentFTP
Implementare il throttling in ASP.NET Core
Utilizzare le collection expression in C#
Utilizzare la session affinity con Azure Container Apps
Utilizzare politiche di resiliency con Azure Container App
I più letti di oggi
- Utilizzare Docker Compose con Azure App Service
- Utilizzare QuickGrid di Blazor con Entity Framework
- Modernizzare le applicazioni WPF e Windows Forms con Blazor
- ASP 3 per esempi
- annunciato #netstandard 2.1. .NET Core lo supporterà a partire da #netcore3, così come le prossime versione di #xamarin, #mono e #unity.il supporto per #netfx 4.8, invece, non ci sarà. https://aspit.co/bq2
- Steel Style CheckBox per Silverlight 4.0