miércoles, 21 de marzo de 2012

Acceder a controles de asp.net desde javascript

Asignar valor a un textbox desde javascript

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.

<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.

Obtener y asignar el valor de un TextBox


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.

Trabajando con Labels

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

Se agrega 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('');
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js" language="javascript" type="text/javascript"></script>