Cargando



ASP.NET MVC - Manipulación de Elementos en el DOM

En este tutorial vamos a ver los conceptos básicos de modificar el DOM utilizando JavaScript en nuestra aplicación con ASP.NET MVC.


jun 08 2014 01:46
Profesional
jun 09 2014 21:46
Además de poder manipular los eventos cuando interactuamos con los elementos, Javascript nos permite modificar las características básicas de estos, esto resulta muy útil ya que con un evento podemos hacer que un elemento cambie de color o agregar tal vez un nuevo elemento.

Lo más interesante es que con la ayuda de ASP.NET podemos crear rutinas que interactuando con los controladores nos generen este tipo de comportamiento de forma dinámica y con contenido de base de datos.

Modificar el DOM
Para modificar el DOM vamos a utilizar jQuery ya que este framework de Javascript nos permite ahorrarnos mucho código y ya posee algunas características que hacen que sea compatible con la mayoría de los navegadores, esto último es porque debemos recordar que todo lo que hacemos en el DOM es en el lado del cliente, por lo tanto es su entorno el cual puede o no limitarnos.
.

Cambiar el CSS

El CSS es lo que le va a dar estilos a nuestros elementos en el DOM por ello es muy importante, imaginemos que tenemos alguna validación y queremos que cuando no se pase dicha validación mostremos un cuadro rojo para indicar el fallo, al manipular el DOM podemos lograr esto de la siguiente forma, veamos la imagen con el ejemplo:

asp_manipular_ele_dom.jpg


Acá destacamos es el método .css(), como vemos le pasamos dos parámetros, el primer parámetro es la propiedad CSS que queremos agregar o activar y el segundo parámetro es el valor que dicha propiedad debe tomar.

Añadir un Elemento Nuevo

No solo podemos cambiar elementos existentes, también podemos agregar nuevos elementos, con ello podemos insertar texto, agregar nuevos bloques, etc.

¿Qué método utilizar?
Para ello podemos utilizar el método .append(), donde como parámetro le colocaremos el contenido HTML que deseamos insertar en nuestro DOM, lo único que debemos tener en cuenta es que necesitamos un elemento con un id único para poder utilizarlo como selector, veamos en la siguiente imagen como podemos lograr esto.



asp_manipular_ele_dom2.jpg


También podemos remover elementos, esto es muy importante ya que se pueden lograr efectos de movimiento y acción en la aplicación, con ello el usuario verá en tiempo real los efectos de sus acciones, para ello utilizaremos el método .remove() y dentro le pasaremos el selector que deseamos quitar de nuestro DOM:



Aquí vemos en el ejemplo como eliminamos el elemento de forma muy fácil únicamente indicando la etiqueta sobre el selector.

Otras Propiedades

Podemos manipular todas las propiedades del elemento, lo único es que debemos documentarnos, ya que es difícil saberlas todas de memoria, sin embargo en Internet tenemos la guía de jQuery con lo cual podemos utilizar la documentación oficial mientras vamos haciendo nuestro desarrollo.

Lo importante en este caso es saber que deseamos hacer, ese es el punto clave luego podemos ir investigando y aprendiendo en camino, mientras sepamos el aspecto básico estaremos bien.

Con esto finalizamos este tutorial, como vemos es bastante fácil interactuar a un nivel más alto con el árbol DOM, gran parte de esta facilidad se la debemos a jQuery quien nos facilita esta interacción.

¿Te ayudó este Tutorial?


Sin comentarios, sé el primero!

No esperes más y entra en Solvetic
Deja tus comentarios y aprovecha las ventajas de la cuenta de usuario ¡Únete!

X