El blog de Javier Torrecilla : MVC

[MVC] Editando Colleciones con un Template

Javier Torrecilla — Wed, 04 Jul 2012 04:48:49 GMT

Introduccion

El otro día el Gran Eduard (@Eiximenis) me resolvió una duda que tenia acerca del modelBinder y el potente enlace de datos que presenta ASP.NET MVC.

Ha raíz de este post y del comentario de “ar7uro”, en el que planteaba la posibilidad de evitar las llamadas al servidor para ir agregando elementos a la colección.

Como resolverlo

Podríamos definir una variable javascript donde escribiéramos todo el código o hacerlo a través de la obtención del Html de la vista. Yo me he decantado por esta segunda versión.

Así que partiendo del ejemplo de Eduard, vamos a realizar algunos cambios:

- Dentro de la vista parcial:

   1:  @model MvcApplication5.Models.Direccion

2:

   3:  <div class="editor-label">

   4:      @Html.LabelFor(model => model.Calle)

   5:  </div>

   6:  <div class="editor-field">

   7:      @Html.Editor(string.Format("{0}[{1}].{2}", "Direcciones", "xxx", "Calle"))

   8:      @Html.ValidationMessage(string.Format("{0}[{1}].{2}","Direcciones", "xxx", "Calle"))

9:

  10:  </div>

  11:  <div class="editor-label">

  12:      @Html.LabelFor(model => model.Numero)

  13:  </div>

  14:  <div class="editor-field">

  15:      @Html.Editor(string.Format("{0}[{1}].{2}", "Direcciones", "xxx", "Numero"))

  16:      @Html.ValidationMessage(string.Format("{0}[{1}].{2}", "Direcciones", "xxx", "Numero"))

  17:  </div>

Hemos eliminado el Prefix y el número que se le va a asignar.

- Dentro de la vista de Cliente:

He modificado el código javascript, para realizar una primera llamada para obtener el html, y para que en el click del botón incremente el contador de Direcciones, y reemplace ‘xxx’ por dicho valor.

   1:  <script type="text/javascript">

   2:      var idx = 0;

   3:      var direccionTemplate = "";

   4:      $(document).ready(function () {

   5:          alert('hola');

   6:          $.get('@Html.Raw(Url.Action("CreateDir","Direcciones"))', function (data) {

   7:              direccionTemplate = data;

   8:          });

9:

  10:          $('#cmdNewDir').click(function () {

  11:              var newTemplate = direccionTemplate.replace(/xxx/g,idx.toString());

  12:              idx++;

  13:              $('#direcciones').append(newTemplate);

  14:          });

15:

16:

  17:      });

  18:  </script>

Espero que os sea de utilidad!!!

[Tip Rápido] Convivencia de WebForms dentro de MVC.

Javier Torrecilla — Mon, 25 Jun 2012 19:24:32 GMT

Introducción

En este pequeño post, vamos a ver un pequeño consejo rápido para ver como dentro de un mismo proyecto ASP.NET pueden coincidir páginas WebForms tradicionales con las Vistas de MVC.

Al Jaleo

Bien, el “truco” consiste en definir una ruta a ignorar dentro de nuestra tabla de rutas (en el fichero Global.asax) dentro de la función “RegisterRoutes”:

routes.IgnoreRoute("Carpeta");

De está manera todas los formularios Web existentes dentro de dicha “Carpeta”, no van a intentar ser mapeados dentro de la tabla de rutas de nuestra App.

Espero que os sea de utilidad.

Saludos

MVC: Trabajando con campos con etiquetas HTML

Javier Torrecilla — Tue, 10 Apr 2012 11:54:43 GMT

Introducción:

En este post vamos a ver como trabajar con un modelo donde una de nuestras propiedades va a almacenar valores de tipo HTML, como por ejemplo el contenido del post de un blog:

        1: <p>Este el texto del post, con un enlace <a href='http://bing.com'>bing</a></p>

Abordando el problema:

Partiendo de un modelo sencillo:

       1: public class Post

       2: {

       3:     public Guid ID { get; set; }

       4:     public string Title { get; set; }

       5:     public string Content { get; set; }

       6: }

donde nuestra propiedad “Content” va a ser la que va almacenar el código HTML vamos a cualificarla con el atributo AllowHtml, para que en el momento de grabar nuestros post desde el explorador, permitirá evitar la validación de dicho campo sin tener que comprobar las etiquetas HTML introducidas en él.

