Tecnocrata

Un arbol con jsTree y ASP.NET MVC (I) - Instalacion

Hace ya bastante tiempo que vengo trabajando con ASP.NET MVC y jQuery y una de las necesidades que tuve fue la de mostrar una estructura jerarquica como un arbol. En ASP.NET Webforms lo teniamos un poco mas simple porque el framework incorpora un componente Tree, pero como no estamos con WebForms y prometimos no mirar atras, tuve que buscar una alternativa jQuery que me permita hacer lo que busco y aunque existen varias alternativas, algunas por el lado de google, que no necesariamente son jQuery-friendly, me fui por jsTree.

Dejenme decir que este plugin es uno que no tiene una buena documentacion, tiene poco mantenimiento y esta bastante “alejado” del camino que tomo jQuery hace unos anios, pero aun asi decidi usarlo por su excelente performance y por darme excelentes resultados de satisfaccion con el cliente y practicamente cero reclamos con relacion a sus capacidades.

Bueno aqui les doy los pasos que debemos seguir para configurarlo, la descarga la pueden realizar desde esta pagina, y aunque el archivo que descargues tiene instrucciones de instalacion, estas son parcas o escuetas, entonces yo recomiendo instalar de la siguiente manera:

Los elementos mas importantes en la instalacion son estos dos que estan marcados

image

En el proyecto de ASP.NET MVC deben insertar los archivos en la siguiente estructura:

image

Aqui pueden empezar las observaciones, porque desde todo punto de vista el colocar imagenes y temas en la carpeta de scripts deja mucho que desear, pero este setup es el setup por defecto, para evitar hacer esto deberiamos hacer una modificacion en el archivo .js, pero eso va tambien en contra de lo que quisiera hacer, asi que en aras de mantener la simplicidad no modifiquemos nada y coloquemos los archivos como les sugiero (por ahora)

Finalmente en el archivo _Layout.cshtml, que hace las veces de “MasterPage” colocamos la siguiente linea:

image

Con todo esto ya tenemos listo el plugin de jsTree para ser utilizado.

En el siguiente articulo muestro como utilizarlo para mostrar datos en el arbol.

Un saludo

Posted: 12/7/2012 23:51 por Enrique Ortuño | con 1 comment(s)
Archivado en:
Comparte este post:

Comentarios

Tecnocrata ha opinado:

Luego del primer post de la serie , donde muestro como instalar y configurar jsTree , aqui les mostrare

# July 16, 2012 5:53 AM