Saltar al contenido

Artículos, tutoriales, trucos, curiosidades, reflexiones y links sobre programación web ASP.NET Core, MVC, Blazor, SignalR, Entity Framework, C#, Azure, Javascript... y lo que venga ;)

17 años online

el blog de José M. Aguilar

Inicio El autor Contactar

Artículos, tutoriales, trucos, curiosidades, reflexiones y links sobre programación web
ASP.NET Core, MVC, Blazor, SignalR, Entity Framework, C#, Azure, Javascript...

¡Microsoft MVP!
martes, 12 de junio de 2012
ASP.NET MVCSabemos que las editor y display templates son magníficas herramientas de productividad que nos facilitan la creación de potentes interfaces de usuario. Resumidamente, son las vistas creadas específicamente para generar el interfaz de edición o de visualización de un objeto concreto que son almacenadas en las carpetas EditorTemplates y DisplayTemplates, dentro de /Views/Shared.

Lo más habitual es utilizarlas para crear editores o visualizadores para tipos de datos concretos, en cuyo caso las vistas disponibles en las carpetas citadas anteriormente se llaman igual que el tipo de dato a editar o visualizar.

Por ejemplo, si tenemos una vista llamada int.cshtml en la carpeta /Views/Shared/EditorTemplates , será la utilizada como editor de propiedades de tipo entero. Algo parecido utilizamos por aquí, hace ya bastante tiempo, para integrar jQuery datepicker en nuestras aplicaciones.

También es habitual encontrar en estas carpetas plantillas vinculadas a propiedades u objetos de forma directa mediante el atributo [UIHint] (como en este post), mediante el cual se indica explícitamente qué plantilla debe utilizarse:
    [DisplayName("Long description")]
    [StringLength(140), Required]
    [UIHint("LimitedTextArea")]  // Use the template "LimitedTextArea.cshtml"
    public string Description { get; set; } 

Y otra alternativa, aunque quizás algo menos utilizada, es la posibilidad de indicar la plantilla a utilizar en la misma llamada al helper EditorFor() o DisplayFor() que provoca su renderizado:
    @Html.EditorFor(m=>m.Description, "LimitedTextArea")
Sin embargo, hay una posibilidad adicional, que curiosamente no es demasiado conocida, consistente en utilizar el atributo DataTypeAttribute para indicar la plantilla de edición o visualización a emplear para la propiedad a la que se aplica.

El funcionamiento es trivial: decoramos las propiedades con [DataType] suministrándole como parámetro el tipo de información que va a contener, y el sistema intentará localizar una plantilla con ese nombre.  Veamos un ejemplo:
    [DataType(DataType.EmailAddress)] 
    public string Email { get; set; }
 
    [DataType(DataType.Time)]
    public DateTime StartDate { get; set; }
 
    [DataType(DataType.Html)]
    public string LongDescription { get; set; }
En el momento de renderizar un editor (o un display) template para la primera propiedad, el sistema utilizará, si existe, el archivo EmailAddress.cshtml; en caso de no existir, intentará localizar un string.cshtml, y si tampoco lo encuentra generará un editor por defecto. En el segundo caso se realizará la misma operación con Time.cshtml, y el último de ellos usará la plantilla Html.cshtml como primera opción.

Podemos utilizar como nombre de plantilla todos los valores que encontramos en la enumeración DataType:
  • DateTime
  • Date
  • Time
  • Duration
  • PhoneNumber
  • Currency
  • Text
  • Html
  • MultilineText
  • EmailAddress
  • Password
  • Url
  • ImageUrl
Publicado en Variable not found.

3 Comentarios:

Soren dijo...

Creo que deberías leer con detenimiento este libro:

ASP.NET MVC 4 in Action

http://manning.com/palermo3/

Vas a encontrar una auténtica mina sobre buenas prácticas de desarrollo en ASP.NET MVC.

Soren dijo...

Te paso un código de descuento por si quieres comprarlo:

palermo50ty

Disclaimer: no tengo ninguna vinculación ni con la editorial ni con los autores, sencillamente considero que es un libro fantástico para explotar al máximo el framework de ASP.NET MVC. Al ver tu comentario en este artículo he visto claro que te puede venir de perlas estudiar este libro en profundidad.

josé M. Aguilar dijo...

Muchas gracias, soren :-)