如何在ASP.NET GridView中滚动到最后选中的行

问题分析 #

使用HyperLinkField的GridView在编辑回发后，页面/网格会滚动到顶部，MaintainScrollPositionOnPostback="true"无法解决此问题。可以通过保存目标ProductID，数据绑定后定位到对应行的方式实现需求。

实现步骤 #

1. 保存目标ProductID

需要在回发过程中记录要定位的ProductID，有两种方式：

方式一：改用TemplateField（推荐，支持服务器端事件）

将原HyperLinkField替换为TemplateField，使用LinkButton触发回发并传递ProductID：

<asp:GridView ID="GridView1" runat="server" DataKeyNames="ProductID" 
    OnRowCommand="GridView1_RowCommand" OnDataBound="GridView1_DataBound">
    <Columns>
        <asp:TemplateField HeaderText="Edit">
            <ItemTemplate>
                <asp:LinkButton ID="lnkEdit" runat="server" Text="Edit" 
                    CommandName="Edit" CommandArgument='<%# Eval("ProductID") %>'/>
            </ItemTemplate>
        </asp:TemplateField>
        <!-- 其他列 -->
    </Columns>
</asp:GridView>

在RowCommand事件中保存ProductID到ViewState：

protected void GridView1_RowCommand(object sender, GridViewCommandEventArgs e)
{
    if (e.CommandName == "Edit")
    {
        int targetProductID = Convert.ToInt32(e.CommandArgument);
        ViewState["TargetProductID"] = targetProductID;
        // 这里添加打开编辑div的逻辑
    }
}

方式二：保留HyperLinkField，从QueryString获取

如果坚持使用原HyperLinkField，在页面加载时从URL参数中提取ProductID并保存：

protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack && Request.QueryString["ProductID"] != null)
    {
        int targetProductID = Convert.ToInt32(Request.QueryString["ProductID"]);
        ViewState["TargetProductID"] = targetProductID;
    }
}

2. 数据绑定后定位到目标行

在GridView的DataBound事件中，遍历行找到对应ProductID的记录，注册JavaScript脚本实现滚动：

protected void GridView1_DataBound(object sender, EventArgs e)
{
    if (ViewState["TargetProductID"] == null) return;

    int targetID = Convert.ToInt32(ViewState["TargetProductID"]);
    foreach (GridViewRow row in GridView1.Rows)
    {
        // 通过DataKeys获取当前行的ProductID（需确保GridView设置了DataKeyNames="ProductID"）
        int currentID = Convert.ToInt32(GridView1.DataKeys[row.RowIndex].Value);
        if (currentID == targetID)
        {
            // 注册滚动脚本，平滑滚动到目标行并居中显示
            string scrollScript = $"document.getElementById('{row.ClientID}').scrollIntoView({{ behavior: 'smooth', block: 'center' }});";
            ClientScript.RegisterStartupScript(this.GetType(), "ScrollToTargetRow", scrollScript, true);
            break;
        }
    }
}

3. 网格在滚动容器内的特殊处理

如果GridView嵌套在带滚动条的容器（如<div id="gridContainer" style="overflow:auto; height:500px;">）中，需调整脚本滚动容器而非整个页面：

string scrollScript = $@"
var container = document.getElementById('gridContainer');
var targetRow = document.getElementById('{row.ClientID}');
container.scrollTop = targetRow.offsetTop - container.offsetTop;
";
ClientScript.RegisterStartupScript(this.GetType(), "ScrollToTargetRow", scrollScript, true);

关键说明 #

• MaintainScrollPositionOnPostback仅保存整个页面的滚动位置，若GridView在独立滚动容器内或回发后页面布局变化，会导致定位失效；通过ProductID直接定位行的方式更可靠。
• 必须确保GridView设置DataKeyNames="ProductID"，才能通过DataKeys安全获取行的ProductID。

内容的提问来源于stack exchange，提问作者user1663661