JQuery脚本防止Gridview分页多次触发

Question

我有一个问题，我可以使用我的 gridview 第一次分页，但是当我尝试单击第二个页面时，没有任何反应。我已经能够确定它与一个 JQuery 脚本有关，该脚本用于在我的 gridview 中触发 OnTextChanged 事件后跳转到下一个文本框，这就像一个魅力。首先，这里是相关代码：

<asp:ScriptManager ID="ScriptManagerDetails" runat="server" ScriptMode="Release"></asp:ScriptManager>
        <script type="text/javascript">
            var g_CurrentTextBox;                
            Sys.Application.add_load(applicationLoadHandler);
            function applicationLoadHandler() {
                Sys.WebForms.PageRequestManager.getInstance().add_endRequest(endRequestHandler);
            }

            function endRequestHandler() {

                $get(g_CurrentTextBox).focus();
                $get(g_CurrentTextBox).select();
            }


            function onTextFocus() {
                g_CurrentTextBox = event.srcElement.id;
            }                
        </script>
        <asp:UpdatePanel ID="UpdatePanelDetails" runat="server">
            <ContentTemplate>
            <div class="row" id="ItemResults">
            <asp:GridView ID="gvDetailList" runat="server" CssClass="table table-striped table-bordered table-hover" 
              AutoGenerateColumns="false"  AllowPaging="true" OnPageIndexChanging="gvDetailList_PageIndexChanging" OnRowDataBound="gvDetailList_RowDataBound" Pagesize="25" >
                <Columns>
                    <asp:BoundField DataField="ItemNumber" HeaderText ="Item Number" SortExpression="ItemNumber" />
                    <asp:TemplateField HeaderText="Qty" SortExpression="QUANTITY">
                        <ItemTemplate>
                            <asp:Label ID="lblGVQuantity" runat="server" Text='<%#Eval("QUANTITY") %>'></asp:Label>
                            <asp:Panel ID="pnlQuantity" runat="server">
                                <asp:TextBox ID="txtQuantity" runat="server" class="form-control input-sm" 
                                      AutoPostBack="true"  Text='<%#Eval("QUANTITY") %>' OnTextChanged="txtQuantity_TextChanged"></asp:TextBox>
                                <asp:CompareValidator ID="cvQuantity" runat="server" ControlToValidate="txtQuantity" Type="Integer" ForeColor="Red"
                                 Operator="DataTypeCheck" ErrorMessage="Quantity is not numeric" Text="* Quantity is not numeric" Display="Dynamic" ValidationGroup="valAdd" />
                            </asp:Panel>
                        </ItemTemplate>
                    </asp:TemplateField>
                </Columns>
                <PagerStyle CssClass="pagination-ys" />
            </asp:GridView>
            <asp:SqlDataSource ID="SqlDetailList" runat="server" 
            ConnectionString="<%$ ConnectionStrings:MyConnectionStr%>"                     
             >
        </asp:SqlDataSource>
        </div>
        </ContentTemplate>
     </asp:UpdatePanel>

下面是代码：

protected void Page_Load(object sender, EventArgs e)
{        
    if (!IsPostBack)
    {
        BindDetails();
    }
}

private void BindDetails()
{        
    string strSQL = "SELECT  * FROM TABLE";
    SqlDetailList.SelectCommand = strSQL;
    gvDetailList.DataSource = SqlDetailList;
    gvDetailList.DataBind();
}

protected void gvDetailList_PageIndexChanging(object sender, GridViewPageEventArgs e)
{        
    gvDetailList.PageIndex = e.NewPageIndex;
    BindDetails();
}

如果我删除脚本，分页工作正常。但我就像我说的那样，保留脚本后，它只能在第一次工作，但不能在后续页面上工作。

Answer 1

好的，我想我在进行了一些更改后现在可以正常工作了。首先，我通过查看当前文本框是否为空以及 gridview 计数是否与页面请求之前相同，对 JQuery 脚本进行了一些更改。这是因为由于某种原因，如果我在页面的第五行并且下一页只有四行，那么它将寻求将焦点放在页面的第五行上，我会得到一个例外。

