Registro centralizado de scripts en MVC 4 y Webpages 2

ASP.NET MVCUna novedad que descubro en los tutoriales preliminares de la segunda versión de WebPages, y que por tanto tendremos disponible en las futuras versiones de WebMatrix y ASP.NET MVC 4, es la posibilidad de registrar los scripts y estilos que necesitan nuestros componentes visuales (sean layouts, vistas completas, parciales o helpers), centralizando su carga y evitando duplicidades.

Por ejemplo, imaginad que tenemos una vista parcial o helper que requiere la inclusión de una biblioteca de scripts concreta. Si introducimos los correspondientes tags <script>, y por cualquier causa necesitamos utilizar este componente más de una vez sobre la misma página, estaremos realizando una doble carga del archivo externo, lo que además de lento puede generar errores. Otros escenarios igualmente incómodos son cuando si hay varias parciales distintas que usan una misma biblioteca común, o cuando queremos generar los scripts en un lugar determinado del HTML (por ejemplo, al final de la página) también desde una vista parcial o un helper. Y por supuesto, lo mismo ocurre con los estilos CSS.

El Asset Manager es un componente introducido en WebPages 2, también disponible para MVC 4, que va a poner un poco de orden ahí, usando un mecanismo bastante parecido al disponible en Webforms desde hace bastante tiempo.

Así, el objeto estático Asset (definido en System.Web.WebPages) permite registrar bloques de script inline, referencias a archivos de script externos, bloques de estilos, y referencias a archivos de hojas de estilo usando métodos tan simples como los siguientes:
    Assets.AddScriptBlock("alert('hi!');", true); // Include <script> tag
    Assets.AddScript("~/scripts/jquery.1.6.2.js");
    Assets.AddScript("~/scripts/jquery.1.6.2.js");
    
    Assets.AddStyleBlock("p { font-size: 4em}", true); // Include <style> tag
    Assets.AddStyle("~/content/site.css");
Este registro se puede implementar en cualquier parte dentro del ciclo de ejecución de la vista: en la página de contenido, parciales, helpers, de forma que se irán registrando todos los elementos que puedan hacer falta. Más adelante, para generar los bloques almacenados basta, con hacer lo siguiente por ejemplo en el Layout:
            [...]
            </div>
        </div>
    </footer>
    @Assets.GetScripts()
</body>
</html>
El resultado en ejecución sería:
            [...]
            </div>
        </div>
    </footer>
    <script type="text/javascript">alert('hi!');</script>
    <script src="/scripts/jquery.1.6.2.js" type="text/javascript"></script>
</body>
</html>
Y de la misma forma, tenemos disponible un método @Assets.GetStyles() para obtener todos los bloques relativos a estilos de la página que hemos ido registrando, y que podríamos generar en el interior de la etiqueta <head>, por ejemplo.

Es interesante saber que, al generar el código, Asset detectará si existen dos referencias hacia el mismo archivo de script o estilos, en cuyo caso la referencia se generará sobre la página una única vez, aunque por razones obvias este control no se realizará sobre los bloques de scripts o estilos inline.

Publicado en: Variable not found.
Published 17/4/2012 17:53 por José M. Aguilar
Comparte este post:
http://geeks.ms/blogs/jmaguilar/archive/2012/04/17/registro-centralizado-de-scripts-en-mvc-4-y-webpages-2.aspx