Saltar apartados

Plantilles personalitzades

Com hem comentat en la introducció, qualsevol models que vaja a ser editat o visualitzat, pot ser personalitzada la seua presentació per mitjà de les plantilles.

Carpetes plantilles

ASP.NET MVC té una estructura de carpetes molt definida a l'hora de cercar on s'han definit les plantilles, i a més, ho separa per les quals són per a edició i les que són per a visualització.

Visualització
  • /Views/ControllerName/DisplayTemplates/TemplateName.aspx o /Views/ControllerName/DisplayTemplates/TemplateName.ascx
  • /Views/Shared/DisplayTemplates/TemplateName.aspx o /Views/Shared/DisplayTemplates/TemplateName.ascx

i en el cas que usem àrees (no es va a explicar inicialment en aquest curs)

  • /Areas/AreaName/Views/ControllerName/DisplayTemplates/TemplateName.aspx o /Areas/AreaName/Views/ControllerName/DisplayTemplates/TemplateName.ascx
  • /Areas/AreaName/Views/Shared/DisplayTemplates/TemplateName.aspx o /Areas/AreaName/Views/Shared/DisplayTemplates/TemplateName.ascx
Edició
  • /Views/ControllerName/EditorTemplates/TemplateName.aspx o /Views/ControllerName/EditorTemplates/TemplateName.ascx
  • /Views/Shared/EditorTemplates/TemplateName.aspx o /Views/Shared/EditorTemplates/TemplateName.ascx

i en el cas que usem àrees (no es va a explicar inicialment en aquest curs)

  • /Areas/AreaName/Views/ControllerName/EditorTemplates/TemplateName.aspx o /Areas/AreaName/Views/ControllerName/EditorTemplates/TemplateName.ascx
  • /Areas/AreaName/Views/Shared/EditorTemplates/TemplateName.aspx o /Areas/AreaName/Views/Shared/EditorTemplates/TemplateName.ascx

La meua recomanació és usar l'extensió ascx per a diferenciar clarament que són plantilles, del que són vistes per exemple.

Quan vam crear un projecte buit, veurem que no existeixen aquestes carpetes (DisplayTemplates o EditorTemplates) en l'estructura de directoris. En aqueix cas haurem de crear-la nosaltres mateixos.

Creant una plantilla

Hi ha un bon nombre de plantilles predefinides. Es poden consultar en la següent pàgina ASP.NET MVC 2 Templates, Part 3: Default Templates, i és possible modificar el comportament de qualsevol d'elles simplement anant a la carpeta corresponent (creant les subcarpetas que facen mancada) i editant el fitxer en qüestió.

Un exemple molt senzill que usen en aqueixa pàgina, que serveix per a explicar facilmente l'ús de les plantilles, és el de reemplaçar la visualització de les cadenes de text.

Seguint el criteri que hem comentat abans, hem d'accedir a /Views/Shared/DisplayTemplates/String.ascx

Plantilla para las cadenas de texto

Sabent que el codi que li correspon a String és

Código ASP.NET de la plantilla string

ho modifiquem afegint una cadena de text (Hello there!)

Código para la cadena de texto incluyendo un breve mensaje

El resultat serà el següent cada vegada que represente una cadena de text, el valor que li corresponga (Model) + la cadena de text que li hem afegit.

Resultado de modificar la plantilla de cadena de texto

L'exemple és molt bàsic, però és molt útil per a entendre que qualsevol element pot ser personalitza la seua aparença des de les plantilles.

Enllaços interessants

Servei d'Informàtica ASP.NET MVC 2 Framework


Universitat d'Alacant
Carretera de Sant Vicent del Raspeig s/n
03690 Sant Vicent del Raspeig
Alacant (Spain)

Tel: (+34) 96 590 3400

Fax: (+34) 96 590 3464

Per a més informació: informacio@ua.es, i per a temes relacionats amb aquest servidor web: webmaster@ua.es

Carretera de Sant Vicent del Raspeig, s/n - 03690 Sant Vicent del Raspeig - Alacant - Tel.: 96 590 3400 - Fax: 96 590 3464