Mensajes de alerta y confirmación dentro de UpdatePanels

Hay varias preguntas recurrentes en la vida de un desarrollador, como "cuando me subirán el sueldo?" o "¿Cuando me cambian este maldito monitor, que ya estoy casi ciego". Sin embargo una pregunta frecuente es:

¿ Como envío un alerta o un mensaje de confirmación dentro de un UpdatePanel?

Hay varias maneras de hacerlo, voy a escribir sobre la mía, aunque quizás no sea la mejor, por lo menos me funciona.

Primero, veamos el escenario en donde necesitamos enviar un alert al usuario, luego de realizarse un proceso asincrono.

image

La idea es que haga clic en el botón y luego aparezca el mensaje de confirmación, entonces agregamos:

    Protected Sub Button1_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles Button1.Click

        Me.Label1.Text = "Proceso realizado"

        Dim script As String = "alert(‘Proceso finalizado’);"

        ScriptManager.RegisterStartupScript(UpdatePanel1, Me.GetType, "", Script, True)

    End Sub

Con esto registramos en el ScriptManager el script en donde lanzamos el mensaje de alerta, con esto, cubrimos nuestro primer requerimiento, si deseas saber más sobre RegisterStartupScript visita MSDN.

 

Mensajes de Confirmación.

Sin duda es útil tener un mensaje de confirmación cuando se está ejecutando un proceso en donde el usuario tiene que determinar si acepta o cancela cierta acción, entonces modifiquemos el ejemplo para determinar si es que el usuario presionó aceptar o cancelar.

image

En este caso vamos a utilizar un HiddenField (WebControl) para almacenar la información en el lado del cliente, de la desición tomada en el confirm, y luego poder obtenerla en el lado del servidor, todo esto, de manera asyncrona (no es la idea que exista un postback y que se note!).

Entonces hacemos:

Protected Sub Button1_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles Button1.Click

        Dim script As String = "if(confirm(‘¿Es correcto?’)) {document.getElementById(‘hd’).value=’Aceptar’; setTimeout(‘__doPostBack(‘Label1′,”)’, 0);} else{document.getElementById(‘hd’).value=’Cancelar’;setTimeout(‘__doPostBack(‘Label1′,”)’, 0);}"

        ScriptManager.RegisterStartupScript(UpdatePanel1, Me.GetType, "", script, True)

End Sub

Lo que hacemos acá es aprovecharnos de el campo Oculto(hd) , asignándole un valor por javascript(‘Aceptar’ o ‘Cancelar), y además provocamos el postback asíncrono, llamando a la función __doPostBack, aprovechando el control label1.(No le asignes el botón o caerás en el ciclo infinito).

Por último es necesario, en el evento Load del webform, capturar el valor del campo oculto, cuando el postback ocurre.

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
        If Page.IsPostBack Then
            Select Case hd.Value
                Case "Aceptar"
                    Me.Label1.Text = "ACEPTAR"
                Case "Cancelar"
                    Me.Label1.Text = "CANCELAR"
            End Select
        End If
End Sub

Como vemos podemos capturar el valor de campo oculto, con lo que podemos decidir que hacer , no solo al principio de un proceso, puede ser en cualquier momento, y bueno, ya tenemos nuestra confirmación dentro de un UpdatePanel.

Espero que les sirva, si tienen una manera mejor, compartámosla 🙂

[OFF-TOPIC]:Escribriendo Taliban en Windows Live Writer, vean las correcciones sugeridas XD (Italiano!)

image

Creando un Gráfico de Barras con Silverlight y PHP :)

Hola que tal?, mientras escucho Arch Enemy,Dead Eyes See No Future, me me dije a mi mismo “oye mismo, y si el ejemplo del gráfico de barras con Silverlight lo haces con php?” y pensé que era buena idea, ahora bien, no pretendo profundizar en temas de php, y las sentencias que voy a utilizar, si no les gustan a los talibanes de PHP, ejeje, bueno cambian las sentencias, es decir, cambia la forma pero no el fondo.Tengo varios amigos que utilizan php, espero que no se sientan tocados.


