Aplicación web con ASP.NET MVC 2 – Estilos en nuestras tablas

Ya que estamos trabajando con vistas con contenido List, estas nos crean tablas que pueden mostrar varios registros y lo tedioso puede ser que al tener unos 30 registros o más tenemos que desplazar la página para ir recorriendo la lista.

Una de las soluciones es utilizar CSS para crear un contenedor deslizable en nuestra vista y sin mover la página podamos desplazar el contenido de la tabla.

Img. 1. Tabla deslizable en nuestra página con CSS.

Img. 2. Crear nuevo CSS.

Para lograr esto en la carpeta Content  de nuestro proyecto (en el explorador de windows) crearemos un nuevo archivo llamado resaltar_tabla.css (después incluimos nuestro archivo en el proyecto), ahora antes de empezar si no estamos familiarizados con CSS, busquemos en la red algún tutorial ya que sobre CSS hay mucha información, uno de los sitios más ricos en información acerca de css es http://www.w3schools.com/css/

.

.

El contenido de nuestro archivo resaltar_tabla.css es el siguiente:

table tr:hover{
 background-color:#F0F3FA;
}

#lista > table {width:99%}
#lista {
    width:800px;
    height: 120px;
    overflow:auto;
    padding-bottom:3px;
}

.derecha
{
    text-align:right;
}

Donde:

  • table tr:hover{ … } asignamos un color de fondo a la fila que le estemos pasando puntero del ratón, si desea otro color, utilice algún mezclador de colores para obtener un color deseado, un mezclador de colores en línea es http://www.colorpicker.com/.
  • #lista > table {99%} en esta linea #lista es el ID de un DIV que agregaremos como contenedor de nuestra tabla; table{99%} estamos indicando que la tabla ocupe el 99% del ancho total de nuestro DIV.
  • #lista { width: 800px; height: 120px; … } estamos asignando los estilos a nuestro DIV el cual tendra un ancho de 800 pixeles y un alto de 120 pixeles (el resultado es la img 1), 120px se estableció solo como prueba, debe modificar estos valores de acuerdo a sus necesidades (alto un ancho del contenedor para mostrar la tabla.)
  • .derecha { … } es un estilo que alinea el texto a la derecha de cualquier elemento HTML que lo herede.

Nota: tenga en cuenta que en la img 1 se aprecia la barra de desplazamiento del DIV porque el alto es solo de 120 px y  el alto del contenido de la tabla es mayor a 120px, por lo tanto si al aumentar el alto del DIV y el alto del contenido de la tabla en pixeles es menor que el alto del DIV, la barra de desplazamiento no se mostrará.

Antes de utilizar nuestro CSS, nuestra vista Index de AdministrarPE se aprecia de esta forma:

Img. 3. Vista original.

Agregar el CSS a Site.Master.

Abra el código de la plantilla del sitio y agregue la línea de código correspondiente para utilizar nuestro nuevo archivo CSS.

 <link href="../../Content/Site.css" rel="stylesheet" type="text/css" />
 <link href="../../Content/misestilos.css" rel="stylesheet" type="text/css" />
    <link href="../../Content/estilo_tabla.css" rel="stylesheet" type="text/css" />

Nota: recuerde que las lineas tachadas ya están en nuestro archivo y no deben eliminarse.

Modificar la vista Index del controlador AdministarPE:

Ahora lo que haremos a nuestra vista es agregar el DIV que comentamos y agregar el pie a nuestra tabla.

El código de nuestra vista quedará en parte como se muestra en el siguiente código, recuerde que solo vamos a agregar lo que nos hace falta para complementar nuestras funciones, no volveremos a implementar desde cero nuestra vista.

El código que ya tenemos está tachado y el resaltado en negrita es el que vamos a agregar.

 <h2>Lista de programas educativos.</h2>

 <div id="lista">
    <table>
 <tr>
 <th></th>
 <th>
 Id
 </th>
 <th>
 Nombre
 </th>
 <th>
 Nombre corto
 </th>
 </tr>
 <tfoot> <tr>
 <th class="derecha">Total</th>
 <th colspan="3"><%:Model.Count() %> Programas educativos</th>
 </tr>
 </tfoot>
  ... contenido de nuestra tabla (aquí va el foreach que genera las filas.) ...
 </table>
 </div>

Ahora ejecutemos nuestra aplicación y vayamos a AdministrarPE y tendremos el resultado:

Img. 4. Resultado final con el nuevo estilo CSS.

Observe que al pasar el ratón sobre alguna fila, esta cambia su color de fondo.

Ahora haga lo mismo que se hizo con la vista Index.aspx a las vistas que desee mostrar la tabla deslizable en el DIV (vistas con contenido List), solo recuerde que ya no tendrá que crear más archivos CSS y agregarlos, ya que ya se encuentra agregado en nuestro Site.Master, solo agregará el pie a la tabla y el DIV.

Vista: Index de AdministrarTutores.

Img. 5. Lista de tutores.

¡Suerte…!

Anuncios

Un comentario en “Aplicación web con ASP.NET MVC 2 – Estilos en nuestras tablas

  1. Hola felipe, muy buenos post publicas, lo agradesco por compartir sus experiencias, Felipe yo le quisiera preguntar como utilizaria una ventana flotante en mvc, estaba revisando un poco Telerik, no se si puedes realizar un ejemplo.

Escribe tu comentario:

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s