Páginas‎‎‎‎‎‎‏‏‏‏‎‏‏‎‎‎‏‎‎‏‎‎‎‏‏‏‏‏‏‎‏‎‏‎‏‎‎‏‎‎‏‏‎‏‎‎‎‎‎‏‏‏‏‎‏‎‎‏‏‎‏‏‎‎‎‏‏‎‏‏‏‏‎‎‏‎‏‎‏‏‏‎‏‏‎‏‎‏‎‎‏

Contato

Inspiração

Barra de Progresso (Progressbar) em Asp.net e Ajax

A barra de progresso é muito útil na execução de rotinas que precisam fazer o usuário do sistema aguardar e saber o quanto já foi executado de uma devida tarefa.
Com os sistemas web este recurso tem sido muito pouco usado pela dificuldade que os desenvolvedores tem encontrado para implementá-lo.
 
A vinda do Microsoft Ajax para o Visual Studio permitiu implementar facilmente este tipo de recurso, no qual mostrarei como implementar.
 
Imagem do exemplo em execução
 
Como funciona:
Para implementar tal funcionalidade, vamos ter que trabalhar com atividades paralelas, e isso em .net se faz com o uso de Threads. As Threads são unidades de execução no qual são capazes de se comunicar com outras threads.
Resumindo: Vamos ter uma Thread para executar a rotina demorada e outra Thread para ficar atualizando a tela com o quanto a Thread da rotina demorada andou.
 
Para fazer o papel da Thread que atualiza a tela, vou utilizar o controle Timer do Microsoft Ajax, no qual já implementa as rotinas de execução de tempos em tempos de uma rotina, chamado de Evento Tick.
 
 
Para fazer o papel da rotina demorada, implementarei a Thread pela namespace System.Threading e a iniciarei.
 
A comunicação entre as Threads será por Session, que é o contexto que todas as Threads enxergam:
Session Parado: Informa se a rotina está em execução.
Session Status: Informa o quanto em % a rotina já executou.
 
Montando a tela:
 
A tela terá os seguintes elementos:
 
ScriptManager: Obrigatório em telas que utilizam ms-ajax;
UpdatePanel: É útil para a tela não piscar a cada vez que o Timer executar um Tick;
Timer: Servirá para de tempos em tempos verificar o quanto a rotina demorada andou e atualizar a barra de status da porcentagem;
Botão Iniciar (btnIniciar): Botão que irá Iniciar ou Parar a rotina demorada;
Label Porcentagem (lblTempo): Usado para mostrar o quanto a rotina demorada andou em %;
Panel Barra de Porcentagem (Panel1): Local onde ficará o painel que cresce conforme a % da rotina demorada aumenta;
Panel Status da Porcentagem (pnlStatus): Barra que cresce conforme a % da rotina demorada aumenta.
 
O HTML da tela será o seguinte:
 

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" EnableSessionState="True" %>

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

    <title>Untitled Page</title>

</head>

<body>

    <form id="form1" runat="server">

        <asp:ScriptManager ID="ScriptManager1" runat="server" />

        <div>

            <asp:UpdatePanel ID="UpdatePanel1" runat="server">

                <ContentTemplate>

                    <asp:Timer ID="tmrTempo" runat="server" Enabled="False" OnTick="tmrTempo_Tick" Interval="30000">

                    </asp:Timer>

                    <asp:Button ID="btnIniciar" runat="server" OnClick="btnIniciar_Click" Text="Iniciar" />

                    <asp:Label ID="lblTempo" runat="server" Font-Names="Arial" Font-Size="9pt"></asp:Label><br />

                    <br />

                    <asp:Panel ID="Panel1" runat="server" BackColor="WhiteSmoke" BorderWidth="1px" Height="20px"

                        Width="500px">

                        <asp:Panel ID="pnlStatus" runat="server" BackColor="CornflowerBlue" Height="20px"

                            Width="1px">

                        </asp:Panel>

                    </asp:Panel>

                </ContentTemplate>

                <Triggers>

                    <asp:PostBackTrigger ControlID="btnIniciar" />

                </Triggers>

            </asp:UpdatePanel>

        </div>

    </form>

</body>

</html>

 

Repare que o UpdatePanel possuí um PostBackTrigger para o botão que efetua o inicio e a parada. Isso porque eles irão trabalhar com fatores externos do que está no UpdatePanel, que é a Thread que executa a rotina longa, por isso ele deverá fazer o Postback acontecer.

 

O Código será o seguinte:

 

Click do Botão Iniciar:

 

    protected void btnIniciar_Click(object sender, EventArgs e)

    {

        tmrTempo.Interval = 450;

        if (!tmrTempo.Enabled)

        {

            Session.Add("Parado", "0");

            tmrTempo.Enabled = true;

            btnIniciar.Text = "Parar";

 

            System.Threading.Thread Th = new System.Threading.Thread(IniciarProcessoLongo);

            Th.Start();

        }

        else

        {

            tmrTempo.Enabled = false;

            lblTempo.Text = "Parado";

            btnIniciar.Text = "Iniciar";

            Session.Add("Parado", "1");

            pnlStatus.Width = Unit.Pixel(0);

        }

    }

 

Tick do Timer:

  

    protected void tmrTempo_Tick(object sender, EventArgs e)

    {

        lblTempo.Text = Session["Status"].ToString() + "%";

        pnlStatus.Width = Unit.Pixel(Convert.ToInt32(Session["Status"]) *5);

 

        if (Session["Status"].ToString() == "100")

        {

            lblTempo.Text = "Parado";

            btnIniciar.Text = "Iniciar";

            Session.Add("Parado", "1");

            pnlStatus.Width = Unit.Pixel(0);

            tmrTempo.Enabled = false;

        }

    }

 

Rotina de Processo Longo:

 

    private void IniciarProcessoLongo()

    {

        for (int Cont = 0; Cont <= 100; Cont++)

        {

            if (Session["Parado"]=="1")

            {

                break;

            }

 

            Session.Add("Status", Cont);

            for (int Cont2 = 0; Cont2 <= 1000; Cont2++)

            {

                for (int Cont3 = 0; Cont3 <= 500; Cont3++)

                {

                    for (int Cont4 = 0; Cont4 <= 100; Cont4++)

                    {

                    }

                }

            }

        }

    }

 

Graças ao Ajax, é muito fácil implementar uma rotina que em outros tempos se mostraria extremamente complexa. Aqui não abordei como instalar o Ajax e nem como configurar seu projeto para que seja usado, dei maior foco na implementação da Barra de Progresso. Para referência, assuntos sobre o Ajax pode ser encontrado em www.asp.net.

 

João da Costa
Engenheiro de Sistemas
MCP (.net 2.0) – MCSA – MCDBA

Comments