Utilizzando i CSS è possibile visualizzare immagini anzichè il valore testuale del link. Questa soluzione, oltre essere ottima a livello di designing accessibile, risulta comoda ad esempio per la gestione di colonne con pulsanti in una GridView, perchè permette di usare colonne di default e visualizzare immagini anzichè testo.
Supponiamo di avere un GridView con una colonna di tipo asp:HyperLinkField, perchè quello che vogliamo è di fatto un link, ma anzichè testo desideriamo visualizzare un'immagine.
Potremmo usare un TemplateField con all'interno un HyperLink, ma dato che a volte siamo pigri, non abbiamo voglia di scrivere quelle righe di codice in più, dato che c'è un oggetto già pronto per le nostre esigenze.
Assumendo che il rendering del controllo HyperLinkField sarà un tag , lo stratagemma basato sui css è molto semplice:
table td.btnEdit a{ font-size: 0; line-height: 0; display: block; width: 16px; padding: 16px 0 0 0; overflow: hidden; text-decoration: none } table td.btnEdit a{ background: Transparent url(img/Edit.gif) 0 0 no-repeat; } table td.btnEdit a:hover{ background: Transparent url(img/EditOver.gif) 0 0 no-repeat; }
Basta poi specificare una classe CSS per la colonna della GridView:
<asp:HyperLinkField ItemStyle-CssClass="btnEdit" ... />
Tenete presente che le proprietà width e padding-top devono essere equivalenti a larghezza ed altezza dell'immagine.
Commenti
Per inserire un commento, devi avere un account.
Fai il login e torna a questa pagina, oppure registrati alla nostra community.
Approfondimenti
Usare ASP.NET Core dev tunnels per testare le applicazioni su internet
Cache policy su route groups di Minimal API in ASP.NET Core 7
Effettuare il deploy di immagini solo da container registry approvati in Kubernetes
Load test di ASP.NET Core con k6
Implementare il throttling in ASP.NET Core
Short-circuiting della Pipeline in ASP.NET Core
Personalizzare l'errore del rate limiting middleware in ASP.NET Core