MVC3: Helper WebGrid (3/3)

Días atrás, os hable de este helper(aquí y aquí). Hoy voy a dar mas detalles de la personalización que nos aporta.

La función GetHtml(), presenta un parámetro que es “Columns”, el cual es del tipo "IEnumerable<WebGridColumn>”.

Si no lo especificamos al invocar a la función, por defecto, se van a visualizar las distintas propiedades de nuestro origen de datos.

Si queremos personalizar las columnas, podríamos hacerlo de la siguiente manera:

1) Declaramos un objeto que Implemente IEnumerable<T> como puede ser una Lista:

List<WebGridColumn> columnas= new List<WebGridColumn>();

2) Agregar las columnas que deseemos a la lista

Para añadir una nueva columna, podemos hacerlo de la siguiente manera:

columnas.Add(new WebGridColumn {[Propiedades] });

[Propiedades]: podemos definir las siguientes propiedades de las columnas:

  • ColumnName: Nombre de la Columna.
  • Header: Nombre que va a visualizarse en la cabecera de la tabla.
  • CanSort: Va a indicar si la tabla se puede ordenar o no, por la columna indicada.
  • Style: Estilo que se va a aplicar a las celdas de esta columna.
  • Format: Vamos a definir el contenido y el formato de cada celda.

Por defecto podemos agregar nuestras columnas del modelo de la siguiente manera:

columnas.Add(
    new WebGridColumn { 
        ColumnName = "EmployeeHireDate", 
        Header = "Hire Date", 
        CanSort = true, 
        Format = item => item.EmployeeHireDate }); 

El formato se realiza a través de una expresión Lambda y con un tipo dinámico.

Podemos añadir columnas, que sean del tipo MvcHtmlString, de la siguiente manera (el ejemplo es con un ActionLink):

columnas.Add(new WebGridColumn { 
    ColumnName = "Actions", 
    Header = "",  
    Format = item =>  Html.ActionLink("Edit", "Edit", new { id = item.EmployeeId })   });   

3) Enlazar la lista de columnas con la función.

Para mostrar las columnas que deseemos, se podrá realizar de la siguiente manera:

        <%= grid.GetHtml(columns: columnas);%>

A la hora de definir el WebGrid, me he dado cuenta de una peculiaridad, el valor por defecto del parámetro canSort es “True”, es decir, podremos ordenar para cada una de las columnas definidas.

Bien esto funciona, si no asignamos el parámetro Columns de GetHtml, o Habilitamos la Propiedad CanSort de las columnas que queramos que permitan ordenación.

Espero que os sea de utilidad.

MVC3: Helper WebGrid (2/3)

Como os indicaba el otro día, ha salido una Beta de MVC3, y han agregado el Helper WebGrid.

El método GetHtml, del objeto, nos va a permitir a través de una serie de parámetros como se va a visualizar y las opciones que nos va a permitir:

  • TableStyle: Estilo CSS predefinido para la tabla que se va a generar de forma automática.
  • HeaderStyle: Estilo CSS para la cabecera de la tabla.
  • FooterStyle: Estilo CSS para el pie de la tabla.
  • RowStyle: Estilo CSS para las filas Impares.
  • AlternateRowStyle: Estilo CSS para las filas Pares.
  • SelectedRowStyle: Estilo CSS de la fila seleccionada.
  • displayHeader: Indica si se va a visualizar la cabecera de la tabla o no.
  • fillEmptyRows: Indica si se va a rellenar hasta el numero de filas indicados en la paginación.(True/False)
  • EmptyRowCellValue: Indica el texto que se va a introducir en las filas dejadas en blanco cuando el parámetro anterior sea True.
  • column: Objeto de tipo IEnumerable con las columnas que se van a visualizar.
  • Exclusions: Listado de columnas que no queremos visualizar.
  • mode: Modo de paginado. Valores: All, FirstLast, NextPrevious y Numeric.
  • firstText: Texto de Ir a los primeros registros.
  • Previoustext: Texto de ir atrás.
  • nextText:Texto de ir al siguiente.
  • LastText: Texto de Ir a los últimos registros.
  • NumericLinksCount: Número de enlaces a mostrar.

Bueno, una vez parametricemos o no el método getHtml(), nos va a generar el código HTML, nos lo va a insertar en nuestra Vista.

Internamente, si hemos habilitado la paginación y ordenación nos va a generar el código que se encargue de llevar a cabo dichos métodos, sin crear ni una sola línea de código.

Espero que os sirva, y si tenéis cualquier duda aquí estoy.

Saludos!!

MVC3: Helper WebGrid (1/3)

Como todos sabréis hace un tiempo salieron grandes novedades en Microsoft, con la Beta de MVC3, NuPack y WebMatrix Beta 2 (Anuncio de ScottGu).

Este post va dedicado a un Helper agregado en MVC3 que no estaba en MVC2: WebGrid.

 

Este Helper, nos va a permitir definir un Grid, de manera muy rápida y sencilla:

1º: Definirlo:

<% WebGrid grid = new WebGrid(Parámetros) %>

2º: Hacer que se muestre:

<%= grid.GetHtml();%>

Como veis en la definición he indicado Parámetros. Entre los Parámetros admitidos por el constructor, encontramos los siguientes (entre otros):

  • Source: Origen de Nuestros Datos. Normalmente, va a ser el resultado de una Vista, del tipo IEnumerable<T>.
  • Columns: Nombre de las Columnas, del tipo IEnumerable.
  • DefaultSort: Filtro por Defecto que se va a utilizar.
  • RowsPerPage: Número de Filas por Página.
  • CanPage: Indica si está habilitada la paginación.
  • CanSort: Indica si está habilitada la ordenación

A la hora de mostrarlo con GetHtml, podemos definir que estilos CSS se van a utilizar, mañana pondré un segundo ejemplo con ello.

He creado un pequeño ejemplo, que podéis descargar desde aquí.

Saludos

PD: Podéis ver un ejemplo Con Razor, en el Blog de Shiju Varghese’s

MVC3: Valídación de elementos HTML Condicionales

Hasta ahora, tanto en aplicaciones WebForms como en ASP.NET MVC1 y ASP.NET MVC2, si queríamos dejar de comprobar la introducción de código HTML en alguno de los campos de nuestros formularios, teníamos que permitirlo en todos los campos, y a través de nuestras propias validaciones tratar de no permitirlo (javascript o código servidor).

En la Beta de MVC3, ha aparecido una modificación en el Atributo ValidateInput, que nos permite excluir algunos campos a la hora de validar nuestro formulario.

El nuevo parámetro del atributo, se llama Exclude, y nos permite introducir distintos campos de nuestro formulario separados por comas. Aquí va un ejemplo de la sintaxis:

[ValidateInput(true, Exclude = "ContentPost")]
public ActionResult Create()
{
    //Contenido de la vista.

}

Espero que os sea de utilidad!

Saludos.

Fuente WhitePaper MVC 3.

Me incorporo a Geeks.MS

Bueno,

Este es el primer post en mi nuevo BLOG aquí en Geeks, este es mi Blog Antiguo.

Lo primero que quiero hacer es dar las gracias por el Blog tanto a Josue Yeray, como a Rodrigo, por darme la oportunidad de añadir mi granito de arena a Geeks.

Este blog va a tratar de mis experiencias programando en Tecnologías Microsoft, desde VB.Net y C# hasta SilverLight, aplicaciones Windows, Web, Algo para Mobile, Bases de Datos, Controles personalizados…

Espero que os guste, y leer vuestros comentarios.

Un saludo a todos!