abr 18
Esto de jQuery se esta convirtiendo en un vicio (compite mano a mano con Silverlight) y conforme más juegas más quieres y más te diviertes. Y si añadimos UpdatePanels, nos divertimos aún más si cabe.
Al usar jQuery, seguramente usaremos el evento Ready para añadir manejadores de eventos, añadir efectos, añadir / quitar clases.... en fin, inicializar los controles de nuestra página. El evento Ready de jQuery  es un evento que se lanza una vez que todo el DOM de la página ha sido cargado por completo. Por otro lado tenemos los postback parciales provocados por los updatePanels. El cometido de estos controles es evitar la carga completa de la página, es decir, solo actualizar aquellos controles contenidos en el control UpdatePanel. Pero lo que hace realmente no es actualizar los valores de los controles, sino que los sustituye por otros nuevos, tras lo cual todos los controles que hay en el UpdatePanel perderán las clases y eventos asociados a ellos en la inicialización de la página. Esto incluye tanto controles de servidor como controles de cliente, todos serán reemplazados.
Por ejemplo tomemos como ejemplo este UpdatePanel y controles:
Â
HTML:
-
<asp:UpdatePanel ID="UP" runat="server">
-
<ContentTemplate>
-
-
-
-
<span class="label8">Nombre:
</span>
-
</td>
-
-
<input type="text" id="txtnombre" class="inputText" />
-
</td>
-
-
<asp:TextBox runat="server" ID="lblNombre"/>
-
</td>
-
</tr>
-
-
-
<span class="label8">Direccion:
</span>
-
</td>
-
-
<input type="text" id="txtDireccion" class="inputText" />
-
</td>
-
-
<asp:TextBox runat="server" ID="lblDireccion"/>
-
</td>
-
</tr>
-
-
-
<asp:Button runat="server" ID="btnAceptar" Text="Aceptar"
-
CssClass="btnMandatory" onclick="btnAceptar_Click"/>
-
</td>
-
</tr>
-
</table>
-
</ContentTemplate>
-
</asp:UpdatePanel>
 La inicialización de la página la llevarÃamos a cabo normalmente asÃ:
JavaScript:
-
      $(document).ready(function () {
-
           // Inicializacion de controles
-
-
      });
De esta manerá todo funciona correctamente, pero solo mientras no pulsemos el botón "Aceptar" que provoca el postpack parcial. Una vez hagamos click, todos los eventos asociados a los controles desaparecerán. Para solucionarlo tenemos que reasignarlos nuevamente, y una forma de hacerlo es añadiendo un manejador al evento que controla cuando un postback asÃncrono ha finalizado. Nuestro código podrÃa quedar asÃ:
JavaScript:
-
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(Load);
-
-
$(document).ready(function () {
-
Load();
-
});
-
-
function Load() {
-
$('#' + '<%=btnAceptar.ClientID %>').attr('disabled', true);
-
$('#' + '<%=lblNombre.ClientID %>').attr('readonly', true);
-
$('#' + '<%=lblDireccion.ClientID %>').attr('readonly', true);
-
-
$(".inputText").blur(function () {
-
$(this).css("background-color", "FFFFFF");
-
});
-
-
$(".inputText").focus(function () {
-
$(this).css("background-color", "CCCCCC");
-
});
-
-
$(".inputText").keyup(function () {
-
-
-
if ($(this).val() == '')
-
$('#' + '<%=btnAceptar.ClientID %>').attr('disabled', true);
-
else {
-
var nodata = false;
-
$.each($(".inputText"), function () {
-
if ($(this).val() == '')
-
nodata = true;
-
});
-
$('#' + '<%=btnAceptar.ClientID %>').attr('disabled', nodata);
-
}
-
-
});
-
-
$('#' + '<%=btnAceptar.ClientID %>').click(function () {
-
$('#' + '<%=lblNombre.ClientID %>').attr('value', $("#txtnombre").val());
-
$('#' + '<%=lblDireccion.ClientID %>').attr('value', $("#txtDireccion").val());
-
});
-
}Â
Lo que hemos hecho es envolver todo el código que tenÃamos en el evento Ready de jQuery en una función, y llamar a esta función tanto en el evento Ready, como cuando el postback asincrono del updatePanel ha terminado.
Una segunda opción serÃa Inyectar un script desde servidor que invoque a esta nueva función.
C#:
-
protected void btnAceptar_Click(object sender, EventArgs e)
-
 {
-
       lblNombre.Text = lblNombre.Text + "--> Validado con Exito";
-
       lblDireccion.Text = lblDireccion.Text + "--> Validado con Exito";
-
       ScriptManager.RegisterStartupScript(this, GetType(), "", "Load();", true);
-
 }
