在 UpdatePanel 中保持 GridView 滚动位置和标题

• 下载演示 - 4.37 KB
• 下载数据库备份 - 147 KB

引言

对于大多数类型的 Web 开发，我们通常需要在 GridView 中显示数据。 假设我们需要在 GridView 中显示 500 条记录，并且当用户选择一条记录时，详细信息将显示在页面底部或其他任何位置。 现在，为了防止此类操作的回发，通常我们使用 AJAX UpdatePanel 并将 GridView 放在 UpdatePanel 中。 这将解决回发问题，但接下来会发生什么？ 当您想查看第 100 条记录时，只需向下滚动记录并选择记录以查看详细信息，现在您可以在详细信息区域中获取记录，但请查看 GridView 滚动位置。 哦哦...不，不应该发生这种情况：它回到了记录的顶部。 我们现在必须在页面部分回发时解决这个问题。

问题陈述

在这里，我将详细描述实际问题

问题状态	描述
	我有一个带有滚动条的 GridView，其中有 8 条记录。 我一次可以看到 5 条记录。 为了获取其他记录，我必须向下滚动。 我只需选择第一条记录并在详细信息区域中获取详细信息。
	现在我想查看其他一些记录。 比如第 8条记录。 我只需向下滚动滚动条，但我不选择任何记录。 现在检查滚动条位置和学生详细信息。
	现在我选择第 8 条记录。 您将在详细信息部分看到该记录的详细信息正在显示，但检查滚动条位置。

对于用户来说，这是一个非常令人沮丧的场景。 通过处理页面的部分回发，我们有一个很好的解决方案。

解决方案

当我们使用 UpdatePanel 时，我们需要对 UpdatePanel 进行更多控制才能解决此问题。 为此，我们需要使用 Sys.WebForms.PageRequestManager 类。 它用于使用客户端脚本管理部分页面更新。 我们不需要直接创建 PageRequestManager 类的对象。 对于此解决方案，我使用了两个事件。 beginRequest 在异步回发开始处理之前引发。 在这里，我只是检索了滚动条的 Div 位置并将其存储在一个变量中。 endRequest 在异步回发完成后引发，并且控制权已返回给浏览器。 在这里，我只是将检索到的滚动位置再次分配给 div。 有关更多信息，请点击此处。

Using the Code

我编写了以下 JavaScript 代码来处理部分回发，该代码处理 UpdatePanel 中 GridView 回发期间的 Div 滚动位置

<script language="javascript" type="text/javascript">
// This Script is used to maintain Grid Scroll on Partial Postback
var scrollTop;
//Register Begin Request and End Request 
Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(BeginRequestHandler);
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler);
//Get The Div Scroll Position
Function BeginRequestHandler(sender, args) 
{
var m = document.getElementById('divGrid');
scrollTop=m.scrollTop;
}
//Set The Div Scroll Position
function EndRequestHandler(sender, args)
{
var m = document.getElementById('divGrid');
m.scrollTop = scrollTop;
} 
</script>

以下是 GridView 的代码。 Gridview 应放置在 UpdatePanel 和 Div 控件内。 Div 允许我们滚动 GridView。

<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<div id="divGrid" style="overflow: auto; height: 130px"> 
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" CellPadding="4"
DataSourceID="SqlDataSource1" ForeColor="#333333" GridLines="None" Width="235px"
OnSelectedIndexChanged="GridView1_SelectedIndexChanged">
<FooterStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" />
<RowStyle BackColor="#F7F6F3" ForeColor="#333333" />
<HeaderStyle CssClass="HeaderFreez" />
<Columns>
<asp:BoundField DataField="Roll" HeaderText="Roll" SortExpression="Roll" />
<asp:BoundField DataField="Name" HeaderText="Name" SortExpression="Name" />
<asp:BoundField DataField="Langauge" HeaderText="Language" SortExpression="Langauge" />
<asp:CommandField ShowSelectButton="True" />
</Columns>
<PagerStyle BackColor="#284775" ForeColor="White" HorizontalAlign="Center" />
<SelectedRowStyle BackColor="#E2DED6" Font-Bold="True" ForeColor="#333333" />
<HeaderStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" />
<EditRowStyle BackColor="#999999" />
<AlternatingRowStyle BackColor="White" ForeColor="#284775" />
</asp:GridView>
</div>
<asp:SqlDataSource ID="SqlDataSource1" runat="server" 
ConnectionString="<%$ ConnectionStrings:DotNetRnDDBConnectionString %>"
SelectCommand="SELECT * FROM [StudDetails]"></asp:SqlDataSource>
</ContentTemplate>
</asp:UpdatePanel>

这是用于冻结 GridView Header 的 CSS 代码。 只需将此类添加为 Gridview 的 HeaderStyle 类即可。 这将冻结网格的标题。 我们可以在需要冻结标题的其他情况下使用它。

.HeaderFreez
{
   position:relative ;
   top:expression(this.offsetParent.scrollTop);
   z-index: 10;
}

参考

• MSDN 帮助

历史

• 编写于 2008 年 10 月 17 日。