Implementar Plugins JQuery con MVC
Utilizar plugins JQuery en un proyecto MVC
En esta entrada veremos cómo implementar plugins de terceros en nuestro proyecto ASP.NET con MVC.
Es muy sencillo utilizar plugins de terceros, en este caso utilizaré de ejemplo el plugin inputDrag, que sirve para incrementar o disminuir el valor de un input haciendo click encima y deslizando el raton hacia la derecha o izquierda, tal y como podeis probar aquí: Demo.
Hay que tener en cuenta que cada plugin es diferente, por lo que los archivos que necesitaremos serán diferentes en cada caso (Archivos JavaScript, CSS…), exceptuando JQuery, que lógicamente es necesario en todos.
Necesitaremos:
- JQuery – Pagina de descarga de JQuery
- Plugin que queramos utilizar (En este caso inputDrag) – Descarga de inputDrag
Empecemos
Yo utilizaré VisualStudio 2015 y el proyecto que crea por defecto con MVC, vosotros podéis utilizar la aplicación y proyecto que querais.
Utilizaré el input «miInput», en la vista «Index».
- El primer paso es añadir los archivos necesarios a nuestro proyecto, en el caso de inputDrag solamente hace falta el archivo «inputDrag.js», y JQuery(jquery-3.1.1.min.js), que es necesario siempre. Yo crearé una carpeta llamada «Plugin» en la que ubicaré ambos archivos para tenerlo todo mas organizado:
- El siguiente paso es indicar que, si existe, la pagina debe renderizar la sección «scripts» que crearemos en el siguiente paso en nuestra vista maestra (En mi caso es la vista _Layout, en la carpeta Views/Shared, añadiendo al final de la etiqueta <body> la linea «@RenderSection(«scripts», required: false)» :
- Ahora debemos crear la sección que mencionamos en el paso anterior escribiendo en la parte superior de la vista donde queramos utilizar el plugin «@section scripts{}», y dentro de las llaves indicar los archivos que vamos a utilizar, en este caso «inputDrag.js» y «jquery-3.1.1.min.js» escribiendo la linea @Scripts.Render(«UBICACIÓN DEL ARCHIVO») para cada uno de ellos. Debería quedar de la siguiente forma:
- Por último, y dentro de la sección, a continuación de las lineas que acabamos de escribir, debemos poner una etiqueta <script> como si estuvieramos en la etiqueta <head> de una pagina cualquiera, y escribir el codigo JQuery que requiera nuestro plugin. Esto último varía dependiendo del plugin. Las instrucciones de cada plugin deben ser indicadas por el autor. En este caso, utilizando inputDrag, debemos escribir lo siguiente:
Es posible y muy común, que también incluya archivos css, en este caso, habría que hacer lo mismo que en los pasos 2 y 3, solo habría que cambiar el nombre de la sección y en lugar de @Scripts.Render() habría que poner @Styles.Render(), por lo demás es todo calcado.
Y listo, ya tenemos nuestro plugin funcionando. En caso contrario revisar el procedimiento que indique el autor, porque como he dicho antes, cada plugin es diferente y puede cambiar la forma de utilizarlo.
Descripción: Cómo implementar plugins JQuery de terceros en un proyecto MVC.
Autor: Sergio Galan Camacho
Curso: Microsoft MCSD Web Applications + SharePoint Apps
Centro: Tajamar
Año académico: 2016/2017