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
I più letti di oggi
- Simulare Azure Cosmos DB in locale con Docker
- Utilizzare il metodo Index di LINQ per scorrere una lista sapendo anche l'indice dell'elemento
- ecco tutte le novità pubblicate sui nostri siti questa settimana: https://aspit.co/wkly buon week-end!
- .NET Conference Italia 2024 - Milano
- .NET Conference Italia 2023 - Milano e Online