Posteriormente para poder visualizar nuestro HTML con el formato HTML, vamos a hacer uso del método Raw del Helper HTML, por lo que el contenido de nuestra vista quedaría:

       1: @foreach (var c in Model)

       2: {

       3:     <article>

       4:         <h1>@c.Title</h1>

       5:         @Html.Raw(@c.Content)

       6:     </article> 

       7: }

Espero que os sea de utilidad.

Saludos!!

MVC3 Release Candidate

Javier Torrecilla — Wed, 10 Nov 2010 08:26:00 GMT

Esto es un no parar, ayer salió la Release Candidate de MVC3, anunciada por ScottGu.

Podéis descargaros la nueva versión de aquí y ver las Notas de la descargar aquí.

¿Qué novedades trae esta versión?

- Soporte Intelisense para las vistas Razor:

(Una imagen vale más que mil palabras)

- Nuevos Atributos Interesantes:

ControllerSessionStateAttribute: Es un atributo para poder, digamos, alterar el uso de la Session.
El atributo recibe un valor de tipo SessionStateBehavior, el cual es una enumeración con los siguientes valores:

Default: Es el valor por defecto, que tenga la aplicación.
Disabled: Inhabilita el uso de Session en el controlador. Utilizar una variable de Session con este valor, va a provocar una excepción.
ReadOnly: Solo va a permitir consultar valores de Session, es decir, la escritura en variables de Session nos provocará una excepción.
Required:Va a permitir leer y escribir en las variables de Session.

[ControllerSessionStateAttribute(System.Web.SessionState.SessionStateBehavior.Required)]
    public class EjemploController : Controller

Atributos de Validación: Se han introducido algunos nuevos atributos como son:

SkipRequestValidation: es el equivalente al que hace unos días publique aquí. Nos va a permitir evitar la validación del código para elementos que no deseemos, por ejemplo un editor de texto… En el siguiente ejemplo muestro ambos atributos, cuyo resultado va a ser el mismo.

[ValidateInput(false)]
[SkipRequestValidation]
public string Message { get; set; }

CompareAttribute: Imaginaros, la típica situación donde tenemos una vista para crear usuarios, con una contraseña y otra caja de texto para validar la contraseña.
Este atributo, nos va a permitir a nivel de propiedad, establecer una comparación con otra propiedad de nuestro Modelo de una manera muy sencilla:

        [Required] public string Contraseña { get; set; }
        [Required]
        [Compare("Contraseña")]
        public string RepiteContraseña { get; set; }

Además del campo con el que comparar se pueden indicar las siguientes propiedades:

- ErrorMessage

- ErrorMessageResourceName

- ErrorMessageResourceType

Remote: Este es un atributo más que interesante, debido a que nos va a permitir realizar una validación cuando estemos editando un modelo, al igual que podríamos realizarla con JQuery, pero teniendo el código en el controlador. El atributo tiene varías sobrecargas, pero quizás la mas sencilla sea:

[Remote("Funcion","Controller")]
public string Topic { get; set; }

Está sobrecargar recibe 2 parámetros:

- Nombre de la función que se va a ejecutar para la validación.

- Controlador donde se encuentra la función a ejecutar

Es de entender, que el valor de retorno de la función tendrá que ser de tipo Boolean(bool)

Hay más novedades en esta “Release”, pero no voy a entrar a detallar más, os dejo que juguéis un poco con ella, estoy convencido de que os va a gustar.

Se me olvidaba comentar que os paséis por el Blog de Eduard para ver el tema de Unobstrusive Ajax!!!

Un saludo.

Mas Helpers de MVC3

Javier Torrecilla — Mon, 08 Nov 2010 22:23:00 GMT

que Continuando con los distintos Helpers que han sido introducidos, Redes Sociales y Bing o Los WebGrid y WebChart, entre otros, os voy a hablar de otros novedosos, y que hoy en día se antojan casi como necesarios.

HELPER VIDEO:

¿Quién no se ha visto en la necesidad de incrustar un video flash, o un video Media Player en una web con WebForms?

Bueno, pues el equipo de MVC ha introducido este nuevo Helper, para “facilitarnos” el trabajo. Presenta los siguientes métodos, para mostrar distintos tipos de videos:

- Flash (Video con formato Flash): El único parámetro requerido es la ruta del fichero a reproducir, el resto de parámetros son los siguientes:

- MediaPlayer (Video con formato WMP): El único parámetro requerido es la ruta del fichero a reproducir, el resto de parámetros son los siguientes:

<%= Video.MediaPlayer("http://boss.streamos.com/wmedia/ume/thewho/mygeneration.asx")%>

- SilverLight: Requiere los parametros de Ruta, ancho y alto, y además presenta los parámetros:

