在 GridView 中添加动态行时如何保持页面的滚动位置？答案

【问题标题】：How to maintain scroll position of a page when add dynamic rows in GridView?在 GridView 中添加动态行时如何保持页面的滚动位置？
【发布时间】：2018-08-21 16:44:15
【问题描述】：

在我的网页中，当我使用 RowCommand 在 GridView 中添加新行时，我在 FooterTemplate 中有一个 LinkButton。 LinkButton 进行部分回发，但我的页面丢失了当前滚动位置并将滚动返回到页面顶部。当我在我的 GridView 中添加新项目时，我应该如何保持我的页面滚动位置。

以下是我的屏幕输出：

下面是我的页面代码：

aspx：

<%@ Page Title="" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="Invoice.aspx.cs" Inherits="RSMS.Users.Invoice" %>

<asp:UpdatePanel ID="upItemDetail" runat="server">
<ContentTemplate>
    <asp:GridView
        ID="gvItemDetail"
        runat="server"
        Width="100%"
        ShowHeaderWhenEmpty="true"
        AutoGenerateColumns="false"
        EmptyDataText="No Data Found!"
        ShowFooter="False"
        BorderStyle="None"
        CellPadding="3"
        GridLines="Horizontal"
        SkinID="AHGridView"
        OnRowCommand="gvItemDetail_RowCommand">
        <Columns>
            <asp:TemplateField HeaderText="Item ID">
                <ItemTemplate>
                    <asp:Label ID="lblItemID" runat="server" Text='<%# Eval("Item_ID") %>'></asp:Label>
                </ItemTemplate>
            </asp:TemplateField>
            <asp:TemplateField HeaderText="Item Name">
                <ItemTemplate>
                    <asp:Label ID="lblItemID" runat="server" Text='<%# Eval("Item_Name") %>'></asp:Label>
                </ItemTemplate>
                <EditItemTemplate>
                    <asp:TextBox
                        ID="txtItemName"
                        runat="server"
                        placeholder="Item Name"
                        CssClass="form-control"></asp:TextBox>
                    </div>
                <asp:HiddenField ID="hdnItemID" runat="server" Value="" ClientIDMode="Static" />
                    <div id="AutoCompleteItem"></div>
                    <%--<asp:RequiredFieldValidator
                    ID="rfvItemName"
                    runat="server"
                    ControlToValidate="txtItemName"
                    ErrorMessage="Item Name must be enter."
                    Display="None">
                </asp:RequiredFieldValidator>--%>
                    <ajaxToolkit:AutoCompleteExtender
                        ID="acetxtItemName"
                        runat="server"
                        ServiceMethod="GetItemID"
                        ServicePath="~/ApplicationWebService.asmx"
                        TargetControlID="txtItemName"
                        MinimumPrefixLength="1"
                        UseContextKey="false"
                        CompletionInterval="0"
                        EnableCaching="true"
                        CompletionSetCount="30"
                        FirstRowSelected="true"
                        CompletionListElementID="AutoCompleteItem"
                        OnClientItemSelected="ItemSelected">
                    </ajaxToolkit:AutoCompleteExtender>
                </EditItemTemplate>
                <FooterTemplate>
                    <asp:TextBox
                        ID="txtItemName"
                        runat="server"
                        placeholder="Item Name"
                        TabIndex="5"
                        CssClass="form-control"></asp:TextBox>
                    </div>
                <asp:HiddenField ID="hdnItemID" runat="server" Value="" ClientIDMode="Static" />
                    <div id="AutoCompleteItem"></div>
                    <%--<asp:RequiredFieldValidator
                    ID="rfvItemName"
                    runat="server"
                    ControlToValidate="txtItemName"
                    ErrorMessage="Item Name must be enter."
                    Display="None">
                </asp:RequiredFieldValidator>--%>
                    <ajaxToolkit:AutoCompleteExtender
                        ID="acetxtItemName"
                        runat="server"
                        ServiceMethod="GetItemID"
                        ServicePath="~/ApplicationWebService.asmx"
                        TargetControlID="txtItemName"
                        MinimumPrefixLength="1"
                        UseContextKey="false"
                        CompletionInterval="0"
                        EnableCaching="true"
                        CompletionSetCount="30"
                        FirstRowSelected="true"
                        CompletionListElementID="AutoCompleteItem"
                        OnClientItemSelected="ItemSelected">
                    </ajaxToolkit:AutoCompleteExtender>
                </FooterTemplate>
            </asp:TemplateField>
            <asp:TemplateField HeaderText="Sales Price">
                <ItemTemplate>
                    <asp:Label ID="lblItemSalesPrice" runat="server" Text='<%# Eval("Sale_Price") %>'></asp:Label>
                </ItemTemplate>
                <EditItemTemplate>
                    <asp:TextBox
                        ID="txtSalesPrice"
                        runat="server"
                        placeholder="Sales Price"
                        CssClass="form-control"></asp:TextBox>
                    <ajaxToolkit:FilteredTextBoxExtender ID="ftbeSalesPrice" runat="server"
                        TargetControlID="txtSalesPrice"
                        FilterType="Numbers"></ajaxToolkit:FilteredTextBoxExtender>
                    <%--<asp:RequiredFieldValidator
                    ID="rfvPrice"
                    runat="server"
                    ControlToValidate="txtPurchasePrice"
                    ErrorMessage="Purchase Price must be in numbers."
                    Display="None">
                </asp:RequiredFieldValidator>--%>
                </EditItemTemplate>
                <FooterTemplate>
                    <asp:TextBox
                        ID="txtSalesPrice"
                        runat="server"
                        placeholder="Sales Price"
                        Text='<%# Eval("Sale_Price") == null ? "0" : Eval("Sale_Price") %>'
                        TabIndex="6"
                        ClientIDMode="Static"
                        CssClass="form-control"></asp:TextBox>
                    <asp:HiddenField ID="hdnPurchase_Price" runat="server" ClientIDMode="Static" Value="0" />
                    <%--<ajaxToolkit:FilteredTextBoxExtender ID="ftbeSalesPrice" runat="server"
                    TargetControlID="txtSalesPrice"
                    FilterType="Numbers"></ajaxToolkit:FilteredTextBoxExtender>--%>
                    <%--<asp:RequiredFieldValidator
                    ID="rfvPurchasePrice"
                    runat="server"
                    ControlToValidate="txtPurchasePrice"
                    ErrorMessage="Purchase Price must be in numbers."
                    Display="None">
                </asp:RequiredFieldValidator>--%>
                </FooterTemplate>
            </asp:TemplateField>
            <asp:TemplateField HeaderText="Item QTY">
                <ItemTemplate>
                    <asp:Label ID="lblItemQTY" runat="server" Text='<%# Eval("Item_Qty") %>'></asp:Label>
                </ItemTemplate>
                <EditItemTemplate>
                    <asp:TextBox
                        ID="txtItemQuantity"
                        runat="server"
                        placeholder="Quantity"
                        CssClass="form-control"></asp:TextBox>
                    <ajaxToolkit:FilteredTextBoxExtender ID="ftbeQuantity" runat="server"
                        TargetControlID="txtItemQuantity"
                        FilterType="Numbers"></ajaxToolkit:FilteredTextBoxExtender>
                    <%--<asp:RequiredFieldValidator
                    ID="rfvQuantity"
                    runat="server"
                    ControlToValidate="txtItemQuantity"
                    ErrorMessage="Item Quantity must be enter in numbers."
                    Display="None">
                </asp:RequiredFieldValidator>--%>
                </EditItemTemplate>
                <FooterTemplate>
                    <asp:TextBox
                        ID="txtItemQuantity"
                        runat="server"
                        placeholder="Quantity"
                        Text='<%# Eval("Item_Qty") == null ? "0" : Eval("Item_Qty") %>'
                        TabIndex="7"
                        CssClass="form-control"></asp:TextBox>
                    <ajaxToolkit:FilteredTextBoxExtender ID="ftbeQuantity" runat="server"
                        TargetControlID="txtItemQuantity"
                        FilterType="Numbers"></ajaxToolkit:FilteredTextBoxExtender>
                    <%--<asp:RequiredFieldValidator
                    ID="rfvQuantity"
                    runat="server"
                    ControlToValidate="txtItemQuantity"
                    ErrorMessage="Item Quantity must be enter in numbers."
                    Display="None">
                </asp:RequiredFieldValidator>--%>
                </FooterTemplate>
            </asp:TemplateField>
            <asp:TemplateField HeaderText="UOM">
                <ItemTemplate>
                    <asp:Label ID="lblUOM" runat="server" Text='<%# Eval("Item_UOM") %>'></asp:Label>
                </ItemTemplate>
                <EditItemTemplate>
                    <asp:DropDownList
                        ID="ddlUOM"
                        runat="server"
                        CssClass="ah-border-less"
                        AutoPostBack="true">
                        <asp:ListItem Selected="True" Value="0">Select UOM</asp:ListItem>
                        <asp:ListItem Value="1">GM</asp:ListItem>
                        <asp:ListItem Value="2">KG</asp:ListItem>
                        <asp:ListItem Value="3">PCS</asp:ListItem>
                        <asp:ListItem Value="4">DZ</asp:ListItem>
                        <asp:ListItem Value="5">BOX</asp:ListItem>
                    </asp:DropDownList>
                </EditItemTemplate>
                <FooterTemplate>
                    <asp:DropDownList
                        ID="ddlUOM"
                        runat="server"
                        TabIndex="8"
                        CssClass="ah-border-less">
                        <asp:ListItem Selected="True" Value="0">Select UOM</asp:ListItem>
                        <asp:ListItem Value="GM">GM</asp:ListItem>
                        <asp:ListItem Value="KG">KG</asp:ListItem>
                        <asp:ListItem Value="PCS">PCS</asp:ListItem>
                        <asp:ListItem Value="DZ">DZ</asp:ListItem>
                        <asp:ListItem Value="BOX">BOX</asp:ListItem>
                    </asp:DropDownList>
                </FooterTemplate>
            </asp:TemplateField>
            <asp:TemplateField HeaderText="Total Price">
                <ItemTemplate>
                    <asp:Label ID="lblTotalPrice" Text='<%# Eval("Total_Price") %>' runat="server"></asp:Label>
                </ItemTemplate>
                <FooterTemplate>
                    <asp:Label ID="lblTotalPrice" runat="server" Text='<%# Eval("Total_Price") == null ? "0" : Eval("Total_Price") %>'></asp:Label>
                </FooterTemplate>
            </asp:TemplateField>
            <asp:TemplateField>
                <FooterTemplate>
                    <asp:LinkButton ID="itemAdd" ClientIDMode="AutoID" CommandName="Add" runat="server" TabIndex="9">Add</asp:LinkButton>
                </FooterTemplate>
            </asp:TemplateField>
        </Columns>
    </asp:GridView>
