Cargando

Ir a contenido


 


ASP.NET MVC - Manipulación de Eventos en el DOM con jQuery

En este tutorial vamos a ver un poco más a fondo como trabajar con jQuery para la resolución de eventos en un documento HTML en nuestra aplicación con ASP.NET MVC.


Escrito por el may 31 2014 20:58 asp.net


El manejo de Javascript en su forma más pura dentro de una aplicación web siempre ha sido un punto de polémica, hay quienes defienden este estilo diciendo que hay ganancias en rendimiento y hay quienes prefieren utilizar un framework que les permita resumir la cantidad de instrucciones.

Sea cual sea la postura, todo lo que nos haga escribir código más corto y con menos errores es algo importante, claro el rendimiento es un tema muy importante que hay que tener en mente, pero para el manejo de eventos no hay nada como jQuery, este framework nos permite manipular el árbol DOM de una forma muy sencilla y tiene ya algunas capas para controlar como podemos activar los eventos.

Preparando un Evento con jQuery

Ya sabemos que con el evento onclick() podemos rastrear cuando un usuario hace click sobre el elemento asociado a este evento, a pesar que el código en Javascript puro no es muy complejo, cuando tenemos que hacer cosas cada vez más avanzadas terminaremos escribiendo una gran cantidad de código, por lo que resumir esto utilizando jQuery nos puede ser de mucha ayuda.

Veamos en el siguiente ejemplo como realizar un llamado onclick() utilizando en este caso jQuery:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<input id="btn-evento" value="T&oacute;came">
<script type="text/javascript">

function activarEvento() {
alert("Hola soy un evento en JQquery en ASP.NET MVC");
}
$(function() {
$("#btn-evento").click(activarEvento);
});
</script>

Aquí lo primero que nos llama la atención es la primera línea, en ella hemos incluido jQuery pero en vez de hospedarlo en nuestra aplicación vamos a llamarlo de la CDN de Google, esta es una buena práctica ya que nos permite tener un recurso siempre disponible y evitamos recaer en carga de nuestra parte.

Luego definimos un elemento con un id único para el documento, hasta aquí no hay nada en especial, viene ahora lo nuevo, vemos que tenemos un $(function(){}) esto es un elemento de jQuery que indica que se debe activar ese código una vez que nuestro documento termine de cargar, con ello nos aseguramos que todo lo que está dentro podrá ser visto por nuestra aplicación.

Finalmente le decimos a nuestro framework que cuando se haga click sobre el elemento con el id indicadom, active un método en este caso lo logramos con $("#btn-evento").click(activarEvento); la explicación puede parecer un poco larga, sin embargo con esta forma de trabajo nos podemos ahorrar muchos errores en código y resumir la cantidad de líneas incluidas.

Veamos cómo luce en nuestro navegador al ejecutar el código explicado:


Importante
Este trabajo de jQuery lo que hace es empaquetar todo el código que necesitamos para definir un evento, de forma que podamos hacer los llamados de una manera más simple, claro al ser esto una reinterpretación del Javascript como tal podemos tener un poco menos de rendimiento, pero en la actualidad es algo que no debe preocuparnos mucho, ya que las terminales actuales tienen suficiente potencial para manejar esto y más.


Con esto finalizamos este tutorial, viendo que tenemos más opciones que nos ayudan a manejar eventos en el lado del cliente, lo que puede ser una ayuda cuando estamos realizando aplicaciones complejas en ASP.NET MVC.
¿Te ha gustado y ayudado este Tutorial?
Puedes premiar al autor pulsando este botón para darle un punto positivo
-
VOTA
5
0%
4
0%
3
0%
2
0%
1
0%

  Información

  •   Publicado may 31 2014 20:58
  •   Actualizado jun 03 2014 09:08
  •   Visitas 761
  •   Nivel
    Profesional



Tutoriales Relacionados


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!
Demuestra que eres experto!
  ESCRIBIR TUTORIAL
Suscribirse