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

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"><!-- //保存滚动条的位置 function SavePanelScroll(PanelID,HiddenFieldID) { window.document.getElementById(HiddenFieldID).value=window.document.getElementById(PanelID).scrollTop; } //设置滚动条的位置 function SetPanelScroll(PanelID,HiddenFieldID) { window.document.getElementById(PanelID).scrollTop=window.document.getElementById(HiddenFieldID).value; } // --></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).