Pular para o conteúdo principal

UpdateProgress ASP .NET (AJAX)

Uma cosia que com certeza deixa muita gente perdido e porque não dizer puto ao executar determinada rotina de um sistema e a desorientação, principalmente se for uma rotina demorada, não saber se ela terminou, se ainda esta executando ou mesmo se abortou por alguma razão é desesperador.
Hoje mostraremos como montar um esquema bem simples para indicar o progresso de uma rotina, para iniciar vamos criar um Website, colocar um botão e um label (apenas para mérito de ilustração).
Agora para fazermos o prometido vamos colocar um ScriptManager (dentro do da marca form, deve estar onde exista o runat=server):
img1
Em seguida precisamos de um UpdatePanel englobando tudo aquilo passível de uma execução demorada (no nosso caso tudo):
img2
Para finalizar o UpdateProgress, nele existirá a mensagem e uma imagem, um gif animado dando a impressão de “trabalho”:
img3
O código completo da página (dentro do form, além disso nada foi alterado):
img7
Finalizando forçaremos a espera de três segundos ao clicar no botão, para podermos ver nosso trabalho:
img4
É isso ai, tudo muito simples (com um layout bem trabalhado da um toque bem profissional), agora o resultado de nosso teste:
IMG6
Marcadores:

Comentários

  1. Susi21 de maio de 2009 às 13:05

    Oi, tudo bem?
    O motivo do meu contato não é sobre seu post, que aliás é muito legal, mas eu ainda tenho umas coisas a aprender pra poder fazer certas coisas, o motivo é que tenho seu banner no meu blog, e hoje percebi que ele sumiu, o código está lá mas a imagem "fugiu", entrei no seu blog pra pegar o código novamente e percebi q aqui também sua imagem não aparece.
    Não sei se você já percebeu isso, mas resolvi avisar.
    Se você está apenas mudando seu banner, por favor me avise quando estiver pronto, assim poderei mudar o código também no meu blog.
    Deu pra entender?
    Acho que ficou meio confuso.
    Qualquer dúvida entre em contato.
    Ah! desculpe usar o espaço de comentário, mas não consegui de outra forma.
    obrigado
    Susi - Histoblog

    ResponderExcluir
  2. Carlos:25 de maio de 2009 às 21:54

    passando para dar um oie

    ResponderExcluir
  3. Nanda Botelho26 de maio de 2009 às 11:45

    Oi Eduardo!

    Não vou comentar seu post, pois não entendi bulhufas! Sou um tanto tapada para essas tecnologias, mil desculpas!

    Vim agradecer sua visita!

    Eu fiz mesmo, mandei o e-mail, para o deputado desaforado! Depois fiquei com medo...Tenho a fantasia de que todo político é mafioso...

    Obrigada pelo voto!!!!

    Bjão!

    ResponderExcluir

Postar um comentário

Obrigado por Participar do programero, fique a vontade para agradecer, retificar, perguntar ou sugerir.

Mais visitadas

Aplicação Flask usando Nginx e Gunicorn

Aplicação Flask usando Nginx e Gunicorn Se você já desenvolveu uma aplicação Flask básica, sabe que o servidor de desenvolvimento embutido não é ideal para produção. Ele não é projetado para lidar com altos volumes de tráfego ou conexões simultâneas. Para tornar sua aplicação Flask mais robusta e pronta para produção, podemos usar o Gunicorn como servidor de aplicação e o Nginx como proxy reverso. Neste artigo, vamos adaptar o exemplo anterior ( Criando uma Aplicação CRUD com Flask, PostgreSQL e Docker ) para incluir o Nginx e o Gunicorn. O que são Nginx e Gunicorn? Gunicorn O Gunicorn (Green Unicorn) é um servidor de aplicação WSGI que roda aplicações Python como o Flask. Ele é eficiente e simples de configurar, lidando com múltiplas requisições ao mesmo tempo, algo que o servidor embutido do Flask não faz bem. Nginx O Nginx é um servidor web que atua como um proxy reverso. Ele recebe requisições HTTP e as encaminha ao Gunicorn. Além disso, o Nginx pode: Servir arquivos ...
Postar um comentário
Leia mais

Criando sua Primeira Aplicação Web com Python e Docker

  Criando sua Primeira Aplicação Web com Python e Docker Hoje vamos fazer algo prático: criar uma aplicação web simples em Python usando Flask e executá-la dentro de um contêiner Docker. Se você não sabe exatamente o que é Docker ou Flask, não se preocupe! Vou explicar tudo de forma simples para que você consiga acompanhar sem problemas. O que é Docker? Docker é uma ferramenta que permite empacotar aplicações e suas dependências em contêineres, garantindo que elas funcionem da mesma forma em qualquer ambiente. Em outras palavras, com o Docker, você cria um ambiente isolado e padronizado para rodar suas aplicações. Como instalar o Docker Acesse o site oficial do Docker . Baixe e instale a versão apropriada para o seu sistema operacional (Windows, macOS ou Linux). Após a instalação, verifique se está tudo funcionando abrindo um terminal e executando: docker --version Se o Docker estiver instalado corretamente, ele vai exibir a versão instalada. O que é Flask? Flask é um m...
Postar um comentário
Leia mais

Criando uma Aplicação CRUD com Flask, PostgreSQL e Docker

Criando uma Aplicação CRUD com Flask, PostgreSQL e Docker Neste guia, vamos criar uma aplicação básica que acessa um banco de dados PostgreSQL e realiza operações CRUD (Create, Read, Update, Delete). Vamos usar Flask e executar tudo com Docker. Sem estilos ou extras, apenas o essencial. Estrutura do Projeto crud-app/ |-- app/ | |-- app.py | |-- templates/ | | |-- index.html | | |-- edit.html |-- Dockerfile |-- requirements.txt |-- docker-compose.yml Passo 1: Dependências Crie um arquivo requirements.txt com as seguintes linhas: Flask==2.2.2 Flask-SQLAlchemy==3.0.2 psycopg2-binary==2.9.3 Werkzeug==2.2.2 Passo 2: Aplicação Flask Arquivo app/app.py : from flask import Flask, render_template, request, redirect, url_for from flask_sqlalchemy import SQLAlchemy app = Flask(__name__) # Configuração do banco de dados app.config['SQLALCHEMY_DATABASE_URI'] = 'postgresql://user:password@db:5432/crud_db' app.config['SQLALCHEMY_TRACK_MODIFICATIONS'] = False db...
Postar um comentário
Leia mais