Construcción.


Vamos a utilizar los mismos recursos que usamos para el Articulo “Creando un gráfico de barras con silverlight 1.0” , es decir el XAML y los archivos JS , los cuales setean como se va a visualizar el control XAML dentro de la página.


Por razones obvias, el archivo aspx ya no está, lo que esta es nuestra página php, la cual tiene el siguiente código

<?php

 


$con =mysql_connect(“localhost”,“micuenta”,“mipass”);
mysql_select_db(“Animales”);
$año=$_POST[“año”];
if ($año==“”){ $año=2007;} 
$sql=“select Perros,Gatos,Vacas,Cerdos from porcentajes where Periodo=$año”;                $rs=mysql_fetch_array(mysql_query($sql,$con));
$valorPerros=$rs[“Perros”];
$valorGatos =$rs[“Gatos”];
$valorVacas =$rs[“Vacas”];
$valorCerdos=$rs[“Cerdos”];
$AltoBarra  = 415;
$MarcaTexto = 430;
$altoBarraPerros = ($valorPerros * $AltoBarra) / 100;
$altoBarraGatos  = ($valorGatos * $AltoBarra) / 100;
$altoBarraVacas  = ($valorVacas * $AltoBarra) / 100;
$altoBarraCerdos = ($valorCerdos * $AltoBarra) / 100;
$PosicionTextoPerros  = $MarcaTexto – $altoBarraPerros;
$PosicionTextoGatos   = $MarcaTexto – $altoBarraGatos;
$posicionTextoVacas   = $MarcaTexto – $altoBarraVacas;
$posicionTextoCerdos  = $MarcaTexto – $altoBarraCerdos;

// ‘Seteamos el texto que va en cada textblock del control
$TextoPerros = round($valorPerros);
$TextoGatos  = round($valorGatos);
$TextoVacas  = round($valorVacas);
$TextoCerdos  = round($valorCerdos);


$script=” <script type=’text/javascript’> function root_Loaded(sender,args) {“;
$script.=” sender.findName(‘barraPerros’).Height=’$altoBarraPerros’;”;
$script.=” sender.findName(‘valorPerros’)[‘Canvas.Top’]=’$PosicionTextoPerros’;”;     $script.=” sender.findName(‘valorPerros’).Text=’$TextoPerros %’;”;
$script.=” sender.findName(‘barraGatos’).Height=’$altoBarraGatos’;”;
$script.=” sender.findName(‘valorGatos’)[‘Canvas.Top’]=’$PosicionTextoGatos’;”;
$script.=” sender.findName(‘valorGatos’).Text=’$TextoGatos %’;”;
$script.=” sender.findName(‘barraVacas’).Height=’$altoBarraVacas’;”;
$script.=” sender.findName(‘valorVacas’)[‘Canvas.Top’]=’$posicionTextoVacas’;”;
$script.=” sender.findName(‘valorVacas’).Text=’$TextoVacas %’;”;
$script.=” sender.findName(‘barraCerdos’).Height=’$altoBarraCerdos’;”;
$script.=” sender.findName(‘valorCerdos’)[‘Canvas.Top’]=’$posicionTextoCerdos’;”;
$script.=” sender.findName(‘valorCerdos’).Text=’$TextoCerdos %’;”;
$script.=” }</script>”;


?>


Básicamente estamos realizando el mismo proceso, si te das cuenta, vamos a conectarnos una base de Datos Mysql, se hace el query dependiendo del año seleccionado en el combo, se obtienen los datos y se setean las variables para dibujar las barras.


Base de datos Mysql:


image


Luego tenemos las mismas referencias a los archivos JS, imprimiendo luego el resultado de la concatenación de la variable $script:


image 


Por último, en donde necesites mostrar el gráfico haces la llamada a la función createSilverlight();


image


Descarga los archivos y la BD desde acá (ahora funciona el enlace!)


Espero que les sirva :):)


Gonzalo.