Función $get en ASP.NET AJAX

En un post anterior hablamos de ASP.NET AJAX. Vimos como podemos utilizar el control UpdatePanel para ejecutar código en el servidor y actualizar solo una sección de la pagina.

Mencionamos que el control ScriptManager es todo lo que necesitamos agregar a nuestra pagina para habilitar AJAX.

Detrás de escenas, ScriptManager hace que el navegador descargue varios archivos JavaScript con código que le permitirán comunicarse con el servidor asíncronamente y parcialmente actualizar la pagina.

Ya que el código JavaScript esta disponible para toda la pagina, podemos llamar estas funciones directamente desde nuestro propio código JavaScript.

Una función contenida en ASP.NET AJAX muy útil es $get().

Podemos utilizar $get() en lugar de document.getElementById() para encontrar elementos en el DOM de la pagina por su id. La ventaja es que $get funciona con la mayoría de los navegadores modernos.

El siguiente ejemplo utiliza $get para cambiar el estilo de un div con la id “container”.

<script type="text/javascript">
        function changeColorAndSize() {
            $get('container').style.backgroundColor = "Red";
            $get('container').style.height = "200px"
            $get('container').style.width = "300px";
        }
    </script>

    <div id="container" style="height: 100px; width: 200px; background-color: Blue;"></div>
    <asp:Button ID="Button1" runat="server" Text="Click Me" OnClientClick="changeColorAndSize(); return false;" />

Ahora, si cambiamos el div para correr en el servidor (runat), su ID cambiara a algo como MainContent_container al momento de que ASP.NET genera el código html. ASP.NET hace esto para que podamos repetir nombres de controles en nuestras diferentes paginas, paginas maestras (master pages) y controles de usuario, sin interferir unos con otros cuando el código html final es generado y enviado al navegador.

Así que para encontrar el div, tendremos que hacer algo como esto.

<script type="text/javascript">
        function changeColorAndSize() {
            $get('<%= container.ClientID %>').style.backgroundColor = "Red";
            $get('<%= container.ClientID %>').style.height = "200px"
            $get('<%= container.ClientID %>').style.width = "300px";
        }
    </script>

    <div id="container" runat="server" style="height: 100px; width: 200px; background-color: Blue;"></div>
    <asp:Button ID="Button1" runat="server" Text="Click Me" OnClientClick="changeColorAndSize(); return false;" />

Los delimitadores <%= %> nos permite ejecutar una línea de código, y el resultado de la misma reemplaza todo el bloque antes de generar el código html para la pagina. Utilizamos estos delimitadores para obtener la id que será enviada al navegador por medio de la propiedad ClientID.

El navegador recibirá este código al ejecutar la aplicación web.

function changeColorAndSize() {
            $get('MainContent_container').style.backgroundColor = "Red";
            $get('MainContent_container').style.height = "200px"
            $get('MainContent_container').style.width = "300px";
        }

La función $get y los delimitadores <%= %> son muy útiles cuando estamos trabajando con paginas que requieren de mucho comportamiento personalizado utilizando JavaScript.