En Visual Studio 2010 la gente de Readmon integró Jquery en las plantillas de proyectos de ASP.NET y ASP.NET MVC y adoptan Jquery cómo una Librería javascript de alta eficiencia y flexibilidad para desarrollo web. En las  versiones anteriores a Visual Studio 2010, es decir 2008,  2005, es muy fácil agregar esta librería.

Existen muchos problemas que surgen al usar jquery entre estos:

1 -¿ Cómo puedo hacer la referencia de  los .js de Jquery?

–  Lo primero por hacer es ir a la página de Jquery y allí debes descargar la última versión de Jquery que a la fecha de hoy es  la 1.6.1

– El siguiente paso consiste en poner el archivo .js que se descargó en la aplicación, comúnmente se debe almacenar en la carpeta  cuyo, nombre es scripts de la aplicación o sitio Web veamos la imagen por ejemplo en VS2005 y en VS2010. Además hay que tener en cuenta que se puede tener versión de desarrollo y versión de producción (siendo esta última aquella  .min.js en la imagen) de igual forma con cualquiera de las dos es posible trabajar, lógicamente el rendimiento dará fruto con la versión comprimida(ofuscada).

– En vista que Jquery es una librería basada en Javascript la forma en que éste debe ser usado consiste en agregar la referencia  exacta a la carpeta exacta en el que esta alojado el archivo .js debemos tener en cuenta tanto la ruta relativa ó ruta absoluta a la    cual estamos refiriéndonos. Ver imagen.

2- ¿ Cómo empezar con jquery?

Teniendo el archivo .js agregado al proyecto de ASP.NET resta empezar con nuestro Hola Mundo!. Es necesario entender el primer segmento. Qué simplemente en palabras poco técnicas, permite sensibilizar el DOM (Document Object Model) para poder detectar objetos mediante la declaración de selectores.


$(document).ready(function(){

});

[J][query] tiene este nombre debido a que se lanza una consulta sobre el DOM usando Javascript (Un poco más amigable de cara al desarrollo). Por ejemplo en el siguiente ejemplo se usará un selector precedido por el carácter # y luego el id del objeto en nuestro caso un DIV, al cual luego se le hará un innerHTML mediante $.html(), para pasar la cadena Hola Mundo!







    Demo JQuery
<script type="text/javascript" src="Scripts/jquery-1.6.1.min.js"></script><script type="text/javascript" language="javascript">// <![CDATA[
        $(document).ready(function(){
            $("#DivEjemplo").html("Hola mundo!");
        });

// ]]></script></pre>
<form id="form1"></form>
<pre>


Ejecutamos la solución en VS y el resultado en el explorador será el siguiente.

3- ¿ Por qué el objeto de javascript es null?

Muy seguramente te habrá sucedido esto alguna vez, y existen los motivos, bien sea usemos javascript o jquery, por un lado hay algunos tips a tener en cuenta.

– Qué nunca se te olviden los cierres de instrucción, bien sea () ó {} ó ; ó [], por ejemplo si declaras una funcion de Javascript o Jquery y olvidas alguno de los símbolos mencionados en la terminación de X instrucción, cuando la página se ejecute, tendrás problemas, que te puedan llegar a volver loco.

– Si haces un:

                 document.getElementById("DivEjempl").innerHTML = "Hola mundo!";
                 //Estas dos instrucciones equivalen a lo mismo, teniendo en  cuenta el grave error
                 //que el id no coincide con elemento alguno del DOM.
                 $("#DivEjempl").html("Hola Mundo");
           

Sin dudas esto arrojará un error, debido a que el id del objeto no existe, por lo tanto es nulo (null) y si a algo nulo le hacer una innerHTML simplemente el explorador te lanzará una excepción.

4 – ¿ Tipos de selector avanzado para encontrar objetos de ASP.NET en el DOM ?

Es preciso entender que todo control de .NET se traduce en tags html, por lo tanto siempre Javascript trabajará con los objetos html resultantes de la compilación y Render de la página luego de la descarga en el cliente. Entonces pasemos a ver el siguiente código en el cual vemos cómo recuperar estos objeto en JQuery.

Código de C# necesario para cargar el objeto GridView


using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

namespace TestJquery1
{
    public partial class ASPNETControlsJQuery : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            List personas = new List();
            personas.Add(new Person { Id = 1, Name = "Hugo" });
            personas.Add(new Person { Id = 2, Name = "Paco" });
            personas.Add(new Person { Id = 3, Name = "Luis" });
            GridViewEjemplo.DataSource = personas;
            GridViewEjemplo.DataBind();
        }
    }
    public class Person
    {
        public int Id { get; set; }
        public string Name { get; set; }
    }
}

Código Jquery y ASPX necesario para el ejemplo








