Thursday, September 27, 2012

Strategies for implementing a 'Wait Notification' for a long running operation: standard ASP .NET

If you're looking for a good way to inform the users of your ASP .NET web application that processing is actually taking place during a long running process, here is a simple strategy you can use that involves standard ASP .NET.  Now, in order to make this work, you'll need to make three changes to the web page hosting the process which are listed as follows:
  1. Add a <div> tag to your HTML code that will be used for hosting the "Processing..." message or image.  Here is a simple example:

    <div align="center" id="div_ProcessingMessage" runat="server" style="display: none;"><span> Processing... </span></div>

  2. Add a javascript function that displays the above-mentioned <div> when called (NOTE: you could also add code to disable controls that you don't want the user touching in the event of a long running process).  Here is a simple example:

    <script type="text/javascript">
    function EnableProcessingMessage() {
        var test = document.getElementById('div_ProcessingMessage');
        test.style.display = "";
    }
    

  3. Add an "onsubmit" attribute to the <form> tag of your web page that calls the above-mentioned javascript function.  Here is a simple example:

    <form id="form1" runat="server" onsubmit="EnableProcessingMessage()">
After these changes are in place, you can fire up your application and the message or image contained in the <div> tag will pop up in the specified location whenever a postback is triggered on the page.  The longer the process takes, the longer this message will stay visible to the users.  Once the postback operation is complete, the message will be hidden again.

By the way, if you don't want the users clicking on various controls during a long running operation, you can prevent them from doing so by adding code to your javascript method that can temporarily hide or disable those controls.

Now, if you're using AJAX, this strategy won't work so I'll provide you with another solution for that in my next post...

No comments:

Post a Comment

Note: Only a member of this blog may post a comment.