ASP.NET – Correspondência entre WebControls e elementos HTML

Postado em 15/04/2009 21:04:01 por Tomás Vásquez

Sejamos sinceros. Configura o layout de uma aplicação Web feita em ASP.NET com WebForms e consequentemente seus WebControls é um desafio e tanto para os Designers. Isso acontece porque ainda é um mistério completo o que vai sair do “outro lado da linha”, ou seja, quais elementos HTML serão gerados na saída do navegador.

A engine de renderização do ASP.NET é inteligente o suficiente para promover mudanças no código gerado dependendo das capacidades do navegador. Mas como essas alterações são mais na questão do comportamento e geração de scripts, é possível estabelecer um padrão de geração de componentes HTML e WebControls para controlar melhor a configuração de estilos.

O pessoal do blog Nima Dilmaghani publicou uma tabela com a correspondência padrão entre WebControls e componentes HTML correspondentes tentar facilitar o mapeamento de estilos, que pode ser vista abaixo.

ASP.NET Control HTML Element
Label span
TextBox input type=”text”
TextBox TextMode=”MultiLine” textarea
TextBox TextMode=”Password” input type=”password”
Button input type=”submit”
LinkButton a href=”javascript:__doPostBack(’LinkButton1′,”)”
ImageButton input type=”image”
HyperLink a
DropDownList select
ListBox select size=”4″ gives you 4 rows
ListItem option
CheckBox input type=”checkbox”
RadioButton input type=”radio” seguido de um label para apresentar o texto
RadioButtonList um table com tr e td, sendo um td para cada item da lista. Em cada td, há um conjunto de controles equivalente ao RadioButton
Image img
ImageMap img and a map tag holding one or more of the following 3:
CircleHotSpot area shape=”circle”
PolygonHotSpot area shape=”poly”
RectangleHotSpot area shape=”rect”
Table table
TableHeaderRow tr
TableRow tr
TableFooterRow tr
TableHeaderCell th
TableCell td
BulletedList ul with each list item:
ListItem li
HiddenField input type=”hidden”
Literal Sem html correspondente.
Calendar table complexa
AdRotator a
FileUpload input type=”file”
Wizard uma table complexa. Isso se o estilo padrão for mantido. É possível definir templates customizados para os passos do Wizard, deixa no layout mais amigável a padronizado, facilitando a aplicação de estilos.
Xml <?xml version=”1.0″ encoding=”utf-8″?>
MultiView MultiView não gera elementos html diretamente. Apenas seu conteúdo e controles são gerados.
Panel div
PlaceHolder Placeholder não possui elemento html correspondente. O que será renderizado é referente aos controles que nele forem adicionados através do método PlaceHolder.Controls.Add() não sequência em que forem adicionados.
Substitution Sem html correspondente
Localize Sem html correspondente. O conteúdo é exibido diretamente
Validation controls span

É bom lembrar que a partir da versão 2.0, o ASP.NET dispõem do recurso de Themes. Este permite um mapeamento entre WebControls e classes CSS, o que em teoria despreocupa os Designers, já que não é mais necessário saber o que será gerado no HTML final. O desenvolvedor mapeia através de um arquivo .skin os controles e as respectivas classes CSS que serão aplicadas e estes. Como sugestão, pela experiência que tive, vale a pena gastar um tempo explicando para os Designers como funciona o arquivo .skin para que a partir daí, ele tenha controle total da aplicação de estilos em páginas aspx baseadas em WebForms.

De resto, é só orientar os desenvolvedores a não poluir demasiadamente o HTML gerado para não atrapalhar a aplicação dos estilos.

Adicionalmente, os colegas do blog ainda listaram 10 regras para a boa utilização e aplicação de css em páginas ASP.NET:

http://nimad.wordpress.com/2007/10/02/10-rules-for-effective-use-of-css-in-aspnet/

Bom divertimento!

Tomás

Share|

Você precisa ser um usuário registrado para inserir um comentário. Faça seu login clicando aqui