abr 14
Es curioso, pero nos podemos topar que al multiplicar dos números con decimales en Javascript no obtengamos el valor esperado. Esto es debido al modo en que javascript realiza esta operación. Que entretenido resultaban esas operaciones en Tecnologia de Computadores, pero hace demasiado tiempo de eso y uno ya no se acuerda. El caso es que Javascript usa la multiplicación en punto flotante.
Para los que gusten mas información en la wikipedia, un servidor se va a limitar a dar la solución.
Tomando como ejemplo:
al multiplicarlos obtendriamos un valor tal que 1395.899999999, pero el resultado esperado salta a la vista que no es ese. Para corregirlo podemos aplicar la siguiente operación, por ejemplo para 2 decimales:
JavaScript:
-
var x = 9;
-
-
var y = 155.1;
-
-
var z = x*y;
-
-
var w = Math.round(z * Math.pow(10,2))/Math.por(10,2);
mar 20
El pasado 19 de Marzo tuvimos una sesión de Silverlight en el grupo de Usuario de .Net de Málaga. Participé junto al MVP Braulio Diez. Braulio hizo una magnÃfica presentación de Silverlight y hasta donde podemos llevar esta tecnologÃa.Â
Aquà podeis conseguir el material (presentación y ejemplos) que usó Braulio.
Por mi parte hice una pequeña demostración de la integración de una aplicación Silverlight con Javascript.
- Acceso al DOM de la página
- Llamar a métodos Javascript desde Silverlight
- Llamar a métodos Silverligth desde Javascript
- Acceso a la Sesión de una aplicación asp.Net
Aqui podeÃs descargar la presentación y el código de los ejemplos.
ene 23
A dÃa de hoy yo no tendrÃa duda sobre cual opción elegir, opción que no tiene que ser mejor que la otra. Realmente, yo enfocarÃa el dilema mas bien desde el punto de vista de aplicación web AJAX (orientada al servicio), o aplicación web convencional (.net por supuesto), con sus postbacks (o callbacks) y sus Update Panels. (DeberÃa de estar penalizado el uso del control Update Panel 
)
Ajax Control Toolkit
Esta opción nos deja en el ámbito de una aplicación web .Net tradicional con controles de servidor, por lo que seguramente tendremos el grueso de la aplicación en el servidor. Con esto no quiero decir que no sea posible tener lógica en cliente, pero si que resulta bastante engorroso trabajar con los controles del ajax control tolkit con javascript. Por otro lado no debemos olvidar que son controles de servidor, y que son muy fáciles de usar, pero que cuando se complica el desarrollo y la web,  no se por qué, pero el trabajo se complica. Otro punto es el peso de las librerÃas, puf, te echan para atrás. Y un punto no menos importante, si por ejemplo tenemos que hacer una modificación de un Extender, digamos por ejemplo el AutoCcomplete, tendremos que generar un nuevo build y añadir la nueva referencia, y rezar por tener problemas de versiones a la hora de realizar el deploy en el servidor. A modo de anectdota, mencionar que un proyecto en el que estuve trabajando, en cual teniamos un Auto Complete Extender customizado,  tuvimos problemas de referencias cruzadas entre versiones de librerias,  y  con el timestamp del build generado del Extender con la fecha del servidor. Hora del Build X , hora del Servidor de despliegue X-6. Solución, cambiar la hora a la maquina de build y realizar un nuevo build con un timestamp de fecha menor que la hora del servidor web.Â
Leer el artÃculo completo »
ene 17
La mayorÃa de las veces cuando se define la arquitectura de una aplicación web solo se tiene en cuenta la parte servidor, como si el lado cliente no fuera importante o no existiera. Es verdad que en cliente disponemos de un lenguaje interpretado (no compilado), lo cual hace si cabe un poquito mas complicado el desarrollo,  al no disponer de las ventajas del pre compilado que nos ofrece Visual Studio. Además, el ordenado del código deberÃa ser un factor importante, ya que la tendencia es tener  un único fichero o script de código Javascritp, y esto siempre  comienza siendo unas pocas lÃneas para unas cuantas validaciones y va creciendo paulatinamente debido a la no planificación de la arquitectura en cliente o a nuevos requerimientos.
Atajar esto no es fácil, y el artÃculo no define ningún modelo de arquitectura, pero si unas cuantas pautas de buena conducta que nos ayuden a tener un condigo algo mas limpio y ordenado.
Leer el artÃculo completo »
Recent Comments