CODEWITHSUNDEEP
c#asp.net
Glinkot
Glinkot

Reputation: 2964

'Please wait' screen between pages in C# ASP.NET. Best practice?

I have a gridview with some imagebuttons, each of which kicks off a report page for that item. The report take 10-15 seconds to run, so I'd like a popup 'Generating report, please wait' type thing. I can think of a few ways but would like the opinion of those more experienced than I. The options I was considering:

a) link my imagebutton to an intermediate page that says 'please wait', and then refer it onto the report page from there. Seems a bit clunky b) Investigate using jquery or similar. I have telerik controls, they have a few things but it isn't clear if any are suitable. c) Define some kind of CSS layer with a please wait warning on it, and make it visible as part of the button's onclick event d) Look into jquery or similar

Any thoughts?

Thanks!

Upvotes: 3

Views: 7851

Answers (4)

satish e
satish e

Reputation: 31

please wait on page load in js can be used in any language give a try

  1. in body place this code
  <body>
    <div id='loadingmsg' style='display: none;'></div>
    <div id='loadingover' style='display: none;'></div>
  </body>
  1. in css
          #loadingmsg {
    width:100%;
height:100%;
position:fixed;
z-index:9999;
background:url("assets/img/loaders/load10.gif") no-repeat center center rgba(255,255,255,0);
      }
      #loadingover {
      background: #23351f;
      z-index: 99;
      width: 100%;
      height: 100%;
      position: fixed;
      top: 0;
      left: 0;
      -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
      filter: alpha(opacity=80);
      -moz-opacity: 0.8;
      -khtml-opacity: 0.8;
      opacity: 0.8;
    }
  1. js
   <script>
       document.onreadystatechange = function () {
           var state = document.readyState
           if (state == 'interactive') {
               showLoading();
           }
           else if (state == 'complete') {
              
                   hideLoading();
              
           }
       }

      
        function showLoading() {
            document.getElementById('loadingmsg').style.display = 'block';
            document.getElementById('loadingover').style.display = 'block';
        }
        function hideLoading() {
            document.getElementById('loadingmsg').style.display = 'none';
            document.getElementById('loadingover').style.display = 'none';
        }
    </script>

Upvotes: 0

alejandrobog
alejandrobog

Reputation: 2101

I use Div with transparency, and its pretty cool and simple. Give it a try.

 <div id="ModalPopup" style="visibility: hidden;">
  <div style="position: fixed; width: 100%; height: 100%; z-index: 10002; background-color: Gray;
    filter: alpha(opacity=70); opacity: 0.7;">
    &nbsp;
  </div>
  <table style="position: fixed; width: 100%; height: 100%; z-index: 10003;">
    <tr>
      <td align="center" valign="middle">
        <div style="color: Black; font-weight: bolder; background-color: White; padding: 15px;
          width: 200px;">
          <asp:Image ID="Image3" runat="server" ImageUrl="~/Images/progress.gif" />
          Procesando....
        </div>
      </td>
    </tr>
  </table>
  </div>

To display the div, use this JavaScript:

document.getElementById('ModalPopup').style.visibility = 'visible';

Upvotes: 4

AceMark
AceMark

Reputation: 729

you can have an <iframe> on the page, of which its style is set to display:none. a button (which you will use to execute an action) will perform a javascript function that will set the style of the <iframe> to display:block on click.

Upvotes: 0

The Little One
The Little One

Reputation: 11

I have the exact same problem before but I found the AJAX Server Control UpdateProgress very useful. Here's a link to UpdateProgress Control.

Upvotes: 1

Related Questions