<script type="text/javascript" language="javascript" src="Scripts/jquery-1.6.1.min.js"></script><script type="text/javascript" language="javascript">// <![CDATA[
        //Esta sección se ejecuta en el momento en que se termina de 
        //descargar la página en el cliente.
        $(document).ready(function () {

            /*----------------------------------------------------
            ------JQuery y el objeto asp:Panel--------------------
            ------que en html se traduce al tag
<div>.------------
            ----------------------------------------------------*/
            $("#PanEjemplo").html("Dame un click");

            //Luego establecemos el evento Click para el objeto 
            $("#PanEjemplo").click(function () {
                alert("Este fue un click sobre un objeto
<DIV>");

                //Y cambiaremos el background-color, 
                //mediante la instancia del propio objeto
                $(this).css("background-color", "red");
            });

            /*----------------------------------------------------
            ------JQuery y el objeto asp:Label--------------------
            ------que en html se traduce al tag <span>.------------
            ----------------------------------------------------*/
            $("#LabEjemplo").html("Acerca el Mouse");

            //También podemos controlar los eventos generados por el Mouse!
            //Cuando el mouse entra en el espacio que está ocupando el tag <span>
            //se genera el evento mouseover
            $("#LabEjemplo").mouseover(function () {
                $(this).css("font-size", "40px");
            });
            //También podemos controlar los eventos generados por el Mouse!
            //Cuando el mouse sale en el espacio que está ocupando el tag <span>
            //se genera el evento mouseout
            $("#LabEjemplo").mouseout(function () {
                $(this).css("font-size", "18px");
            });

            /*----------------------------------------------------------
            ------JQuery y el objeto asp:TextBox------------------------
            ------que en html se traduce al tag <input type="text">.----
            ----------------------------------------------------------*/

            $("#TxtEjemplo").val("Este es el texto de un input type text");

            //De esta forma controlamos el evento focus, el cual se refiere
            //a que el control recibió el foco
            $("#TxtEjemplo").focus(function () {
                $(this).val("--El campo sólo acepta números--");
                $(this).select();
            });

            //De esta forma controlamos el evento blur, el cual se refiere
            //a que el control perdió el foco
            $("#TxtEjemplo").blur(function () {
                //De esta forma podemos validar si el contenido son números
                if (isNaN($(this).val()) || $.trim($(this).val()).length == 0) {
                    alert("Sólo se admiten números");
                    $(this).focus();
                    $(this).select();
                    return false;
                }
                else
                    alert("Correcto!!!");
            });

            /*----------------------------------------------------------
            ------JQuery y el objeto asp:DropDownList-------------------
            ------que en html se traduce al tag
<select>.---------------
            ----------------------------------------------------------*/
            $("#DdlEjemeplo").change(function () {
                alert("El valor seleccionado es " + $(this).val());
            });

            /*----------------------------------------------------------
            ------JQuery y el objeto asp:RadioButtonList----------------
            ------que en html se traduce al tag

<table> con varios------
            ------<input type="radio">. internos, los cuales componen---
            ------el control.-------------------------------------------
            ----------------------------------------------------------*/

            //Como se ve vamos a utilizar un selector avanzado el cual en primer
            //instancia captura el objeto global es decir el RadioButtonList
            //luego buscamos los inputs types radio dentro de este.
            $("#RbList").find("input[type=radio]").click(function () {
                if ($(this).val() == "0")
                    $("#PanelEjemploOcultar").css("display", "none");
                else
                    $("#PanelEjemploOcultar").css("display", "block");
            });

            /*----------------------------------------------------------
            ------JQuery y el objeto asp:GridView-----------------------
            ------que en html se traduce al tag

<table> con varios------
            ------

<tr>. internos, los cuales componen-------------------
            ------el control y a la vez contienen objetos
<td>, que  a-- 
            ------su vez puede contener muchos más controles------------
            ----------------------------------------------------------*/
            //Creamos una nueva fila
            var newRow = $("

<tr></tr>

");
            //Le agregamos un nuevo td 
            newRow.append($("
<td></td>

").append("Nuevo"));
            //Le agregamos un nuevo td con un input type text
            newRow.append($("
<td></td>

").append("<input type='text'/>"));
            //Finalmente lo agegamos al GridView ;).
            $("#GridViewEjemplo").append(newRow);

            //Este selecto avanzado nos permitirá capturar todos los  
            //objetos que contengan en su Id el texto específico
            // Si se ve el marcado en el explorador, click derecho ver código fuente
            // Veremos por ejemplo:
            // <input name="GridViewEjemplo$ctl02$TxtNombre" type="text" value="Hugo" id="GridViewEjemplo_TxtNombre_0" />
            // en donde  podemos ver que el id del objeto está compuesto y mediante el selecto tomamos esa parte del id.
            //Y por ende al final cada objeto seleccionado tendrá atachado el evento focus y blur respectivamente.
            $("input[id*='TxtNombre']").focus(function () {
                var row = $(this).closest("tr");
                row.css("background-color", "green");
            });

            $("input[id*='TxtNombre']").blur(function () {
                var row = $(this).closest("tr");
                row.css("background-color", "transparent");
            });

        });

// ]]></script>
    Ejemplo JQuery ASP.NET


</pre>
<form id="form1">
<div>Ejemplo JQuery ASP.NET

 1. Prueba con el Objeto Panel




 2. Prueba con el Objeto Label




 3- Prueba con el Objeto TextBox




 4- Prueba con el objeto DropDownList









 5- Prueba Jquery con el objeto RadioButtonList






<div id="PanelEjemploOcultar" style="background-color: red; color: yellow; font-weight: bold; font-size: 30px; width: 600px; height: 70px;">Hola oprime un radiobutton para ocultarme y otro para visualizarme!!!</div>
 6- Prueba con el objeto GridView y controles internos dentro de este









</div>
</form>
<pre>



Eso fue todo por esta entrega espero les guste y sea de utilidad!

Aquí El código

Anuncios