Pessoal, há algum tempo, desde que comecei a criar soluções mobile baseadas em XHTML, comecei a observar com maior atenção a renderização HTML dos controles .Net. Todos tem alguma peculiaridade, mas três me chamaram muita atenção: Image, ImageButton e DataList. Os dois primeiros colocam um style=”border-width:0px;” que eu não sabia de onde vinha. Realmente não consegui fazer alguma configuração fácil para eliminar este HTML dos meus controles e acabei fazendo uma sobrecarga da propriedade BorderWidth.

Ficando assim:

using System.Web.UI.WebControls;

namespace Paulovich.WebControls
{
	public class BorderlessImageButton : ImageButton
	{
		public override Unit BorderWidth
		{
			get
			{
				return base.BorderWidth.IsEmpty ? Unit.Pixel(0) : base.BorderWidth;
			}
			set
			{
				base.BorderWidth = value;
			}
		}
	}
}

A classe para o Image fica a mesma coisa, basta dar outro nome para a classe e herdar da Image, mas lembre-se de que depois de gerar as classes para sobrecarregar as propriedades que quizer, você vai precisar informá-las no web.config para que elas sejam usadas.

<system.web>
    <pages>
        <tagMapping>
            <add tagType="System.Web.UI.WebControls.Image" mappedTagType="Paulovich.WebControls.BorderlessImage" />
            <add tagType="System.Web.UI.WebControls.ImageButton" mappedTagType="Paulovich.WebControls.BorderlessImageButton"/>
        </tagMapping>
    </pages>
</system.web>

Bom, com isso agora eu posso fazer meus CSS funcionarem corretamente, pois se eu não definir um border-width ela simplesmente não aparecerá.

Outro controle que estava gerando um HTML encrequeiro era o DataList, isso porque eu sabia que alterando a propriedade RepeatLayout para Flow, ele não iria gerar nada além do código presente no meu ItemTemplate. E isso é quase verdade. O único detalhe é que se o RepeatDirection não estiver setado para “Horizontal” ele fica gerando entre os meus ItemTemplate um <br />, mas por sorte, havia vários links sobre isso e rapidamente resolvi o problema…

Se quizer, baixe as classes em anexo!