Saltar apartados
  • Compartir página web
  • Compartir en Twitter
  • Compartir en Facebook
  • Compartir en Google+

Javascript no obstrusivo

Totes les aplicacions que desenvolupem han de complir la normativa d'accessibilitat vigent. Una de les normes ens indica que no introduïm esdeveniments dins dels elements HTML. Els validadores ho detecten i ens avisen que no siga necessari interactuar amb determinats elements que l'usuari que accedeix desconeix, que no pot visualitzar correctament, etc.

Un exemple de codi obstrusivo i per tant no vàlid seria

Provant Javascript obstrusivo

Per açò apareix el concepte de Javascript no obstrusivo i la validació en el client en ASP.NET MVC. Els podem configurar en el fitxer web.config dins d'appSettings.

  
    
    
  

Per defecte està configurat a true en tots dos casos. Si només volem que la validació es faça en el servidor i no per Javascript en el client, posaríem la primera a false.

La segona no l'anem a posar mai a false perquè llavors incompliríem la normativa d'accessibilitat.

Us estareu preguntant que és el que fa realment aquest atribut. L'objectiu és no incloure esdeveniments dins dels elements HTML que requerisquen tenir Javascript. Hem de donar la possibilitat al que dispose i vulga (es pot desactivar el Javascript) a poder interactuar amb la nostra aplicació per javascript i també treballar al que no ho dispose.

Per a no utilitzar esdeveniments el que crea són atributs dins de l'etiqueta HTML. Després si es disposa de Javascript i amb les llibreries jquery, jquery.validate.unobtrusive i jquery.unobtrusive-ajax, que se'ns creen en script en donar d'alta un projecte, es converteixen les etiquetes en esdeveniments. Per descomptat tot transparent per a nosaltres.

L'independitzar per exemple la validació de client en una llibreria externa és una bona tècnica principalment perquè el codi es queda molt net, no hi ha Javascript dins de les vistes. D'altra banda si el navegador no accepta totes les funcions doncs ja s'encarregarà de determinar que pot i que no, i finalment JQuery genera codi optimitzat per a cada navegador, amb el que no anem a tenir el dubte de si açò va a funcionar amb Explorer o Mozilla o Chrome.

És possible personalitzar una determinada vista perquè no execute validació en el client. Cal afegir la següent línia al principi de la vista.

@{
    ViewBag.Title = "Pàgina principal";
    HtmlHelper.ClientValidationEnabled = false;
}

Introduir codi Javascript

Per a introduir codi Javascript usarem sempre fitxers externs que després inclourem en la nostra vista o layout, mai ho escriurem directament en la vista. Encara que els navegadors ho interpreten perfectament, molts validadores ens alerten d'aquest mal ús. S'ha d'independitzar el codi HTML del Javascript.

Si hem d'incloure fitxers Javascript i ho han de tenir totes les vistes del nostre projecte, ho incloem en el layout.




    
    @ViewBag.Title
    
    
    
    <scriptsrc="@Url.Content("/Scripts/Llamadas.js")"type="text/javascript">script>
    <scriptsrc="@Url.Content("/Scripts/comun.js")"type="text/javascript">script>


Si volem personalitzar els fitxers a incloure el millor és crear-nos una secció en el layout.

    
    @ViewBag.Title
    
    
    
    @RenderSection("scripts", required:false);


I ja en la nostra pròpia vista definim la secció, que en ser opcional, de no definir-se no dóna missatge d'error.
@section scripts{
    
    
}

Servei d'Informàtica ASP.NET MVC 3 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