domingo, 17 de abril de 2011

[jQuery] Por donde comenzar

 

Introducción

jQuery es una de las librerías muy mencionada en los ultimo tiempo para el desarrollo de aplicaciones web.

Usar javascript de forma estándar puede ser algo bastante tedioso ya que no es una sintaxis del todo amigable para el trabajo diario, o al menos para quien esta acostumbrado a programa en un lenguaje amenos como ser C# o VB.NET.

Es por eso que surge jQuery, para solventar este problema, siendo el mas conocido entre los frameworks de javascript, (esta se gano su lugar en los témplate para la creación de proyectos como son los utilizados en aplicaciones con ASP.NET MVC), y el que dio impulso a la utilización de este tipo de frameworks,  vale aclarar además que también existen otro como ser: Prototype, MooTools, etc

Este articulo en particular se sumara a los miles que existen publicados para aportar un punto de inicio para quienes aun no conocen la magia de esta librería.

Aquí no se pretende explicar cada unos de los aspectos de jQuery, porque solo el tema se selectores es enorme y muy variado, sino que iremos a casos concretos, y analizaremos particularidades en el uso de la librería.

jQuery es muy amplio, con mucha flexibilidad, cuando la usen verán que no hay una sola forma de hacer las cosas, a veces se pueden aplicar un selector con distintas combinaciones y todas estarán correctas.

Es por eso que es necesario recurrir a la fuente y consultar la documentación provista por la propia librería en su sitio web: jQuery

Para empezar veremos dos puntos básicos que afectan a la interacciones de asp.net y javascript, luego continuaremos con el análisis de dos controles simples para entrar en tema.

 

1 – Acceder a los controles de asp.net

Algo que debe conocerse cuando se trabaja con controles desde javascript es como hacer referencia a estos.

Por ejemplo, si en el html de una pagina se define:

<input id="Text1" type="text" />

desde javascript podría seleccionar el control usando:

var text1 = document.getElementById('Text1');

de esta forma se seleccionado el control cuando se trata de uno del tipo html, pero que sucede si ahora se tiene un control de asp.net, aquí ya no somos quienes controlamos el render del control, por lo tanto el ID asignado al mismo puede variar.

Muy bien, ahora si realizamos unas pruebas y ponemos un asp:TextBox en una página

<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>

al acceder desde el browser se vera como

<input name="TextBox1" type="text" id="TextBox1" />

ups, pero que sucedió aquí el id no se modifico, seguro pensaran que estoy mintiendo, pues bien, lo que sucede es que en algunas situaciones asp.net no cambie el id del control, porque en este caso no lo requiere, el verdadero problema se presente cuando este control esta contenido dentro de ciertos contenedores, como ser: un User Control, la Master Page, o controles que repiten un témplate, como ser el ListView, GridView, Repeater, etc

Entonces que sucede ahora si se crear un User Control (WebUserControl1.ascx) con el textbox dentro del mismo y se lo ubica en una pagina, al acceder al código del browser se obtendrá

<input name="WebUserControl11$TextBox1" type="text" id="WebUserControl11_TextBox1" />

Ahora si se comprueba como asp.net modifica el id asignado al control en tiempo de diseño, asp.net necesito ponerle un prefijo con el nombre del User Control para que este sea único, ya que en la pagina puede usarse mas de un mismo user control, sino redefine el id puede haber colisiones en los nombres.

Como se haría para seleccionar este control sino se conoce previamente el id que será generado, pues bien, se dispone en asp.net de la propiedad ClientID, siendo usada de la siguiente forma:

var userControlText1 = document.getElementById('<%=TextBox1.ClientID%>');

al inspeccionar el código resultante en el browser se obtendrá

var userControlText1 = document.getElementById('WebUserControl11_TextBox1');

el tag <%=  %> permite ubicar allí el valor de la propiedad ClientID.

Si bien esto que comento parece un dato menos, es bastante importante cuando se comienzan a dar los primeros paso en javascript mezclado con controles del asp.net

 

2 – Acceder a controles asp.net desde un archivo .js

