rotating wheel while executing backend code asp.net

Question

I am trying to put a rotating wheel popup on the page while I am executing backend code for fetching new data from DB. Here is what I tried, but it doesn't want to work so far, nothing gets displayed. I want to display something when the checkbox is clicked (CheckedChanged), that's when something is fetching from db.

Here is the ajax code I have:

  <asp:UpdatePanel ID="UpdatePanel1" runat="server">

                    <Triggers>
                       <asp:AsyncPostBackTrigger controlid="cbAll" eventname="CheckedChanged" />
                    </Triggers>

                    <ContentTemplate>
                    </ContentTemplate>

                 </asp:UpdatePanel>



<asp:updateprogress associatedupdatepanelid="UpdatePanel1"
    id="updateProgress" runat="server">
    <progresstemplate>
        <div id="progressBackgroundFilter"></div>
        <div id="processMessage"> Loading...<br /><br />
             <img alt="Loading" src="../images/ajax-loader.gif" />
        </div>
    </progresstemplate>
</asp:updateprogress> 

And here is the checkbox control:

 <asp:CheckBox ID="cbAll" runat="server" Checked="true" Text="Show me everything" ForeColor="White"
        Visible="false" AutoPostBack="True" 
        oncheckedchanged="cbAll_CheckedChanged" />

Answer 1

Modify your code a bit.

You do not need the trigger, the event has AutoPostBack checkbox.

<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
        <%--<Triggers>
            <asp:AsyncPostBackTrigger ControlID="cbAll" EventName="CheckedChanged" />
        </Triggers>--%>
        <ContentTemplate>
            <asp:CheckBox ID="cbAll" runat="server" Checked="true" Text="Show me everything"
                ForeColor="White" Visible="false" AutoPostBack="True" OnCheckedChanged="cbAll_CheckedChanged" />
        </ContentTemplate>
    </asp:UpdatePanel>
    <asp:UpdateProgress AssociatedUpdatePanelID="UpdatePanel1" ID="updateProgress" runat="server">
        <ProgressTemplate>
            <div id="progressBackgroundFilter">
            </div>
            <div id="processMessage">
                Loading...<br />
                <br />
                <img alt="Loading" src="../images/ajax-loader.gif" />
            </div>
        </ProgressTemplate>
    </asp:UpdateProgress>

I hope this helps.