Usando CSS Controls Adapter en ASP.NET 2.0, mejora y optimiza tu presentacion
Para entender que es un control adapter y descargarlo, podemos visitar el blog de ScottGu's: CSS Control Adapter Toolkit Update. Pero un pequeño resumen es: Con un control adapter, puedes modificar la manera como se muestra tus controles de servidor ASP.NET en el navegador, por ejemplo podemos hacer que un control Menu se "renderice", se muestre, con etiquetas ul, li, y no con etiquetas table, td, tr.
En este ejemplo vamos a mostrar, que pasaría si yo tengo un Web Site, y quiero incorporar CSS Control Adapters a mi web.
- Primero verifiquemos la presentación actual de nuestro sitio Web, como se puede apreciar el control menú sin un control adapter:
- Ahora vamos a crear un nuevo Web Site tomando como plantilla el Tutorial on CSS Friendly ASP.NET 2.0:
- Ahora vamos a ir copiando los archivos que necesitamos en nuestra sitio Web, primero copiaremos las clases: MenuAdapter.cs y WebControlAdapterExtender.cs:
La clase MenuAdapter es la que generará el nuevo render del HTML generado por el control Menu. - Ahora copiaremos los archivos CSS básicos, los cuales son usados en la clase MenuAdapter:
- Ahora agregaremos el MenuAdapter de a nuestro sitio web, usando un archivo *.browser:
- Ahora tenemos que copiar el archivo CSS que dará el estilo al control menú (CssSelectorClass), en el tutorial encontramos dos, yo copiaré el archivo MenuExample.css a mitema(este ya lo tenía en mi webSite):
- Además tengo que copiar otros archivos de imagen que usan los estilos del archivo MenuExample.css:
- Ahora copio un Skin para el control menú del tutorial, a mi miSkin.skin, el cual tambien usa estilos del archivo MenuExample.css:
- Ahora asigno el estilo de mi control menú y asigno los atributos respectivos, SkinID y CssSelectorClass, el estilo PrettyMenu, ha sido definido en MenuExample.css:
- Ahora ejecuto mi página Contacto.aspx, pero antes le agrego el Theme a la página Contactos.aspx, en la directiva @page:
StylesheetTheme="miTema"
="miTema" - Si ya lo ejecutaron se podrán dar cuenta que falto algo
, para verlo correctamente, tenemos que agregar lo siguiente a nuestra master page, site.master:
- Ahora si ejecutemos y veamos los resultados:
Los resultados saltan a la Vista. Espero que esto les sirva como ejemplo base, para empezar a usar los control adapters del CSS Friendly ASP.NET 2.0 
. Los controles disponibles son: Menu, TreeView, GridView, DetailsView, FormsView, DataList, Login, ChangePassword , CreateUser, PasswordRecovery, y LoginStatus.
Aquí se ha presentado el funcionamiento y lo ocurre detrás de todo esto, de manera sencilla, con ideas básicas que permitan entender lo que hacemos, si queremos saber más de la arquitectura podemos visitar: ASP.NET 2.0 Control Adapter Architecture.
Ustedes escogen si necesitan usar los adaptores, si ya cuentan con estilos propios, pueden no necesitan usarlo, o también puede integrar todos sus CSS al Control Adapter. Todo dependerá de su escenario 
.
Adjunto el Web Site, que use. Es necesario instalar, CSS Friendly ASP.NET 2.0 Control Adapters (Beta 2.0).
P.D.: Si alguién tiene un estilo por ahí, y lo integra al CSS Friendly, me pasa la voz :D.
Saludos,
Post cruzado desde
starrillo blog