使用 TextChanged 事件更新进度控件不显示图像

Question

我想在TextChanged 事件时显示加载图像，因为我在TextChanged 事件更改时填充了gridview。我正在尝试，但图像未显示。

下面是我的设计代码：

<asp:Panel ID="pnl_Candidate" runat="server" Visible="false">
   <asp:UpdatePanel ID="UpdatePanel1" runat="server">
      <ContentTemplate>
           <asp:TextBox ID="txt_CandidateSource" runat="server" OnTextChanged="txt_CandidateSource_TextChanged" AutoPostBack="True" class="form-control input-sm" placeholder="Candidate Source" Width="30%" />

         <asp:GridView ID="GridView1" runat="server" CssClass="footable" Style="max-width: 500px" AutoGenerateColumns="False" OnPageIndexChanging="GridView1_PageIndexChanging" AllowPaging="true" PageSize="5" DataKeyNames="EMail" >
             <Columns>
               <asp:TemplateField HeaderText="Sno">
                 <ItemTemplate>
                 <%# Container.DataItemIndex + 1 %>
                 </ItemTemplate>

               </asp:TemplateField>
              <asp:BoundField DataField="CandidateSource" HeaderText="CandidateSource"></asp:BoundField>
             <asp:BoundField DataField="Name" HeaderText="Name"></asp:BoundField>
              <asp:BoundField DataField="Gender" HeaderText="Gender"></asp:BoundField>
              <asp:BoundField DataField="DOB" HeaderText="DOB"></asp:BoundField>
              <asp:BoundField DataField="Mobile" HeaderText="Mobile"></asp:BoundField>
             <asp:BoundField DataField="EMail" HeaderText="EMail"></asp:BoundField>
             <asp:BoundField DataField="Qualification" HeaderText="Qualification"></asp:BoundField>
            <asp:BoundField DataField="CurrentLocation" HeaderText="CurrentLocation"></asp:BoundField>
            <asp:BoundField DataField="TotalExperience" HeaderText="TotalExperience"></asp:BoundField>
           <asp:BoundField DataField="CurrentCompany" HeaderText="CurrentCompany"></asp:BoundField>
           <asp:BoundField DataField="Designation" HeaderText="Designation"></asp:BoundField>
           <asp:BoundField DataField="WorkLocation" HeaderText="WorkLocation"></asp:BoundField>

           <asp:TemplateField HeaderText="add Comment Status">
           <ItemTemplate>
          <asp:LinkButton ID="lnkbtn_Comment_Status" runat="server"
                                    Text="Comment" OnClick="lnkbtn_Comment_Status_Click"></asp:LinkButton>
         </ItemTemplate>
          </asp:TemplateField>
         </Columns>
          <PagerStyle CssClass="pgr" />
          <EmptyDataTemplate>
          <center>
            <asp:Label ID="Label2" CssClass="Helptext_red" runat="server" Text="No Candidate Available"></asp:Label>
          </center>
          </EmptyDataTemplate>
          <HeaderStyle CssClass="header" />
           <AlternatingRowStyle CssClass="alt" />
           </asp:GridView>

          </ContentTemplate>
        </asp:UpdatePanel>
      <asp:UpdateProgress ID="UpdateProgress2" DisplayAfter="0" runat="server" AssociatedUpdatePanelID="UpdatePanel1">
            <ProgressTemplate>
                <div class="modal">
                    <div class="center">
                        <img alt="" src="loading_bar_animated.gif" />
                    </div>
                </div>
            </ProgressTemplate>
        </asp:UpdateProgress>

我的TextChange 事件和Filling gridview 在每个文本更改事件中：

protected void txt_CandidateSource_TextChanged(object sender, EventArgs e)
{
    if (txt_CandidateSource.Text != "")
    {
        System.Threading.Thread.Sleep(2000);
        DataTable dt = new DataTable();
        bo.Para1 = txt_CandidateSource.Text;
        bo.Para2 = txt_Qualification.Text;
        bo.Para3 = txt_CurrentLocation.Text;
        bo.Para4 = txt_TotalExperience.Text;
        bo.Para5 = txt_Designation.Text;
        dt = bl.Search_CandidateMaster(bo);
        GridView1.DataSource = dt;
        GridView1.DataBind();
    }
}

Answer 1

使用这个UpdateProgress很好的工作

CSS：

<style type="text/css">
        .rcs {
            display: block;
            position: absolute;
            top: 40%;
            left: 45%;
        }
</style>

ASPX：

           <asp:UpdateProgress ID="UpdateProgress1" runat="server" DisplayAfter="1" DynamicLayout="true">
                <ProgressTemplate>
                    <asp:Panel ID="Panel1543633" runat="server" Style="width: 100%; height: 100%; position: fixed; left: 0; top: 0; z-index: 99999; background: rgba(0, 0, 0, 0.2);">
                        <div class="rcs">
                            <asp:Image ID="Image1" ImageUrl="~/images/loading.gif" AlternateText="Processing"
                                runat="server" />
                        </div>
                    </asp:Panel>
                </ProgressTemplate>
            </asp:UpdateProgress>