Continuando con el tip del punto anterior, avanzaremos en un tema que por ahí pueda generar dificultades a la hora de ordenar el código.

En algunas oportunidades uno requiera hacer uso de archivos .js para llevar allí el código javascript y trabajarlo de forma separada al html que esta en el aspx, pero es aquí donde empiezan los problemas.

Resulta que si se hace uso del tag <% %>, este solo puede ser aplicado dentro de la página donde se hace el render por parte de asp.net, o sea solo funciona dentro del aspx

El archivo .js es referenciado por el aspx, pero este no se incluye en el proceso de render, por lo tanto el ClientID nunca será reemplazado.

Pero hay una solución a este punto, la cual consiste en dejar la definición del tag <% %> dentro del aspx, pero que la misma solo asigne a una variable javascript el nombre del control, luego sera usada en el .js para así poder tomar el control y trabajarlo.

En la carpeta “Ejemplo2” esta la implementación del código de ejemplo, se observara la declaración de las líneas

<script type="text/javascript">

    var TextBox1 = '<%=TextBox1.ClientID%>';

</script>

en donde se asigna en la pagina aspx el nombre como string, para luego dentro del .js usar

function ObtenerValor() {

    var text1 = document.getElementById(TextBox1);
    alert(text1.value);

}

Es necesario apreciar como cambio la selección al usar el getElementById(), usando ahora el nombre de la variable.

El único problema que se presenta es que por cada control que se quiera usar dentro de .js será necesario crear una variable en la pagina que incluya el ID que asp.net asigna.

 

3 – Obtener y asignar el valor de un Texbox

Seguramente se preguntaran “cuando comenzamos”, es cierto hasta aquí se presentaron temas mas relacionados con javascript, que al propio jquery, pero eran necesario tenerlos presente ya que estos también afectan al desarrollo.

Bien, comencemos con algo simple.

Seleccionemos el valor de un TextBox, copiando el contenido a otro:

[HTML]

<form id="form1" runat="server">
    <table>
        <tr>
            <td>
                <input id="txtInfo" type="text" />
            </td>
            <td> 
                <input id="btnMostrar" type="button" value="button" onclick="Mostrar_OnClick();"/>
            </td>
            
        </tr>
        <tr>
            <td colspan="2"> 
                <input id="txtInfoCopia" type="text" />
            </td>
        </tr>
    </table>
</form>

[JavaScript]

function Mostrar_OnClick() {

    var info = $('#txtInfo').val();

    $('#txtInfoCopia').val(info);
    
}
 

como se observa jquery lo hizo bien simple.

Es preciso conocer que cuando uno selecciona un control y lo hace por el atributo “id” debe anteponer el “#”, este es uno de los tanto selectores tiene jquery que iremos viendo.

Para que esto funcione es necesario contar con la librería, en este caso se encuentra en la línea

<script src="../script/jquery-1.5.2.min.js" type="text/javascript"></script>

por lo general se sitúa en la propia pagina, pero también es común verlo en la Master Page para que todas incluyan la librería, y no se tenga que declarar en cada una particularmente.

Y que sucede si se tratan de controles de asp.net, bien es igual de simple, pero conociendo lo que vimos en el punto: “1 – Acceder a los controles de asp.net”, se obtendría la misma funcionalidad usando:

[JavaScript]

function MostrarASPNET_OnClick() {

    var info = $('#<%=txtInfoASPNET.ClientID%>').val();

    $('#<%=txtInfoCopiaASPNET.ClientID%>').val(info);

}

Avancemos un poco inicializando los textbox, para hacerlo individualmente se podría aplicar algo como esto:

[JavaScript]

function LimpiarASPNET_OnClick() {

    $('#<%=txtInfoASPNET.ClientID%>').val('');

    $('#<%=txtInfoCopiaASPNET.ClientID%>').val('');

}

es idéntico a lo que ya se viene viendo solo que no se le pasa valor

Y si se quiere limpiar el contenido de todos los textbox, se deberá asignar uno a uno?, no es necesario, hay técnicas mucho mas simples:

[JavaScript]

