Gmail like always visible Progress Indicator using ASP.Net, AJAX UpdateProgress & AlwaysVisibleControlExtender

In complex web applications showing progress indicator while postbacks are in progress, enhances the user experience by providing feedback about the process happening in the background.

Gmail has this “loading ….” Progress indicator while they are fetching the mail from their servers or any lenghty server calls are being made. Achieving something similar is a piece of cake using ASP.Net AJAX by using UpdatePanel, UpdateProgress & AlwaysVisibleControlExtender.

Set AlwaysVisibleControlExtender’s target control id to the “UpdateProgress” control’s ID & add the progress indicator image inside the “ProgressTemplate” of the “UpdatProgress” control.




DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>GMail like always visible progress indicatortitle>
    <style type="text/css">
        .body
        {
            background-color: #999;
        }
    style>
head>
<body>
    <center>
        <form id="form1" runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server">
        asp:ScriptManager>
        <cc1:AlwaysVisibleControlExtender runat="server" ID="awce" TargetControlID="updateProgress"
            VerticalSide="Top" VerticalOffset="10" HorizontalSide="Center">
        cc1:AlwaysVisibleControlExtender>
        <div style="height: 1000px; border: solid 1px red; background: #00728f;">
            <asp:UpdatePanel ID="UpdatePanel1" runat="server">
                <ContentTemplate>
                    <br />
                    <br />
                    <br />
                    <asp:Button ID="Button1" runat="server" Text="Update!" OnClick="Button1_Click" />
                ContentTemplate>
            asp:UpdatePanel>
        div>
        <asp:UpdateProgress runat="server" ID="updateProgress">
            <ProgressTemplate>
                <div id="progressIndicator" style="border: solid 1px #FFF;" runat="server">
                    <img src="gfx/ajax-loader.gif" />
                div>
            ProgressTemplate>
        asp:UpdateProgress>
        form>
    center>
body>
html>
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Xml.Linq;
using System.Data.SqlClient;
using System.Threading;

public partial class _Default : System.Web.UI.Page
{

    protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
           
        }
    }
    protected void Button1_Click(object sender, EventArgs e)
    {
        Thread.Sleep(10000);
    }
}

Comments

Post a Comment

Popular posts from this blog

WPF How to Dispose ViewModel when the associated UserControl (Not Window) closes?

Note: If your WPF UserControl is hosted in MFC Window, you may want to clean-up the ViewModel that is DataContext of your UserControl. Since Unloaded event is not called reliably for the UserControl when the hosting MFC Window closes, there is a need for another solution. XAML: < UserControl  x : Class = "Views.MyUserControl"               xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation"               xmlns : x = "http://schemas.microsoft.com/winfx/2006/xaml"               xmlns : mc = "http://schemas.openxmlformats.org/markup-compatibility/2006"                 xmlns : d = "http://schemas.microsoft.com/expression/blend/2008"                 mc : Ignorable = "d"                 d : DesignHeight = "300"  d : DesignWidth = "300" >      < Grid >                   </ Grid > </ UserControl > Code Behind: using  System; using  ViewModels; name
Read more

C# How to unit test Dispatcher

Dispatcher provides services for managing the queue of work items for a thread. Sometimes to execute a task on a background thread.  Any task executed by calling Dispatcher.BeginInvoke(...) in unit test does not get executed until you do some wire-up. This is how you would unit test code with Dispatcher. using  System; using  System.Windows.Threading; using  Microsoft.VisualStudio.TestTools.UnitTesting; namespace  UnitTesting.Tests {     [ TestClass ]      public   class   DispatcherUtilTest     {          private   ClassThatUsesDispatcher  _subject;         [ TestInitialize ]          public   void  TestInitialize()         {             _subject =  new   ClassThatUsesDispatcher ();         }         [ TestMethod ]          public   void  UseDispatcher()         {              // Arrange              var  backgroundWorkDone =  false ;             _subject.BackgroungWorkAction = () => { backgroundWorkDone =  true ; };              // Act             _subject.DoWork(
Read more

WPF: How to Deep Copy WPF object (e.g. UIElement) ?

         ///  Generic Method to perform Deep-Copy of a WPF element (e.g. UIElement)          public   static  T DeepCopy (T element)         {              var  xaml =  XamlWriter .Save(element);              var  xamlString =  new   StringReader (xaml);              var  xmlTextReader =  new   XmlTextReader (xamlString);              var  deepCopyObject = (T) XamlReader .Load(xmlTextReader);              return  deepCopyObject;         }          ///  Test showing that the deep copied object does not have the same reference as the object being copied         [ TestMethod ]          public   void  DeepCopy()         {              // Arrange              Shape  shape =  new   Rectangle  {Fill =  new   SolidColorBrush ( Colors .Red)};              // Act              var  deepCopyShape =  MyClass .DeepCopy(shape);              // Assert              Assert .AreNotSame(shape, deepCopyShape);         }  
Read more