На событие изменения текстового поля, как показать анимацию загрузки при обработке данных Gridview?

#html #jquery #asp.net #asp.net-ajax #ajaxcontroltoolkit

#HTML #jquery #asp.net #asp.net-ajax #ajaxcontroltoolkit

Вопрос:

У меня есть Asp.Net веб-страница, где у меня есть текстовое поле с расширителем календаря, когда пользователь вводит дату, анимация загрузки должна загружаться во время обработки данных сетки.У меня есть приведенный ниже код (Jquery, HTML), который работает только тогда, когда пользователь вводит дату с помощью расширителя, но не тогда, когда пользователь вводит данные. Ни одно из моих решений не работает после применения Ajax UpdateProgress. ЛЮБЫЕ предложения помогут.

  $(document).ready(function () {
         $("[id$='ddlCountry'], [id$='DateTxtBox']").change(function () {
            $('.blockMe').block({
                message: 'Loading...',
                css: { padding: '10px' }
            });
        });
    });

     
 <table  style="width:100%">
<tr>                           
<td>
<div style="padding-top: 10px; padding-right: 60px; padding-bottom: 5px; width: 100%; overflow: hidden" class="table-responsive">
<table style="margin-left: 30px; margin-top:20px; width:100%;"> 
<tr>
<td style="padding-left:5%; padding-top:10px; padding-bottom:10px;">                           
    <asp:Label ID="DateFromlbl" class="text-muted" Style="font-size: 13px; text-align: right; font-weight: 600" Text="Date From (MM/dd/yyyy):" runat="server"></asp:Label>
    <asp:TextBox ID="DateTxtBox" Style="font-size: 10px; font-weight: 600" Width="80px"  Height="20px" AutoPostBack="true" OnTextChanged="DateTxtBox_OnTextChanged" runat="server" />
    <asp:Image ID="CalendarImg" runat="server" Width="18px" Height="18px" ImageUrl="~/DailyDownloads/Images/Calendar.PNG" />
    <cc1:CalendarExtender ID="DateFromCalenderExt" runat="server" TargetControlID="DateTxtBox" PopupButtonID="CalendarImg"></cc1:CalendarExtender>
    <asp:RequiredFieldValidator runat="server" ForeColor="Red" id="reqName" controltovalidate="DateTxtBox" errormessage="Date Required"/>
    <asp:RegularExpressionValidator ValidationExpression="^([0-9]|0[1-9]|1[012])/([0-9]|0[1-9]|[12][0-9]|3[01])/(19|20)dd$" ID="dateValidator"
     ControlToValidate="DateTxtBox" ForeColor="Red" ErrorMessage="Invalid Date Format. Use MM/DD/YYYY" runat="server"></asp:RegularExpressionValidator>
</td>
</tr>                                
<tr><td>
<table style="width:100%;">
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
<ContentTemplate>                        
<asp:Panel ID ="p1" runat="server">                         
    <td>                                     
    <asp:Label ID="Countrylbl" Style="font-size: 13px; text-align: right; font-weight: 600" class="text-muted" Text="Agencies:" runat="server"></asp:Label>
    <asp:DropDownList ID="ddlCountry" Style="width: 200px;" class="btn btn-primary btn-sm dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" Width="50%" runat="server" AutoPostBack="true" OnSelectedIndexChanged="ddlMunicipality_OnSelectedIndexChanged" AppendDataBoundItems="true">
    <asp:ListItem Text="All" Value="ALL"></asp:ListItem>
    </asp:DropDownList>
    </td> 
</asp:Panel>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="DateTxtBox" EventName="TextChanged" />
</Triggers>
</asp:UpdatePanel>
</tr></table>
</td>
</tr>
<tr>
<td colspan="4">
<asp:UpdatePanel ID="UpdatePanel2" runat="server" UpdateMode="Conditional">
<ContentTemplate>

<div class="blockMe">

  <asp:GridView EnableEventValidation="false" ID="EmpGrd" ShowHeaderWhenEmpty="true" runat="server" AutoGenerateColumns="false" AllowPaging="true"
       AllowSorting="true"  PageSize="25" Width="100%" OnPageIndexChanging="EmpGrd_PageIndexChanging" OnSorting="EmpGrd_Sorting" FooterStyle-BackColor="Black" CssClass="table table-condensed table-hover">
   <Columns>
   <asp:TemplateField ItemStyle-HorizontalAlign="Center" ItemStyle-Width="5%">
   <asp:BoundField DataField="EmpID" HeaderText="EmpID" ItemStyle-Width="10%" ItemStyle-Wrap="false" ReadOnly="True" SortExpression="MtgRef" />
   <asp:BoundField DataField="Name" HeaderText="Name" ItemStyle-Width="25%" ItemStyle-Wrap="false" SortExpression="Name" />
   <asp:BoundField DataField="Employment" HeaderText="Employment" ItemStyle-Width="10%" ItemStyle-Wrap="false" SortExpression="TaxAgency" />
   <asp:BoundField DataField="JoinedDate" HeaderText="JoinedDate" ItemStyle-Width="14%" ItemStyle-Wrap="false" SortExpression="CurrentAdvancedDate" />
   <asp:BoundField DataField="DateofBirth" HeaderText="DateofBirth" ItemStyle-Width="14%" ItemStyle-Wrap="false" SortExpression="NewAdvancedDate" />
   <asp:BoundField DataField="JobDescription" HeaderText="JobDescription" ItemStyle-Width="30%" ItemStyle-Wrap="true" Visible="true" SortExpression="LegalDescription" />
   </Columns>
   <EmptyDataTemplate><label class="label label-danger"  style="font-size:13px; font-weight:600;">No records found !</label></EmptyDataTemplate>
   <PagerStyle HorizontalAlign="Left" CssClass="GridPager" />
   </asp:GridView> 
   
</div>
    
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="ddlcountry" EventName="SelectedIndexChanged"/>
<asp:AsyncPostBackTrigger ControlID="DateTxtBox" EventName ="TextChanged"/>
</Triggers>
</asp:UpdatePanel>
</td>
</tr>
</table>
</div>
</td>
</tr> 
</table>  

Комментарии:

1. У вас есть .change(function... , вы могли бы попробовать добавить (или изменить это на) .keyup() . Никаких гарантий. Попробуйте несколько вещей и обновите свой вопрос тем, что вы пробовали, и результатами.

2. Не повезло, я пробовал .keyup() , не работает.

3. Я все еще поражен здесь, есть предложения?