asp:Panel中vertical ScrollBars保持位置的一个解决办法

最新推荐文章于 2025-10-25 15:54:24 发布

原创最新推荐文章于 2025-10-25 15:54:24 发布 · 3.1k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#asp #server #function #object #服务器 #ui

.NET 专栏收录该内容

20 篇文章

订阅专栏

本文介绍了一种解决ASP.NET中Panel控件滚动条位置在操作后复位的问题的方法。通过使用JavaScript记录并恢复滚动条位置，使得用户在进行多次操作时无需反复调整滚动条。

asp:Panel可以在网页中画一块来显示数据,若显示全部数据所需要的面积比asp:Panel所分配的面积要大的话,就会出现滚动条(前提是asp:Panel的属性ScrollBars被赋值成vertical或horizontal,或者两者),此时,新的问题又出现了,就是在asp:Panel的内部的操作(比如单击某个控件)进行后,滚动条(若有的话)就会回到初始状态(水平滚动条回到最左边,垂直滚动条会回到最上端),若所需单击的控件在asp:Panel的最下端的话,则在每次单击之前,就需要先滚动滚动条,找到控件,然后再单击,这样UI,很明显不是一个友好的UI,对于这个问题,当然有解决办法,其中之一,就是记录在单击时滚动条的位置,并且在单击那个控件之后,再用之前保存的位置去设置滚动条,这样,给我们的感觉就是滚动条的位置没有变动了.

实现代码如下:

页面代码:

<asp:Content ID="mainContent" ContentPlaceHolderID="SampleContent" runat="Server"> <mce:script type="text/javascript"></mce:script> <asp:UpdatePanel ID="upPanel_emp" runat="server"> <asp:Panel ID="panel_emp" runat="server" Height="200px" Width="500px" ScrollBars="vertical" BackColor="white" > <asp:GridView ID="grd_emp" runat="server" ShowHeader="False" AutoGenerateColumns="False" SkinID="GridView1" > <Columns> <%--other columns --%> <asp:TemplateField HeaderText="change state"> <ItemTemplate> <asp:CheckBox ID="ckb_chgState" runat="server" OnCheckedChanged="ckb_chgState_CheckedChanged" AutoPostBack="True" Enabled="true" /> </ItemTemplate> <ItemStyle Width="59px" HorizontalAlign="Center" /> </asp:TemplateField> </Columns> </asp:GridView> <asp:HiddenField ID="HiddenField_position" runat="server" /> </asp:Panel> </asp:UpdatePanel> </asp:Content>

服务器端代码:

protected void Page_Load(object sender, EventArgs e) { //记录点击ckeckBox时滚动条形的位置 ScriptManager.RegisterOnSubmitStatement(upPanel_emp, upPanel_emp.GetType(), "SavePanelScroll", "SavePanelScroll('" + panel_emp.ClientID + "','" + HiddenField_position.ClientID + "');"); //************************************* // OTHER　CODE //************************************* //重新设置滚动条形的位置 if (HiddenField_position.Value != null) { ScriptManager.RegisterStartupScript(upPanel_emp, upPanel_emp.GetType(), "SetPanelScroll", "SetPanelScroll('" + panel_emp.ClientID + "','" + HiddenField_position.ClientID + "');", true); } } protected void ckb_chgState_CheckedChanged(object sender, EventArgs e) { //add your code here }

在服务器端的代码中,先注册Script,然后再利用这个Script来记录和设置滚动条的位置.这样,在单击页面上的CheckBox之后,滚动条的位置还会保持在单击CheckBox之前的位置,方面我们进行下一步的操作(如比说单击GridView中下一行的CheckBox).