Loader animation issue in bootstrap while click save button

Question

I'm using asp.net page and it contains various controls.

i used bootstrap navigation for menu and signature.

i have use various scripts for bootstrap designing and dropdown search box.

everything is working fine except loader animation.

When i click save button, loader should come in the screen. but it is just flickering and loader not coming.

what is the problem.?

below is my code

Master Page (productSite.master)
************   
 <!-- Bootstrap CSS -->
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <!-- Custom CSS -->
    <link href="Content/Styles.css" rel="stylesheet" />
    <link href="Content/GridView_Style.css" rel="stylesheet" />
  <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" />
    <!-- Bootstrap Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <!-- For Search dropdown -->
    <!-- jQuery -->
    <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
    <!-- Select2 CSS -->
    <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
    <!-- Select2 JS -->
    <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
    <!-- Bootstrap CSS -->
    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
    <!-- Bootstrap JS (and jQuery, which is required for Bootstrap) -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet" />
    <link href="https://fonts.googleapis.com/css2?family=Blender+Pro&display=swap" rel="stylesheet">
    <!-- Include Blender Pro font -->
    <!-- For Dropdown menu -->
    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- Bootstrap JS -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
    <!-- For Dropdown menu -->
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/5.3.0-alpha1/js/bootstrap.bundle.min.js"></script>
    <!-- Font Awesome CSS (for the caret icon) -->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" rel="stylesheet" />
    <!-- Bootstrap CSS (if not already included) -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Bootstrap Select CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap-select@1.14.0-beta2/dist/css/bootstrap-select.min.css" rel="stylesheet">
<!-- jQuery -->
<%--<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>--%>
<!-- Bootstrap JS (if not already included) -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
<!-- Bootstrap Select JS -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap-select@1.14.0-beta2/dist/js/bootstrap-select.min.js"></script>
Default Page (default.aspx)
***************************
  <%-- //********* Script for Loader animation  ******************//--%>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
  <script src="https://malsup.github.io/jquery.blockUI.js"></script>
 
  <%-- //********* Script for Loader animation  ******************//--%>
  <script type="text/javascript">
      $(function () {
          BlockUI("dvtable");
          $.blockUI.defaults.css = {};
      });
      function BlockUI(elementID) {
          var prm = Sys.WebForms.PageRequestManager.getInstance();
          prm.add_beginRequest(function () {
              $("#" + elementID).block({
                  message: '<div align = "center">' + '<img src="images/Loader_Cube.gif" height="100px" width="100px"/></div>',
                  css: {},
                  overlayCSS: { backgroundColor: '#000000', opacity: 0.6, border: '3px solid #63B2EB' },
              });
          });
          prm.add_endRequest(function () {
              $("#" + elementID).unblock();
          });
      };
 protected void btnSave_Click(object sender, EventArgs e)
 {
     try
     {
         System.Threading.Thread.Sleep(2000);
	  if (ddlproduct.SelectedValue == "")
 {
     ScriptManager.RegisterClientScriptBlock(this, this.GetType(), "alert", "alert('Pls. select product name.!');", true);
    
     ddlUsers.Focus();
     return;
 }
}
}

Answer 1

Ok, so you have a misunderstanding of how the page lifecycle works.

Without this understanding, then your code as posted will of course not work.

 We can dump/ignore the issue of a master page, since when using a master page, then the master + child page is combined into ONE single page anyway. In other words, how this can/will work does not change due to a master + child page setup. That master + child page is not a two phase operation from the client side browsers point of view.

 

Next up:

You can not display some “wait” message with server side code, since any code behind requires the WHOLE web page to be sent to the server. That will be "too late" in the page lifecycle.

 

So, if you in that code behind?

Say a button click code behind, and then:

Modify a text box.

Hide/show controls.

Inject some JavaScript?

 

All of the above operations occur server side, and on client side, they just see the browser “wait” until such time the ALL of the code behind is 100% complete with modifications of that “copy” of the browser on the server side.

So, you can modify a text box, and inject script. Or you can inject script and then modify the text box. The user will NOT see any difference in such order of operations, since the web page is STILL up on the server, and is still being modified. So, for example, if you try to modify a text box with a for/next loop, and change it from 1 to 10? (with a 1 second wait)?

The user will wait for 10 seconds while the code behind is making changes to the COPY of the web page on the server side while code behind runs. They will not see the text box change from 1 to 10, but will ONLY see the final result of "10" in the text box (and they will have waited 10 seconds).

 

Only AFTER all code behind is done making changes to the page – including script injections?

Then the WHOLE page travels back to the client side. Only THEN does the user see changes to the text box, and only then does your injected script run.

 

So, making changes to a text box, or injecting script is NOT seen by the end user until such time the page up on the server completes the page lifecycle (the so called round trip). In effect, your code behind, and including script injection is NEVER seen in real time as you make the changes. Your code behind is working on a copy of the browser page that is now up on the server side. You make the changes, (one or many). You inject the script.