</ContentTemplate>

Aspx.cs 代码：

protected void gvItemDetail_RowCommand(object sender, GridViewCommandEventArgs e)
{
    if (e.CommandName.Equals("Add"))
    {
        HiddenField itemID = (HiddenField)gvItemDetail.FooterRow.FindControl("hdnItemID");
        HiddenField itemPurchasePrice = (HiddenField)gvItemDetail.FooterRow.FindControl("hdnPurchase_Price");
        TextBox itemName = (TextBox)gvItemDetail.FooterRow.FindControl("txtItemName");
        TextBox itemSalesPrice = (TextBox)gvItemDetail.FooterRow.FindControl("txtSalesPrice");
        TextBox itemQTY = (TextBox)gvItemDetail.FooterRow.FindControl("txtItemQuantity");
        DropDownList itemUOM = (DropDownList)gvItemDetail.FooterRow.FindControl("ddlUOM");
        Label itemTotalPrice = (Label)gvItemDetail.FooterRow.FindControl("lblTotalPrice");

        Decimal dcmTotalPrice = (Convert.ToDecimal(itemSalesPrice.Text.Trim()) * Convert.ToDecimal(itemQTY.Text.Trim()));
        Decimal dcmPurchasePrice = (Convert.ToDecimal(itemPurchasePrice.Value.Trim()) * Convert.ToDecimal(itemQTY.Text.Trim()));

        DataTable dt = (DataTable)HttpContext.Current.Session["dtInvoiceItemDetail"];
        //dt.Rows[0].Delete();
        dt.Rows.Add(itemID.Value.Trim(),
                itemName.Text.Trim(),
                itemSalesPrice.Text.Trim(),
                itemQTY.Text.Trim(),
                itemUOM.SelectedValue.ToString().Trim(),
                dcmTotalPrice,
                dcmPurchasePrice
                );
        dt.AcceptChanges();
        gvItemDetail.DataSource = dt;
        gvItemDetail.DataBind();
        gvItemDetail.Rows[0].Visible = false;
        HttpContext.Current.Session["dtInvoiceItemDetail"] = dt;
        lblCalculateTotal.Text = (Convert.ToDecimal(dt.AsEnumerable()
        .Sum(x => Convert.ToDecimal(x["Total_Price"])))).ToString();

        commission = ((Convert.ToDecimal(lblCalculateTotal.Text.Trim()) - Convert.ToDecimal(dt.AsEnumerable()
        .Sum(x => Convert.ToDecimal(x["Purchase_Price"])))) * 10) / 100;
    }
    gvItemDetail.FooterRow.Focus();
}

