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 !!!!

Comments

Post a Comment

Popular posts from this blog

Responsive Web Design

-
Image
  What it is A web application developed based on the responsive web design concept will adopt the layout of the application based on the screen size and orientation. As the user switches from their laptop to iPad, the website should automatically switch to accommodate for resolution, image size and scripting abilities. In other words, the website should have the technology to automatically respond to the user’s preferences. This would eliminate the need for a different design and development phase for each new gadget on the market. When designing a web in responsive manner same HTML content will be maintained, but it will be viewed in different layouts when user switches among different browser sizes. In that way website can server the users by changing the layout of the content so user can view it in more user friendly manner, without too many scrolling. How the layout changes will be discussed under topic Design patterns   Pros Increasing your reach to tablet and mobile au
Read more

Affine Cipher in C#

-
Image
  The affine cipher is a type of monoalphabetic substitution cipher , wherein each letter in an alphabet is mapped to its numeric equivalent, encrypted using a simple mathematical function, and converted back to a letter. The formula used means that each letter encrypts to one other letter, and back again, meaning the cipher is essentially a standard substitution cipher with a rule governing which letter goes to which. As such, it has the weaknesses of all substitution ciphers. Each letter is enciphered with the function , where is the magnitude of the shift. For more information on affine cipher visit here Following code is written in c# which has the affine cipher algorithm   public static string AffineEncrypt( string plainText, int a, int b) {      string cipherText = "" ;        // Put Plain Text (all capitals) into Character Array      char [] chars = plainText.ToUpper().ToCharArray();        // Compute e(x) = (ax + b)(mod m) for every character
Read more

Contract First Development in WCF 4.5

-
Image
WCF 4.5 supports contract first development. Means it allows to create all the data contract classes can be auto generated using the WSDL. one of the advantage in using the is if we start developing the service from the data contracts & then generating the WSDL we might end up in creating from data contracts with .net specific data types. But when using contract first development as WSDL is xml based only xml based data types are allowed to create so no .net specific contract will be created. This feature can be very useful when WSDL file is produced through design phase either by a solution architect or through mutual parties that agree on a contract prior to development and build phases.  When this is the case, either the contract can be created for a future service implementation or contracts can be created so that developers can begin coding for the client side of an interface prior to the endpoint being available. The contract-first tool is integrated into Visual Studio 2012
Read more