LINKSHARE VIDEO:

Algo que está muy en auge, como os indicaba, son las distintas redes sociales, y compartir la información que encontramos en Internet en ellas.

Por ejemplo, aquí mismo al finalizar este artículo, os vais a encontrar con una barra para compartir el Post, ya sabéis difundir el mensaje (Bueno solo si os gusta, jeje).

Al grano, en MVC3 se ha incluido el Helper LinkShare, el cual de una manera muy sencilla nos va a permitir poner una barra de “Compartir” en nuestras vistas:

<%: LinkShare.GetHtml("Comparte Mi Sitio") %>

El único parámetro requerido es el Nombre del Sitio a compartir. Otros parámetros:

Y el resultado:

Bueno por hoy ya os he dado algo de caña para que veáis lo que Mola MVC y las nuevas ventajas de MVC3.

Un saludo

Helpers Redes Sociales en MVC3

Javier Torrecilla — Mon, 08 Nov 2010 13:32:05 GMT

En varios BLOGS, se habían anunciado para MVC3 helpers para aportar una rápida integración con las Redes sociales (Twitter, FaceBook…), Buscadores (Bing)…

Si ya tenemos en nuestro entorno instalada la Beta 3 de MVC, vamos a crear un nuevo proyecto de ejemplo.

Una vez creado, vamos a agregar un paquete a través de NUPACK, para poder incluir los Nuevos Helpers. Para ello, pulsamos con el botón derecho en el proyecto y elegimos “Add package reference”:

Seleccionaríamos “microsoft-web-helpers” y pulsamos en aceptar.

Una vez realizado, a la carpeta de referencias se habrá añadido la referencia “Microsoft.Web.Helpers.dll”. Para que funcione de manera correcta vamos a compilar el proyecto.

Bien una vez instalado y compilado, vamos a ir a nuestra vista por defecto para hacer unos pequeños ejemplos, que voy a poner con una vista normal (no Razor):

TWITTER Helper:

Vamos a empezar con Twitter (que me gusta más :p Mi Twitter):

Si en nuestra vista tecleamos “<%= “ o "<:”

Podremos ver los contenidos que nos va a mostrar el Intellisense. Bien si tecleemos Twitter nos va a aparecer nuestro nuevo Helper.

¿Qué métodos presenta?:

- Profile: Nos permite mostrar el contenido de nuestro perfil en Twitter. Aunque el único parámetro obligatorio es twitterUserName, os dejo una imagen con los distintos parámetros:

Como quedaría el código, de manera simple:

    <%: Twitter.Profile("jtorrecilla")%>

Cuando ejecutamos nuestra vista quedaría algo así:

- Search: El otro método disponible es el método de Búsqueda. Al igual que con el método Profile, tiene varios parámetros, pero el único obligatorio es: SearchQuery, Os dejo una imagen con el resto de parámetros.

El código quedaría así:

<%=Twitter.Search("MVC") %>

El resultado de una búsqueda sencilla sería:

FACEBOOK Helper:

Seguro que cada vez que vas a alguna web / blog te encuentras con el típico botón de “Me gusta” para publicarlo en FaceBook, pues ha llegado a MVC el Helper, que te lo permite hacer de una forma muy sencilla.

El único método de este Helper es “LikeButton”. Presenta varios parámetros, todos ellos opcionales, y los podeis ver aquí:

En código un ejemplo sencillo sería:

 <%= Facebook.LikeButton("http://geeks.ms/blogs/jtorrecilla/") %>

Y el resultado (antes y después de pulsar en Me Gusta):

BING Helper:

Este Helper nos va a permitir incrustar el buscador de BING, en nuestras vistas con 2 sencillo métodos:

- SearchBox: El código sería muy sencillo, aunque el método puede recibir distintos parámetros, todos ellos opcionales: Url del sitio, y Tamaño de la Caja que se va a visualizar.

    <%=Bing.SearchBox() %>

Visualización Ejemplo:

- AdvancedSearchBox: Igual que el anterior con los siguientes parámetros:

Bueno después de la parrafada que os he soltado, solo espero que os sea de utilidad.

Un saludo.

MVC3: Helper WebGrid (3/3)

Javier Torrecilla — Thu, 28 Oct 2010 06:26:00 GMT

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)

Javier Torrecilla — Thu, 28 Oct 2010 06:22:16 GMT

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)

Javier Torrecilla — Thu, 28 Oct 2010 06:21:03 GMT

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

Javier Torrecilla — Wed, 27 Oct 2010 14:38:00 GMT

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.