我的尝试：

Maintain Panel Scroll Position On Partial Postback ASP.NET

Re: Update Panel Scrolling Issue

Maintain Panel Scroll Position On Postback in ASP.NET

page jumps to top

how to retain browser scroll position for Dynamic Control Events

【问题讨论】：

stackoverflow.com/questions/56797625/…请回答这个问题？ @Ahmer Ali Ahsan

标签： c# asp.net

【解决方案1】：

我以前遇到过这个问题。我的解决方案是在web.config 文件中添加maintainScrollPositionOnPostBack="true"

<system.web>
    <compilation debug="true" targetFramework="4.5.2"/>
    <httpRuntime targetFramework="4.5.2"/>

    <pages maintainScrollPositionOnPostBack="true" /> //this will keep current position after postback

  </system.web>

【讨论】：

我也尝试了您的答案，但没有找到任何解决方案。请检查我上面更新的参考资料。
用GridView 替换UpdatePanel 有AutoPostBack="true" 怎么样？然后您可以按照 Karthikeyan 的建议创建事件处理程序 onpageindexchanging="Gridview1_PageIndexChanging"。

【解决方案2】：

我找到了我的解决方案，当我删除 gvItemDetail.FooterRow.Focus(); 代码时，我的页面保持其滚动位置。感谢您的所有 cmets。

【讨论】：