然后对于后面的代码，我只是将焦点放在 Page_Load 事件和 PageIndexChanged 事件（我添加的）中的第一行。

HTML：

<asp:ScriptManager ID="ScriptManagerDetails" runat="server" ScriptMode="Release"></asp:ScriptManager>
    <script type="text/javascript">
        var rowscountbefore;
        var g_CurrentTextBox;                
        Sys.Application.add_load(applicationLoadHandler);
        function applicationLoadHandler() {
            Sys.WebForms.PageRequestManager.getInstance().add_endRequest(endRequestHandler);
        }

        function beginRequestHandler() {
        rowscountbefore = $("#<%=gvDetailList.ClientID%> tr").length;
         }

        function endRequestHandler() {
         if (g_CurrentTextBox != null && rowscountbefore == $("#<%=gvDetailList.ClientID%> tr").length) {
            $get(g_CurrentTextBox).focus();
            $get(g_CurrentTextBox).select();
           }
        }

        function onTextFocus() {
            g_CurrentTextBox = event.srcElement.id;
        }                
    </script>
    <asp:UpdatePanel ID="UpdatePanelDetails" runat="server">
        <ContentTemplate>
        <div class="row" id="ItemResults">
        <asp:GridView ID="gvDetailList" runat="server" CssClass="table table-striped table-bordered table-hover" OnPageIndexChanged="gvDetailList_PageIndexChanged"
          AutoGenerateColumns="false"  AllowPaging="true" OnPageIndexChanging="gvDetailList_PageIndexChanging" OnRowDataBound="gvDetailList_RowDataBound" Pagesize="25" >
            <Columns>
                <asp:BoundField DataField="ItemNumber" HeaderText ="Item Number" SortExpression="ItemNumber" />
                <asp:TemplateField HeaderText="Qty" SortExpression="QUANTITY">
                    <ItemTemplate>
                        <asp:Label ID="lblGVQuantity" runat="server" Text='<%#Eval("QUANTITY") %>'></asp:Label>
                        <asp:Panel ID="pnlQuantity" runat="server">
                            <asp:TextBox ID="txtQuantity" runat="server" class="form-control input-sm" 
                                  AutoPostBack="true"  Text='<%#Eval("QUANTITY") %>' OnTextChanged="txtQuantity_TextChanged"></asp:TextBox>
                            <asp:CompareValidator ID="cvQuantity" runat="server" ControlToValidate="txtQuantity" Type="Integer" ForeColor="Red"
                             Operator="DataTypeCheck" ErrorMessage="Quantity is not numeric" Text="* Quantity is not numeric" Display="Dynamic" ValidationGroup="valAdd" />
                        </asp:Panel>
                    </ItemTemplate>
                </asp:TemplateField>
            </Columns>
            <PagerStyle CssClass="pagination-ys" />
        </asp:GridView>
        <asp:SqlDataSource ID="SqlDetailList" runat="server" 
        ConnectionString="<%$ ConnectionStrings:MyConnectionStr%>"                     
         >
    </asp:SqlDataSource>
    </div>
    </ContentTemplate>
 </asp:UpdatePanel>

代码背后：

protected void Page_Load(object sender, EventArgs e)
{        
    if (!IsPostBack)
    {
        BindDetails();
        TextBox txtQuantity = (TextBox)gvDetailList.Rows[0].Cells[4].FindControl("txtQuantity");
        txtQuantity.Focus();
    }
}

private void BindDetails()
{        
    string strSQL = "SELECT  * FROM TABLE";
    SqlDetailList.SelectCommand = strSQL;
    gvDetailList.DataSource = SqlDetailList;
    gvDetailList.DataBind();
}

protected void gvDetailList_PageIndexChanging(object sender, GridViewPageEventArgs e)
{        
    gvDetailList.PageIndex = e.NewPageIndex;
    BindDetails();
}

protected void gvDetailList_PageIndexChanged(object sender, EventArgs e)
{
    TextBox txtQuantity = (TextBox)gvDetailList.Rows[0].Cells[4].FindControl("txtQuantity");
    txtQuantity.Focus();
}