Año nuevo, Jquery Nueva (?)

Las grandes cosas están construidas por pequeños elementos que hacen nuestra vida feliz y placentera. En este pequeño post voy a ir enumerando pequeños detalles de JQUERY que nos van a permitir solucionar problemas en nuestra interface ASP.NET con transparencia y sencillez.

Ejemplo 1: Cambio de valores de un input/textbox/label

En la cabecera tomamos siempre el archivo JS del site de JQUERY y lo insertamos en el


    
Seguimos con HTML de lo mas sencillo

     

Y finalmente insertamos el ejemplo de JQUERY para realizar el cambio de valores usando el método html()

<script>

    jQuery(function($) {

 $("#boton").click(function() {
            $("#labelCambiar").html($("#TextBox1").val());
         });
    });

</script>

Ejemplo 2: Generar un Postback con JQUERY (no AJAX)

En este ejemplo vemos como generar un postback desde jquery sin usar las funciones de AJAX. Sino un postback tradicional.

Primero como siempre nuestra cabecera

<head runat="server">
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>

Formamos nuestro HTML con un botón (que es el encargado de realizar el postback), un link y un input oculto que nos servirá para manejar diferentes orígenes de ese postback.

<form id="form1" runat="server">
     <table class="style1">
         <tr>
             <td class="style3">
     <input id="boton" type="button" value="Cambiar" /></td>
             <td>
                 <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
             </td>
         </tr>
         <tr>
             <td class="style2" colspan="2">
                 <input id="txtOculto" type="hidden" runat=server  />
        <asp:LinkButton ID="lnkActualizar" runat="server"></asp:LinkButton>
             </td>
         </tr>
     </table>
<div>
    </div>
    </form>

Y en este caso el script de jquery se forma de la siguiente manera. El valor que se ingresa en txtoculto me permite diferencia de donde viene el postback para poder realizar diferentes acciones.

<script>

    jQuery(function($) {

 $("#button").click(function() {

      $("#txtOculto").html("1"); //Se ingresa 1, pero este valor puede ser variable segun de donde se desee realizar el postback
     __doPostBack('lnkActualizar','');

    });

</script>

Y para atrapar lo realizado en el cliente, vamos al código de servidor.

    Protected Sub lnkActualizar_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles lnkActualizar.Click
        Select Case txtOculto.Value
            Case 1 'caso de postback 1
                'codigo aqui

            Case 2 ' caso de postaback 2
                'otro código aqui
        End Select
    End Sub

Espero que estos pequeños ejemplos sirvan para grandes resultados. Saludos. Hasta la próxima.

Anuncios

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s