After ALL of the code behind is now done, then the WHOLE page travels back to the client side. The page is then rendered and displayed. The JavaScript engine loads, and now any JavaScript runs on that page.

 

So, to create a please wait, or some kind of spinner animation for the user WHILE that page is up on the server and code behind makes changes to that COPY?

Then display of such spinner code has to occur client side FIRST and BEFORE the whole page is sent up to the server.

 

Armed with the above knowledge, here is a simple working sample based on the above concepts.

 

We are going to “fake” delay of say 2-3 seconds for the page to complete its work.

 

 Markup:

            <asp:Button ID="Button1" runat="server" Text="Process data"
                OnClick="Button1_Click"
                OnClientClick="$('#myprogressarea').show();"
                CssClass="btn" />
            <div id="myprogressarea" style="display:none">
                <br />
                <h4>Processing data - please wait</h4>
                 <img src="/Content/wait2.gif" width="64" />
            </div>

Note VERY close how the standard button has both a client side option, and a server side option (for code behind).

So, when the user clicks on the above, the client side code runs first, and then the page is posted back to the server (for the code behind to modify the page, or inject script WHILE we wait for that code to complete).

So, code behind for the button is thus this:

        protected void Button1_Click(object sender, EventArgs e)
        {
            System.Threading.Thread.Sleep(3000);    // fake 3 second long process
            // more database or whatever code here.
        }

 And the result is thus this:

Note VERY close with above, we don't have to hide the spinner, since when all that code behind is done, then a WHOLE new fresh page comes back from the server, and thus the spinner will hide automatic.

So, the above concepts of the so called page lifecycle explains why your example code does not work. You can't really try to trigger or display a "wait" message with code behind, since that's too late, and the page will have already been sent up to the server. And the user will ONLY see changes made when all of (100%) of the code behind is completed. This includes changes to controls and includes script injection code - user see's none of such changes until such time all of the server code code is 100% completed, and then (and only then) is a whole new fresh copy of the page transmitted from the server to the client side browser.

So, any display of a "page loading" etc. has to occur BEFORE the post-back to the server occurs, not after. Hence, you have to use client side code attached to the user's button or action to display the wait message before any post-back and server side code runs.

Edit:

Just reading your post, I see you are using:

Sys.WebForms.PageRequestManager.getInstance();

Ok, then that ONLY works if your button is inside of a update panel.

I actually suggest you try using the OnClientClick event, and call a JS routine with your code to show/display the div with the animation. Better yet, create a div on the page, and just show it (I used jQuery). So, keep in mind that using PageRequestManager will ONLY work for buttons inside of a update panel. However, the example I provided here will work regardless of a update panel being used or not - hence I suggest adopting the approach I outline here.

You probably should show the markup being used for the button click - as that's missing from all of your markup you posted, and it not really much help to reproduce or determine your issues. Best guess right now? Your button is triggering a full page post back, and thus using the PageRequestManager will not work.

Answer 2

Hi @BeUnique,

I have tested the code you provided and I think your main problem is the usage of UpdatePanel control. Test code below (works fine):

<asp:Content ID="Content1" ContentPlaceHolderID="MainContent" runat="server">

    <asp:UpdatePanel ID="UpdatePanel1" runat="server">
        <ContentTemplate>
            <div id="dvtable"></div>
            <br />
            <asp:Button ID="btnSave" runat="server" Text="Button" OnClick="btnSave_Click" />
        </ContentTemplate>
    </asp:UpdatePanel>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
    <script src="https://malsup.github.io/jquery.blockUI.js"></script>
    <script type="text/javascript">
        $(function () {
            BlockUI("dvtable");
            $.blockUI.defaults.css = {};
        });

        function BlockUI(elementID) {
            var prm = Sys.WebForms.PageRequestManager.getInstance();
            prm.add_beginRequest(function () {
                $("#" + elementID).block({
                    message: '<div align = "center">' + '<img src="images/Loader_Cube.gif" height="100px" width="100px"/></div>',
                    css: {},
                    overlayCSS: { backgroundColor: '#000000', opacity: 0.6, border: '3px solid #63B2EB' },
                });
            });
            prm.add_endRequest(function () {
                $("#" + elementID).unblock();
            });
        };
    </script>
</asp:Content>
aspx.cs
protected void btnSave_Click(object sender, EventArgs e)
{
    System.Threading.Thread.Sleep(2000);
}

As mentioned by @Albert Kallal, and also described in the official documentation:

The PageRequestManager class in the Microsoft AJAX Library coordinates with the ScriptManager and UpdatePanel server controls on an AJAX-enabled ASP.NET Web page to enable partial-page updating.

So the main reason is that a full postback of the page occurs (which appears to be a flicker). Try placing that portion of page code inside an UpdatePanel control and that should solve your problem.

Best regards,

Xudong Peng

---

If the answer is the right solution, please click "Accept Answer" and kindly upvote. If you have extra questions about this answer, please click "Comment".

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.