function LimpiarTodos_OnClick() {

    $(':text').val('');

}

aquí se puede ver otro selector distinto proporcionado por jQuery, en este caso se trata de un selector por tipo text el cual aplicara el valor a todos los controles que encuentre del tipo textbox.

Ahora bien, lo lindo que tiene esta librería es que no hay una sola forma de hacer esto, si se revisa la documentación: :text Selector, menciona que usar $('[type=text]') o $('*:text') y también $('input:text') son equivalentes, pero por simplicidad en la escritura se aplica :text

Nota: los ejemplos de esta sección se encuentra en el “Ejemplo 3” del código publicado.

4 – Trabajar con controles Label

Asignar un valor a un label difiere un poco de como se haría a un TextBox.

En el ejemplo de la carpeta “Ejemplo 4” se encontrara una muestra de como trabajar con este otro control.

en la pagina se agrego un label html

<label id="lblInfoCopia" />

y uno de asp.net

<asp:Label ID="lblInfoCopiaASPNET" runat="server"></asp:Label>

accederlo de forma individual no representa mayor problema, salvo por el hecho de cambiar el val() por el html() para tomar o asignar un valor.

Pero el seleccionar todos los labels de la pagina no es tan directo, ya que se renderiza diferentes en html estos controles, si se analiza el código generado en el browser se notara que el label de html sigue siendo un label, pero el de asp.net no lo es, ya que es transformado a un tag <span> cuando se convierte

Es por esto que debe seleccionarse distinto cada control.

[JavaScript]

function Mostrar_OnClick() {

    var info = $('#txtInfo').val();

    $('#lblInfoCopia').html(info);

}

function MostrarASPNET_OnClick() {

    var info = $('#<%=txtInfoASPNET.ClientID%>').val();

    $('#<%=lblInfoCopiaASPNET.ClientID%>').html(info);

}

function LimpiarASPNET_OnClick() {

    $('#<%=txtInfoASPNET.ClientID%>').val('');

    $('#<%=lblInfoCopiaASPNET.ClientID%>').html('');

}

function LimpiarTodos_OnClick() {

    $(':text').val('');
    $('label').html('');
    $('span').html('');
}

 

 

Conclusión

Hasta aquí hemos tenido una introducción general a las particularidades del uso de javascript cuando se tratan controles asp.net.

También hemos visto como tratar dos controles muy usados en las paginas como son los textbox y labels.

En próximos artículos veremos mas controles ya sean html o asp.net, como adjuntar evento y recorrer el resultado de una selección para trabajar con cada uno de sus ítems

 

Código Ejemplo


 

