"stateful" 可以滚动面板

分享于 

4分钟阅读

Web开发

  繁體

After postback before restoring scroll position

Scroll position restored

介绍

通常,用样式设置一个面板,并期望用户滚动并选择一个 GridView 项来处理一个。 问题是,只要页面回发,所选项就不可见,因为面板的滚动位置已经被重置。

在我们最新的项目中,我们需要这样的功能,但找不到任何类似的功能,因这里我们。 结果是" StatefulScrollPanel",它是一个自定义控件,它在回发中保留它的滚动位置。

背景

基本上,我们需要的是一些基本的JavaScript知识和两个 asp:Panel 方法的基本重写。 我们从控件的两个隐藏字段开始,它的目的是跟踪面板的scrollTopscrollLeft 属性( div ) 以及跟踪控制位置滚动的方法,在控件之前呈现,所以重写 Render ( HtmlTextWriter ) 方法。 因为我们希望控件在设计时没有任何麻烦,只是在设计模式下委托父级:

protectedoverridevoid Render(HtmlTextWriter writer)
{ 
 if (DesignMode)
 {
 base.Render(writer);
 return;
 }
 /* * Hidden inputs to persist scroll position(s)
 */ writer.Write("<input type='hidden' name='" + 
 ScrollXInputId + "' id='" +
 ScrollXInputId + "' value='" + 
 ScrollXInputValue + "'/>");
 writer.Write("<input type='hidden' name='" + 
 ScrollYInputId + "' id='" + 
 ScrollYInputId + "' value='" + 
 ScrollYInputValue + "'/>");
 //Trace method that populates the hidden inputs writer.Write("<script language="'Javascript'">function" + 
 TraceMethod + "{" + GetElementAccessor(ScrollXInputId) + 
 ".value =" + GetElementAccessor(ClientID) + 
 ".scrollLeft;" + GetElementAccessor(ScrollYInputId) + 
 ".value =" + GetElementAccessor(ClientID) + 
 ".scrollTop;}" + "</script>");
 //Delegate core rendering to mommabase.Render(writer); 
}

GetElementAccessor(String) 方法和 Scroll[X|Y]InputIdScroll[X|Y]InputValueTraceMethod 属性是用来减少我们必须编写的代码的助手。 查看控制代码以查看它的定义。

在事件和,我们现在要做的就是用我们的控件来控制trace方法,然后设置滚动位置:

protectedoverridevoid OnLoad(EventArgs e)
{
 //To enable scrolling in the first placebase.Style.Add(HtmlTextWriterStyle.Overflow, "scroll");
 //Register our trace methodbase.Attributes.Add("onScroll", TraceMethod); 
 //On start up set scroll position(s) to the existing one Page.ClientScript.RegisterStartupScript(GetType(), AdjustScriptKey, 
 GetElementAccessor (ClientID) + ".scrollLeft =" + 
 ScrollXInputValue + ";" + 
 GetElementAccessor(ClientID) + ".scrollTop =" + 
 ScrollYInputValue + ";", 
 true);
 base.OnLoad(e);
}

就是这样!

使用代码

使用该控件就像使用 asp:Panel 控件本身一样简单。 在aspx页中删除它,并设置它的WidthHeight 属性:

<cc1:StatefullScrollPanelID="StatefullScrollPanel1"runat="server"Width="250px"height="105px">Panel elements go here </cc1:StatefullScrollPanel>

注意,我们不必显式设置 overflow 样式,因为控件负责。 还要注意,我们可以在同一页上使用同样多的控件,因为生成的代码对于每个控件实例是。 我们已经用 Firefox 2.0和 IE 6.0测试了代码,而且似乎工作良好。


滚动  PAN  PANE  面板  Scrollable