How to use updateprogess with modelpoup in asp.net

Description:-

In this Article we will Use UpdateProgess with Update Panel so you can understand when run Update Panel then we will can Use Update Progress also. Here I have Used Loading Image on Update Progess Control So When Update Panel will Start then Progress Control Show Image on Windows Screen.

Default.aspx:-

<div>
  <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
  <asp:UpdateProgress ID="UpdateProgress1" runat="server" AssociatedUpdatePanelID="UpdatePanel1">
    <ProgressTemplate>
      <div class="modal">
        <div class="center">
          <img alt="" src="loader.gif" />
        </div>
      </div>
    </ProgressTemplate>
  </asp:UpdateProgress>

  <asp:UpdatePanel ID="UpdatePanel1" runat="server">
    <ContentTemplate>
      <div align="center">
        <h1>Click the button to see the UpdateProgress!</h1>
          <asp:Button ID="Button1" Text="Submit" runat="server" OnClick="Button1_Click" />
      </div>
    </ContentTemplate>
  </asp:UpdatePanel>
</div>

Default.aspx.cs:-

protected void Button1_Click(object sender, EventArgs e)
{
  System.Threading.Thread.Sleep(5000);
}

CSS:-

<style type="text/css">
body{
      margin: 0;
      padding: 0;
      font-family: Arial;
    }
.modal{
        position: fixed;
        z-index: 999;
        height: 100%;
        width: 100%;
        top: 0;
        background-color: Black;
        filter: alpha(opacity=60);
        opacity: 0.6;
        -moz-opacity: 0.8;
      }
.center{
         z-index: 1000;
         margin: 300px auto;
         padding: 10px;
         width: 130px;
         background-color: White;
         border-radius: 10px;
         filter: alpha(opacity=100);
         opacity: 1;
         -moz-opacity: 1;
       }
.center img{
             height: 128px;
             width: 128px;
           }
</style>

Author : Umesh Patel

Related Posts