Menu

Bootstrap y ASP.NET: TextBox, Button y LinkButton

17 Noviembre, 2015 - Diseño & ASP.NET, Tecnología
Bootstrap y ASP.NET: TextBox, Button y LinkButton

Nuestra primera misión, en el proceso de diseño de una interfaz de usuario (UI) profesional para un programa de gestión desarrollado con ASP.NET, consistirá en, intentar aplicar Bootstrap dentro del propio entorno de desarrollo de ASP.NET.

¿Con que objeto? Te preguntarás. Pues muy sencillo para obtener un resultado sensitive adaptable a diferentes dispositivos y al mismo tiempo ganar en calidad de diseño.

Diseño por partes: Bootstrap y ASP.NET

Como bien sabes, el framework .NET, permite separar en diferentes páginas, la parte de diseño, y la de código (Code behind), y es posible programar en diferentes lenguajes. Los más comunes -que no los únicos- son VB.Net y C# (C Sharp).

No obstante, sea el que sea el lenguaje utilizado, el código se convertirá finalmente en un lenguaje común a todos ellos, a fin de ser procesado por .NET.

¿Y la cosa queda ahí? Pues no. Al final, es I.I.S. (El servidor de Internet de Windows), el que  reducirá todo, por muy complejo que sea el código, a HTML, CSS y JavaScript. Lo que hará posible que se pueda mostrar en los navegadores de los usuarios.

Ante este modelo, podemos intuir diferente formas de “meterle mano” al diseño de nuestros elementos y objetos. Por un lado tenemos las propiedades nativas de los objetos de servidor de ASP.NET destinadas a la apariencia de los citados objetos. Por otro lado, tenemos la posibilidad de aplicar temas y máscaras (skin) a esos objetos. Por último, tenemos los estilos CSS.

Realmente son muchas las posibilidades que se nos ofrece para poder aplicar la tecnología de Bootstrap a cualquier objeto ASP.NET, ya que, a la larga, esos objetos serán reducidos a simples elementos del DOM (Modelo de Objetos de Documentos) de la página Web.

¿Y cómo empezar?

Pues como siempre, la casa no se puede comenzar por el tejado ¿verdad?, empezaremos con la construcción de una maqueta donde quedará perfectamente determinada la estructura del proyecto. Os aconsejo que antes de emprender este viaje, te leas nuestros artículos sobre “El diseño web en los programas de gestiónhttp://blog.siinet.com/2015/07/24/el-diseno-web-en-los-programas-de-gestion-1/

Nosotros, para diseñar la estructura, preferimos trabajar en un entorno diferente al de desarrollo de Visual Studio, en nuestro caso, utilizamos Dreamweaver. También nos valemos de herramientas como Viewport Resizer para simular el resultado del diseño “responsive” en diferentes dispositivos y tamaños de pantalla. Evidentemente, esas preferencias, quedan a gusto de cada uno.

Una vez diseñada la estructura, lo que tenemos que hacer es copiarla, tal cual, en un fichero maestro, agregando a nuestro proyecto un nuevo elemento: Página Maestra (Master Page). Copiamos todos los archivos CSS y Javascript a los que haga referencia, y ¡Listo! Ya tenemos nuestros cimientos preparados para programar sobre ellos.

A continuación, y como ejemplo te mostramos una plantilla básica y sencilla con bootstrap:

Como puedes ver, esta plantilla hace referencia a los ficheros:

 

Por lo tanto, estos ficheros han de ser estar presentes en nuestro proyecto, bien añadiéndolos físicamente al proyecto, o haciendo referencia a las URL,s de sus repositorios.

Por ejemplo: http://code.jquery.com/jquery.min.js

Aunque esto sé que lo sabes, te recuerdo que la MasterPage tendrá una zona de contenido común que solo se podrá modificar desde la propia página, y otra zona de contenido variable que será diseñada y programada desde las páginas asociadas a la Maestra. Esta zona variable de la MasterPage, estará contenida en un control de servidor ContentPlaceHolder.

¡Bueno! Ya que tenemos nuestra estructura, vamos a empezar con los controles de servidor  ASP.NET más comunes: asp:TextBox y asp:Button.

El control <asp:TextBox>, como sabes es una caja de texto, y una vez compilado por IIS, queda  reducido a un simple objeto HTML, concretamente a un <input type=”text” >. A su vez, el control <asp:Button> que es el botón de toda la vida, tras la compilación, se convierte en otro  objeto HTML <input type=”submit”>. Es decir, que ambos, pasan a ser los típicos elementos que suelen formar parte de un formulario.

Por otro lado, sabemos que Bootstrap, aplica formatos muy elegantes y prácticos a los elementos de un formulario… ¡Pues ya está! No tenemos más que asignar alguna clase de Bootstrap a nuestros controles de servidor para darles “vidilla”.

Veamos un ejemplo.

Incluimos en nuestra página un control TextBox y un control Button y ponemos un título: “Formulario sencillo”

El resultado es:

Bootstrap y ASP.NET

Ahora asignamos las clases CSS de bootstrap y cambiamos el título

Y el resultado es:

Bootstrap y ASP.NET

Como ves, el cambio es abismal ¿verdad? Y sin embargo solo han cambiado unas cuantas propiedades respecto del primer formulario

 

Todavía podemos dar una vuelta más a la tuerca. ¿No te gustaría que apareciera en el botón un icono representativo? Para ello, hay que aplicar un truquito, y cambiar ligeramente la filosofía de los controles sin perder funcionalidad. Vamos a utilizar un control de servidor asp:LinkButton en vez del asp:Button.

Y el resultado es:

Bootstrap y ASP.NET

¿Chulo verdad? Pues solo hemos tenido que cambiar el control Button por un LinkButton y añadir la etiqueta <span> aplicándole la propiedad CssClass= ”glyphicon glyphicon-search”

Esto es posible, gracias a la magnífica galería de iconos de que dispone Bootstrap: “Glyphicon”, con más de 250 iconos que pueden utilizarse como fuentes de letra ¡una pasada!

Puedes verlos en http://getbootstrap.com/components/

También puedes ver el código funcionando en tutoriales.siinet.com/ejemplo1.aspx

Fíjate que la clase CSS para poner el icono, consta de dos partes: “glyphicon” y el nombre del icono (en este caso: “glyphicon-searh” que representa una lupa).

Y hasta aquí hemos llegado por hoy. En los próximos post, seguiremos avanzando en el maravilloso mundo del diseño Web aplicado al entorno de desarrollo de ASP.NET con Bootstrap.

2 pensamientos sobre “Bootstrap y ASP.NET: TextBox, Button y LinkButton

Luis Enrique

estimados como puedo agregar en reporting services en un archivo apsx

Respuesta
    UsrBlogSiiNet

    Hola Luis Enrique. Estamos trabajando en ello. En próximos artículos tendremos algún ejemplo de reporting services con ASP.NET.

    Respuesta

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *