Working with AJAX package UpdateProgress control in ASP.NET using VB.NET

In this article you will learn about how you can use the AJAX package UpdateProgress control.
  • 3252
 

Introduction

The UpdateProgress control provides status information about partial page updates in UpdatePanel control. You can customize the Default content and the Layout of the UpdateProgress control. To prevent flashing on a partial page Update is very fast. You can specify a delay before the UpdateProgress control is displayed. The UpdateProgress control helps you to design a more intuitive UI when a web page contains one or more UpdatePanel controls for partial page rendering. If a partial page Update is slow, you can use the UpdateProgress control to provide the visual feedback about the status of the update. You can put multiple UpdateProgress control on a page each associated with a Different UpdatePanel control.
UpdateProgress control is a AJAX package control. This control can be used to give user more information about What is going on when AJAX is processing a request. Because AJAX is asynchronous and runs in the Background, there is no default status and the user doesn't know if anything is happening or not. Until the process is complete. We can use the UpdateProgress to tell the user that AJAX is dealing with the Process and will complete soon. In this article we are discussing an example that how you can use this AJAX package UpdateProgress control. We are going to add two UpdateProgress controls, two UpdatePanel controls. Inside the Update Progress will be the Message displayed to the user when the AJAX is processing the request.
 
Getting Started

  • Simply create a new ASP.NET web site. 
  • Drag the two UpdateProgress Controls, two UpdatePanels on your web page. The page will look like below.

    updateprogress1.gif
     
  • You can also add the controls by the below code.

    <%@ Page Title="Home Page" Language="VB" MasterPageFile="~/Site.Master" AutoEventWireup="false"
        CodeFile="Default.aspx.vb" Inherits="_Default" %>
    <asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
    </asp:Content>
    <
    asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
    <asp:ScriptManager ID="ScriptManager1" runat="server" /> 
    <asp:UpdateProgress runat="server" id="PageUpdateProgress1" AssociatedUpdatePanelID="UpdatePanel1" DynamicLayout="false">
    <ProgressTemplate>
    Processing Request from Update 1. Please Wait..
    </ProgressTemplate>
    </
    asp:UpdateProgress>
    <
    asp:UpdatePanel runat="server" id="UpdatePanel1">
    <ContentTemplate>
    <
    asp:Button runat="server" id="UpdateButton" onclick="UpdateButton_Click" text="Update 1" />
    </ContentTemplate>
    </
    asp:UpdatePanel>
    <
    asp:UpdateProgress runat="server" id="UpdateProgress2" AssociatedUpdatePanelID="UpdatePanel2" DynamicLayout="false">
    <ProgressTemplate>
    Processing Request from Update 2. Please Wait..
    </ProgressTemplate>
    </
    asp:UpdateProgress>
    <
    asp:UpdatePanel runat="server" id="UpdatePanel2">
    <ContentTemplate>
    <
    asp:Button runat="server" id="UpdateButton2" onclick="UpdateButton2_Click" text="Update 2" />
    </ContentTemplate>
    </
    asp:UpdatePanel>
    </
    asp:Content>
     

  • Then add the below code in code behind file of your web page.

       
    Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
        End Sub
        Protected Sub UpdateButton_Click(ByVal sender As Object, ByVal e As System.EventArgs)
            System.Threading.Thread.Sleep(5000)
        End Sub
        Protected Sub UpdateButton2_Click(ByVal sender As Object, ByVal e As System.EventArgs)
            System.Threading.Thread.Sleep(5000)
        End Sub

     
  • Now run your Application.
Output

updateprogress2.gif

updateprogress3.gif

updateprogress2.gif

updateprogress4.gif

updateprogress2.gif

Summary

In this article you learned that how you can use the AJAX Package UpdateProgress control.

Categories

More Articles

© 2020 DotNetHeaven. All rights reserved.