24 comentarios:

  1. Muy buen articulo Leandro, pero si bien es cierto q JQuery nos hace la vida más facil, q desventajas el encontrarias?

    ResponderEliminar
  2. hola julito

    Para hablar de ventajas y desventajas es necesario comparar contra algo, en este caso el articulo siempre compara contra el uso de javascript clasico que uno usaria, comparado contra este deventajas no hay ninguna, o al menos en mi uso diario no puedo ver ninguna, porque justamente es una libreria que surgio para hace javascript simple.

    Ahora bien si la idea es compararlo con ajax propuesto por Microsoft, con el UpdatePanel y demas controles del ajax toolkit, bueno ahi si se podrian enconrar algunas, pero mas que nada orientadas a la rapidez del desarrollo, ya que los componentes ajax estan pensados para un desarollo rapido en donde arrastras controles y todo sale andando, pero esto tambien tiene sus problemas, ya que pierdes control y si lo usas mal (que es lo mas comun) puede bajar la performance de la aplicacion.

    Quizas como desventaja comparado con las ajax toolkit podria decirse que a veces no es tan simple de usar, o no es tan rapido de implementar, igualmente esto es mas que nada causado en general por una poco experiencia, en cuanto se le toma la mano es muy simple.

    Ahora adentrandose a la integracion con el entorno de desarollo, podria ser una desventaja el no tener un intellisense completo, hay algunas tecnicas que añaden esta caracteristica, pero por ser javascript nunca se termina de integtrar del todo, y el debug aun es bastante duro, se puede depurar pero comparado con la facilidad de lenguajes de .net como ser vb.net o c# hay mucha diferencia.

    En resumen desventajas encuentro pocas, mas que nada porque programe algunas cosas en javascript y viendo lo duro que es, y luego teniendo jquery uno simplemente tiene agradecimientos a quien lo creo.

    ahh una muy buena ventaja es que hay miles de controque usan de base a jquery, lo cual es excelente para usar en los sitios.

    Tambien ten en cuenta que en desarrollos con ser ASP.NET MVC Microsoft integra esta libreria en sus template, cuando creas proyectos de este tipo ya aparece jquery integrado, esto algo quiere decir, solo una libreria tan popular haria que se integre de base en los template del VS.

    bueno espero sea util estos comentarios

    saludos

    ResponderEliminar
  3. Que tal Leandro, queria consultarte si has usado jQuery desde paginas maestras? Ya que estoy teniendo un problema en esa situacion.
    Invoco cualquier funcion jQuery y me esta dando un error que dice "jQuery not defined".
    Gracias.
    Saludos.
    Muy bueno tu blog.

    ResponderEliminar
  4. hola Ele

    recuerda cuando definas el path relativo de la url del tag <script> que este toma la referncia en base a cada pagina

    o sea si la master esta en el raiz del sitio y la pagina esta en una carpeta el part deberia usar
    ../script/jquery.js

    mas alla que la master este en el raiz se usa ../ porque el render final es el de la pagina aspx

    por eso seria bueno si el link lo asignas desde codigo usando el ~/
    pero recuerda que este solo aplcia si es codigo .net el que resuelve la url, directo en el tag script de html no aplica

    saludos

    ResponderEliminar
  5. Leandro,

    Utilice tus ejemplos para asignar a un textbox el resultado de un input que le pido al usuario en javascript.

    Son unas observaciones para cancelar un proceso, pero tengo el problema que en el codebehind llamo a mi funcion java para pedir el input, luego ahi le asigno el texto al textbox y luego en el codebehind quiero seguir con la grabación pero aún no puedo leer la propiedad Text del textbox a quien le asigne la informacion.

    Obviamente se puede ver que ya esta la info ahi, pero desde el codigo no lo puedo capturar.

    Puse un boton solo para leer ese textbox asignado en javascript y ahi si lo leo, asumo que es porque hay un postback.

    La idea es que secuencialmente no puedo seguir con el codigo despues de llamar a mi funcion java que pide el input y asigna el texto al textbox.

    Alguna idea que me puedas dar??

    ResponderEliminar
  6. hola Rop

    la verdad en esta parte me perdi "pero tengo el problema que en el codebehind llamo a mi funcion java para pedir el input, luego ahi le asigno el texto al textbox y luego en el codebehind quiero seguir con la grabación"

    porque no creo que puedad lograr esa interaccion entre javascript y codigo, no entendi eso de llamar desde codebehind al codigo javascript porque no se puede

    desde codigo .net puedes crear codigo javascript que realice determinada accion, pero no llamarlo


    saludos

    ResponderEliminar
  7. Leandro,

    Lo que quise dar a entender es que lo que estoy haciendo es lo siguiente:

    Tengo un grid con un listado de ofertas de precios y un link para cancelar cualquiera de estas.

    Al hace clic en el link, llamo a una función java para hacer un input y pedirle al usuario que ingrese el motivo de la cancelación y luego asigno el texto ingresado por el usuario a un Textbox de asp.net el cual quiero leer en mi código de c# pero aunque veo el texto en la pantalla, no hay nada en el momento en que quiero leerlo despues de llamar a la función java.

    Quiero leer este texto para grabarlo en la base de datos al momento de cancelar la oferta en cuestión.

    Gracias de antemano por tus comentarios.

    ResponderEliminar
  8. hola Rop

    que seria esta funcion input que comentas, es alguna ventana javascript ?

    porque recuerda que desde el cliente deberias asignar el valor en algo relacionado con la row del grid, ese es un tema, o es aqui dodne interviene el textbox que mencionas?

    no prefieres seguir el tema en los foros de asp.net

    alli podrias poner una imagen y codigo de lo que quieres lograr

    saludos

    ResponderEliminar
  9. Leandro,

    Ya publiqué mi pregunta en el foro de asp net.

    Esta Aquí

    Gracias.

    ResponderEliminar
  10. Hola, leandro muy bueno el articulo!. Trate de adaptarlo a lo que yo necesito pero se me hace complicado. Podrias orientarme un poco como podria hacerlo?. Lo que estoy necesitando es basicamente en un gridview donde hay x registros con un checkbox en cada registro. Ir contando cada vez que tildo uno de esos checkbox del registro y mostrarlo en un label en la misma pantalla. Me explico mas o menos? Tenes una idea de por donde puedo mirar?. Ojala puedas ayudarme mas o menos. Saludos y muchas gracias!

    ResponderEliminar
  11. hola

    lo que deberias implementar es algo como ser

    http://social.msdn.microsoft.com/Forums/es/vcses/thread/b92a91c6-f405-41a1-a09b-51ea2c965c8a

    si bien alli no se sua checkbox si se usan campo de cantidad, o sea un textbox, la ida es que el selector lo uses del tipo class, asocies una clase a los checkbox para que puedas asignar el evento de click, para validar el estado

    pero debes primero poder accionar un evento a los check del grid pra poder continuar

    saludos

    ResponderEliminar
  12. buenos dias mura tengo un problema y no se si me puedas ayudar tengo una caja de texto y dos botones,
    la caja de texto esta validada como puedo hacer para que solo uno de los dos botones coja la validació y el otro pueda hacer otra cosa si me puedes ayudar te lo agradeceria mucho muchas gracias

    ResponderEliminar
  13. hola Cristhian

    por validacion te refieres a que usas los controles de validacion de asp.net
    si es asi podrias usar el ValidationGroup, o sino el CauseValidation, para definir como es que aplican las validaciones

    ASP.NET – Validar controles agrupados con ValidationGroup

    saludos

    ResponderEliminar
  14. hola leandro que puedo hacer para que no me salga este error a la hora de utilizar <% en el aspx

    The Controls collection cannot be modified because the control contains code blocks (i.e. <% ... %>).

    ResponderEliminar
  15. Hola! tengo una duda, hago algunos cambios en los estilos con javascript, y al hacer el postback estos cambios se pierden ¿Hay alguna forma de recuperar esta información?

    ResponderEliminar
  16. Hola Leandro buena explicacion por favor sube de nuevo el link se cayo, queria tambien preguntarte si tendras codigos jquery de darle estilos a un gridview o bajo condicionales por ejemplo que resalte con un color supongamos una columna cantidad que pase de 1000, saludos y gracias

    ResponderEliminar
  17. hola Juan

    pero necsitas realizar el cambio del color usando javascript ? porque no lo haces desde el evento RowDataBound

    [GridView] Aplicar color en las filas

    entiendo que el color lo aplicas a la fila que es la que va cambiando su valor
    saludos

    ResponderEliminar
  18. me sale este error
    Error de servidor en la aplicación '/'.

    No se encuentra el recurso.

    Descripción: HTTP 404. El recurso que está buscando (o una de sus dependencias) se puede haber quitado, haber cambiado de nombre o no estar disponible temporalmente. Revise la dirección URL siguiente y asegúrese de que está escrita correctamente.

    Dirección URL solicitada: /DescargaArchivo.ashx

    Información de versión: Versión de Microsoft .NET Framework:2.0.50727.6421; Versión ASP.NET:2.0.50727.6427

    ResponderEliminar
    Respuestas
    1. hola

      recuerda configurar el handler en el web.config, sino lo configuras no lo reconocera

      saludos

      Eliminar
    2. Hola, me contactarias a mi mail, si no te es de mucha molestia, llevo mucho estudiando algo y no lo logro, si no es de mucha molestia espero tu respuesta, gracias (shakadiocares@gmail.com)

      Eliminar
  19. Este comentario ha sido eliminado por el autor.

    ResponderEliminar