Thursday, April 17, 2014

Loading Processing Window in Asp.net

 

Some functionalities in our systems takes some seconds to execute. In such case if you want to gray out the page and load a pop up window and close it when server side processing is done following code might help you.

aspx Code
  1. <html xmlns="http://www.w3.org/1999/xhtml">
  2. <head runat="server">
  3.     <title></title>
  4.     <link href="StyleSheet1.css" rel="stylesheet" type="text/css" />
  5.  
  6.     <script type="text/javascript" src="jquery-1.8.2.min.js"></script>
  7.     <script type="text/javascript">
  8.         function eventInProgress() {
  9.  
  10.             $('#block').fadeIn();
  11.  
  12.             $('#container').fadeIn();
  13.         }
  14.  
  15.         function CloseInprogressWindow() {
  16.             $('#block').fadeOut();
  17.             $('#container').fadeOut();
  18.         }
  19.  
  20.         $(document).ready(function () {
  21.             $('ul').css({ width: $('#container').width() - 20, height: $('#container').height() - 90 });
  22.         });
  23.     </script>
  24. </head>
  25. <body>
  26.     <form id="form1" runat="server">
  27.         <div id="block"></div>
  28.         <div id="container">
  29.             <h1>test....</h1>
  30.  
  31.         </div>
  32.         <div>
  33.             <asp:Button ID="btnSave" runat="server" Text="Button" OnClientClick="eventInProgress();" OnClick="btnSave_Click" />
  34.  
  35.         </div>
  36.     </form>
  37. </body>
  38. </html>

 

Style Sheet
  1. * {
  2.     font-family: Trebuchet MS;
  3. }
  4.  
  5. #container {
  6.     width: 30%;
  7.     height: 10%;
  8.     display: none;
  9.     position: fixed;
  10.     margin-top: 5%;
  11.     margin-left: 5%;
  12.     background: #FFF;
  13.     border: 1px solid #666;
  14.     border: 1px solid #555;
  15.     box-shadow: 2px 2px 40px #222;
  16.     z-index: 999999;
  17. }
  18. /*#container iframe {display:none; width: 100%; height: 100%; position: absolute; border: none; }*/
  19. #block {
  20.     background: #000;
  21.     opacity: 0.6;
  22.     position: fixed;
  23.     width: 100%;
  24.     height: 100%;
  25.     top: 0;
  26.     left: 0;
  27.     display: none;
  28. }
  29.  
  30. ul {
  31.     padding: 10px;
  32.     background: #EEE;
  33.     position: absolute;
  34.     height: 200px;
  35.     overflow: scroll;
  36. }
  37.  
  38.     ul li {
  39.         color: #222;
  40.         padding: 10px;
  41.         font-size: 22px;
  42.         border-bottom: 1px solid #CCC;
  43.     }
  44.  
  45. h3 {
  46.     font-size: 26px;
  47.     padding: 18px;
  48.     border-bottom: 1px solid #CCC;
  49. }

 

 

Backend Code
  1. protected void btnSave_Click(object sender, EventArgs e)
  2.         {
  3.             System.Threading.Thread.Sleep(5000);
  4.             CloseInprogressWindow();
  5.         }
  6.  
  7.         private void CloseInprogressWindow()
  8.         {
  9.             string javaScript = "CloseInprogressWindow();";
  10.             if (!ClientScript.IsStartupScriptRegistered("CloseInprogressWindow"))
  11.             {
  12.  
  13.                 ScriptManager.RegisterStartupScript(this, this.GetType(), "CloseInprogressWindow", javaScript, true);
  14.             }
  15.         }

Output will Look Like below.

image

Hope this helps.

Happy Coding !!!!

No comments :

Post a Comment