Progressbar in asp.net

Question

I want to add progressbar on form. I have a form which send invitation email to couple of users. so how can I progressbar to show the sending email process?

I add following code in .aspx file

<asp:UpdateProgress ID="UpdateProgress" runat="server">
 <ProgressTemplate>
 <asp:Image ID="Image1" ImageUrl="~/ProgressImage/ajax-loader.gif" AlternateText="Processing" runat="server" />
 </ProgressTemplate>
</asp:UpdateProgress>

Is this method is correct?

Answer 1

asp:UpdateProgress is an AJAX extension from ASP .NET and it only works in association with an asp:UpdatePanel and it is triggered on events from this panel. it has a property named AssociatedUpdatePanelID where you have to write the id of the update panel. hope this helps.

Answer 2

Looks good to me... You do have a scriptManager and an updatePanel on this aspx page too? See this demo code.

<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
    <ContentTemplate>
        <asp:Button ID="btnSendMail" runat="server" Text="Send Mail" OnClick="btnSendMail_Click" />
    </ContentTemplate>
</asp:UpdatePanel>
<asp:UpdateProgress ID="UpdateProgress1" runat="server">
    <ProgressTemplate>
        Sending Mail
    </ProgressTemplate>
</asp:UpdateProgress>

Answer 3

Use push technique: Here is how I do it: Class with message

 public class Message
    {
        /// <summary>
        /// The name who will receive this message.
        /// </summary>
        public string RecipientName { get; set; }

        /// <summary>
        /// The message content.
        /// </summary>
        public string MessageContent { get; set; }
    }

Class that will represent client:

public class Client
    {
        private ManualResetEvent messageEvent = new ManualResetEvent(false);
        private Queue<Message> messageQueue = new Queue<Message>();

        /// <summary>
        /// This method is called by a sender to send a message to this client.
        /// </summary>
        /// <param name="message">the new message</param>
        public void EnqueueMessage(Message message)
        {
            lock (messageQueue)
            {
                messageQueue.Enqueue(message);

                // Set a new message event.
                messageEvent.Set();
            }
        }

        /// <summary>
        /// This method is called by the client to receive messages from the message queue.
        /// If no message, it will wait until a new message is inserted.
        /// </summary>
        /// <returns>the unread message</returns>
        public Message DequeueMessage()
        {
            // Wait until a new message.
            messageEvent.WaitOne();

            lock (messageQueue)
            {
                if (messageQueue.Count == 1)
                {
                    messageEvent.Reset();
                }
                return messageQueue.Dequeue();
            }
        }
    }

Class to send messages to clients:

public class ClientAdapter
    {
        /// <summary>
        /// The recipient list.
        /// </summary>
        private Dictionary<string, Client> recipients = new Dictionary<string,Client>();

        /// <summary>
        /// Send a message to a particular recipient.
        /// </summary>
        public void SendMessage(Message message)
        {
            if (recipients.ContainsKey(message.RecipientName))
            {
                Client client = recipients[message.RecipientName];

                client.EnqueueMessage(message);
            }
        }

        /// <summary>
        /// Called by a individual recipient to wait and receive a message.
        /// </summary>
        /// <returns>The message content</returns>
        public string GetMessage(string userName)
        {
            string messageContent = string.Empty;

            if (recipients.ContainsKey(userName))
            {
                Client client = recipients[userName];

                messageContent = client.DequeueMessage().MessageContent;
            }

            return messageContent;
        }

        /// <summary>
        /// Join a user to the recipient list.
        /// </summary>
        public void Join(string userName)
        {
            recipients[userName] = new Client();
        }

        /// <summary>
        /// Singleton pattern.
        /// This pattern will ensure there is only one instance of this class in the system.
        /// </summary>
        public static ClientAdapter Instance = new ClientAdapter();
        private ClientAdapter() { }
    }

Sending messages:

 Message message = new Message
                                      {
                                          RecipientName = tbRecipientName.Text.Trim(),
                                          MessageContent = tbMessageContent.Text.Trim()
                                      };

                if (!string.IsNullOrWhiteSpace(message.RecipientName) && !string.IsNullOrEmpty(message.MessageContent))
                {
                    // Call the client adapter to send the message to the particular recipient instantly.
                    ClientAdapter.Instance.SendMessage(message);
}

Receive messages (this is JavaScript functions written in test page. They render content of the message on ASPX page. Here you should implement your logic):

// This method will persist a http request and wait for messages.
        function waitEvent() {

            CSASPNETReverseAJAX.Dispatcher.WaitMessage("<%= Session["userName"] %>", 
            function (result) {

                displayMessage(result);

                // Keep looping.
                setTimeout(waitEvent, 0);
            }, function () {

                // Keep looping.
                setTimeout(waitEvent, 0);
            });
        }

        // Append a message content to the result panel.
        function displayMessage(message) {
            var panel = document.getElementById("<%= lbMessages.ClientID %>");

            panel.innerHTML += currentTime() + ": " + message + "<br />";
        }

        // Return a current time string.
        function currentTime() {
            var currentDate = new Date();
            return currentDate.getHours() + ":" + currentDate.getMinutes() + ":" + currentDate.getSeconds();
        }