科技行者

行者学院 转型私董会 科技行者专题报道 网红大战科技行者

知识库

知识库 安全导航

至顶网软件频道基础软件数据回发时,维护ASP.NET Tree控件位置

数据回发时,维护ASP.NET Tree控件位置

  • 扫一扫
    分享文章到微信

  • 扫一扫
    关注官方公众号
    至顶头条

ASP.NET2.0提供了一个功能强大的TreeView控件,但是它看起来有一个缺陷:它好像不能够跟踪用户最后选择的一个节点。

作者:李万宝 来源:天极开发 2007年11月6日

关键字: ASP.NET Tree 控件 Windows

  • 评论
  • 分享微博
  • 分享邮件
ASP.NET2.0提供了一个功能强大的TreeView控件,但是它看起来有一个缺陷:它好像不能够跟踪用户最后选择的一个节点。如果你滚动到第50个节点然后展开该节点,那么当单击链接页面进行回发后,你必须重新利用滚动条下拉到你想要的节点位置。

  在.NET较早的版本里,您可能考虑使用SmartNavigation这个特性.SmartNavigation是Web页面指令的一个属性,它的取值为布尔值,一个设置为true的页面指令看起来类似如下:

<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="_Default" SmartNavigation="true" %>

  不过,正如好多人已经注意到的,SmartNavigation本身就有洗衣阿问题,事实上微软也被这个问题所困扰以至于在ASP.NET2.0里添加了MaintainScrollbackPositionOnPostback属性而取代SmartNavigation 。遗憾的是,我在使用它们时,感觉它们都有一些问题,我稍后将进行解释。

  本文我将介绍SmartNavigation和MaintainScrollbackPositionOnPostback 在维护页面回发位置方面的缺点,并提供如何利用Javascript来解决这个问题,这个小技巧即使对复杂的Web页面也同样有效.

  再见了SmartNavigationeb,欢迎MaintainScrollbackPositionOnPostback

  SmartNavigation主要作用是减少页面导航时的闪动,它主要利用适当的IFrames来进行这个工作并仅仅显示改变的部分。SmartNavigation 同样被设计为能够维护页面位置,元素焦点,回发浏览器访问历史记录的作用。遗憾的是,即使微软知道SmartNavigation已经去掉,但是检查MSDN文档,您仍然能够看到SmartNavigation其实仅仅被定义为"过时"的 。利用GOOGLE的搜索您可以搜到大家对SmartNavigation的讨论.

  下一步

  ASP.NET2.0引进了MaintainScrollbackPositionOnPostback,和SmartNavigation类似,您可以在Page属性里设置它的值为true或者为false。

<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="_Default" MaintainScrollPositionOnPostback="true" %>

  非常简明,这个属性/属性值对是用来维护页面位置的。遗憾的是,它只是维护页面的位置,因为如果你在用户控件里使用了TreeView控件,然后在页面里使用该用户控件,那么页面在在回发后您将返回到用户控件的位置而不是TreeView节点位置。

  简单的说,MaintainScrollbackPositionOnPostback只是用来维护页面的回发位置。如果你的页面固定--也就是一个应用程序那样不需要进行利用滚动条进行上下滚动,那么这个属性对你可能无用。如果你的页面很常需要滚动,那么你就需要利用该属性.

  在TreeView里维护控件的位置

  最近,我在开发一个Web应用程序Windowsy,也就是每一个页面都会全屏显示而不是滚动。页面里使用类TreeView来进行导航想列表一样进行显示,但是页面本身不需要上下滚动。但是问题是这里的数据列可能需要扩展使得页面出现滚动.我准备使用如下的方式解决这个问题.
首先,利用TreeView控件的SelectedNode属性,可以知道哪个节点被选取,这个被选取的节点需要保存起来,它最终会程序为HTML元素。如果我知道了被选择HTML控件的ID,那么我就可以滚动到该控件并设置该控件为当前焦点。确实,如果您看以下使用TreeView控件的页面HTML代码,你将发现生成的一个隐藏<input>元素,以及为textbox类型,它的ID可能类似TreeViewx_SelectedNode

<input type="hidden" name="TreeView1_SelectedNode" id="TreeView1_SelectedNode" value="TreeView1t54" />

  有了这些知识,你就知道该怎么做了,基本方法是隐藏的Input是一个textbox,我们要做的就是知道将来呈献的内容。一个TreeView最终呈现为HTML表格,节点的值被用来作为单元格的值,<TD>元素呈现节点名称,所以通过查找单元格ID并滚动到那里.

  为了具体说明做法,我使用TreeView编写了一些代码,在Page_Load时间里加载一段脚本来找到需要的单元格(参考下表),在<body>的onload时间里调用该函数.

Imports System.Collections.Generic

Partial Class _Default
Inherits System.Web.UI.Page

Protected Sub Page_Load(ByVal sender As Object, _
ByVal e As System.EventArgs) Handles Me.Load

InjectLoadEvent()

If (IsPostBack) Then Return

TreeView1.Nodes.Clear()

Dim chicken As New TreeNode("Chicken")
 TreeView1.Nodes.Add(chicken)
 Dim beef As New TreeNode("Beef")
 TreeView1.Nodes.Add(beef)
 Dim pork As New TreeNode("Pork")
 TreeView1.Nodes.Add(pork)
 Dim fish As New TreeNode("Fish")
 TreeView1.Nodes.Add(fish)

 chicken.ChildNodes.Add(New TreeNode("Crepes Florentine with Buffalo Chicken"))
 fish.ChildNodes.Add(New TreeNode("Linguine with White Clam Sauce"))
 pork.ChildNodes.Add(New TreeNode("Pork Loin with Peanut and Madarin Orange Sauce"))
 beef.ChildNodes.Add(New TreeNode("Standing Rib Roast with Fennel and Blue Cheese Potatoes"))


 ' We need a bunch of stuff here so we will add some stubs
 Dim I As Integer
 For I = 1 To 50
  chicken.ChildNodes.Add(New TreeNode("Placeholder " + I.ToString()))
  fish.ChildNodes.Add(New TreeNode("Placeholder " + I.ToString()))
  pork.ChildNodes.Add(New TreeNode("Placeholder " + I.ToString()))
  beef.ChildNodes.Add(New TreeNode("Placeholder " + I.ToString()))
 Next

 TreeView1.CollapseAll()
End Sub

Public Sub InjectLoadEvent()
 Dim script As String = _
   "function LoadEvent()" + _
   "{{" + _
   " try" + _
   " {{" + _
   " var elem = document.getElementById('{0}_SelectedNode');" + _
   " if(elem != null )" + _
   " {{" + _
   " var node = document.getElementById(elem.value);" + _
   " if(node != null)" + _
   " {{" + _
   " node.scrollIntoView(true);" + _
   " {1}.scrollLeft = 0;" + _
   " }}" + _
  " }}" + _
 " }}" + _
 " catch(oException)" + _
 " {{}}" + _
 "}}"

Page.ClientScript.RegisterClientScriptBlock(Me.GetType(), "LoadEvent", _
String.Format(script, TreeView1.ClientID, Panel1.ClientID), True)
 End Sub
End Class


  下面的代码显示了页面的布局:

<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
 <title>Focus Tree Node on Postback</title>
</head>
<body onload="LoadEvent()">
 <form id="form1" runat="server">
  <div>
   <asp:Panel ID="Panel1" runat="server" Height="200px" Width="200px" ScrollBars="Both">
    <asp:TreeView ID="TreeView1" runat="server">
     <SelectedNodeStyle BackColor="#8080FF" />
    </asp:TreeView>
   </asp:Panel>
  </div>
 </form>
</body>
</html>

  下图显示了本例子运行的结果


  最后,下面的代码显示了javascript的注入方式:

<script>
function LoadEvent()
{
 try
 {
  var elem = document.getElementById('TreeView1_SelectedNode');
  if(elem != null )
  {
   var node = document.getElementById(elem.value);
   if(node != null)
   {
    node.scrollIntoView(true);
    Panel1.scrollLeft = 0;
   }
  }
 }
 catch(oException)
 {}
}// -->
</script>

  用Javascript定义的LoadEvent函数将查找隐藏字段,我们利用TreeView控件的ClientID 查找所有元素,不过,在嵌套多个TreeView控件后,名称将变得非常长.找到单元格的值后,我使用scrollIntoView方法.scrollLeft属性将让滚动条滚动当前位置.

查看本文来源

    • 评论
    • 分享微博
    • 分享邮件
    闂傚倸鍊搁崐鎼佸磹妞嬪孩顐介柨鐔哄Т閻骞栧ǎ顒€濡肩紒鎰殜閺岋繝宕堕埡浣锋睏闂佸搫顑呴柊锝夊蓟閺囷紕鐤€閻庯綆浜炴禒鐐節濞堝灝鐏犻柕鍫熸倐瀵寮撮敍鍕澑闁诲函缍嗘禍鏍磻閹捐鍐€妞ゆ挶鍔庣粙蹇涙⒑鐠恒劌娅愰柟鍑ゆ嫹

    婵犵數濮烽弫鍛婃叏閻戝鈧倹绂掔€n亞鍔﹀銈嗗坊閸嬫捇鏌涢悢閿嬪仴闁糕斁鍋撳銈嗗坊閸嬫挾绱撳鍜冭含妤犵偛鍟灒閻犲洩灏欑粣鐐烘⒑瑜版帒浜伴柛鎾寸洴閹儳煤椤忓應鎷洪梻鍌氱墛閸楁洟宕奸妷銉ф煣濠电姴锕ょ€氼參宕h箛鏃傜瘈濠电姴鍊绘晶娑㈡煕鐎c劌濡介柕鍥у瀵粙濡歌閳ь剚甯¢弻鐔兼寠婢跺﹥娈婚梺鍝勭灱閸犳牠骞冨⿰鍫濈厸闁稿本绋撹ぐ瀣煟鎼淬値娼愭繛鍙壝悾婵堢矙鐠恒劍娈鹃梺鍓插亝濞叉牠鎮″☉銏$厱閻忕偛澧介惌瀣箾閸喐鍊愭慨濠勭帛閹峰懐绮电€n亝鐣伴梻浣规偠閸斿宕¢崘鑼殾闁靛繈鍊曢崘鈧銈嗗姂閸庡崬鐨梻鍌欑劍鐎笛呯矙閹寸姭鍋撳鐓庡籍鐎规洑鍗冲畷鍗炍熼梹鎰泿闂備線娼ч悧鍡涘箠鎼淬垺鍙忔い鎺嗗亾闁宠鍨块崺銉╁幢濡炲墽鍑规繝鐢靛О閸ㄦ椽鏁嬮柧鑽ゅ仦娣囧﹪濡堕崨顔兼闂佺ǹ顑呴崐鍦崲濞戙垹骞㈡俊顖濐嚙绾板秹鏌f惔銏e妞わ妇鏁诲璇差吋閸偅顎囬梻浣告啞閹搁箖宕版惔顭戞晪闁挎繂顦介弫鍡椼€掑顒婂姛闁活厽顨嗙换娑㈠箻閺夋垹鍔伴梺绋款儐閹瑰洭寮婚敐鍛婵炲棙鍔曠壕鎶芥⒑閸濆嫭婀扮紒瀣灴閸╃偤骞嬮敃鈧婵囥亜閺囩偞鍣洪柍璇诧功缁辨捇宕掑▎鎴濆濡炪們鍔岄幊姗€骞嗗畝鍕<闁绘劙娼х粊锕傛煙閸忚偐鏆橀柛鏂跨焸閹偤宕归鐘辩盎闂佸湱鍎ら崹鐢割敂閳哄懏鍊垫慨姗嗗墻濡插綊鏌曢崶褍顏€殿喕绮欐俊姝岊槼闁革絻鍎崇槐鎾存媴缁涘娈┑鈽嗗亝缁诲牆顕f繝姘亜缁炬媽椴搁弲锝夋偡濠婂啰效闁诡喗锕㈤幊鐘活敆閸屾粣绱查梺鍝勵槸閻楀嫰宕濇惔锝囦笉闁绘劗鍎ら悡娑㈡倶閻愯泛袚闁哥姵锕㈤弻鈩冩媴閻熸澘顫掗悗瑙勬礈閸犳牠銆佸鈧幃鈺呮惞椤愩倝鎷婚梻鍌氬€峰ù鍥х暦閸偅鍙忛柟鎯板Г閳锋梻鈧箍鍎遍ˇ顖炲垂閸岀偞鐓㈡俊顖滃皑缁辨岸鏌ㄥ┑鍡╂Ц缂佲偓鐎n偁浜滈柡宥冨妿閳藉绻涢崼鐔虹煉婵﹨娅e☉鐢稿川椤斾勘鈧劕顪冮妶搴′簼婵炶尙鍠栧畷娲焵椤掍降浜滈柟鍝勬娴滈箖姊洪幐搴㈢┛濠碘€虫搐鍗遍柟鐗堟緲缁秹鏌涢锝囩畼妞ゆ挻妞藉铏圭磼濡搫顫岄悗娈垮櫘閸撴瑨鐏冮梺鍛婁緱閸犳岸宕㈤幖浣光拺闁告挻褰冩禍浠嬫煕鐎n亜顏柟顔斤耿閺佸啴宕掑☉姘箞闂佽鍑界紞鍡涘磻閸℃ɑ娅犳い鎺戝€荤壕濂告煕鐏炲墽鈽夌紒妞﹀洦鐓欓柣鐔告緲椤忣參鏌熼悡搴㈣础闁瑰弶鎸冲畷鐔兼濞戞瑦鐝¢梻鍌氬€搁崐椋庣矆娓氣偓楠炴牠顢曢妶鍌氫壕婵ê宕崢瀵糕偓瑙勬礀缂嶅﹪寮婚崱妤婂悑闁告侗鍨界槐閬嶆煟鎼达紕鐣柛搴ㄤ憾钘濆ù鍏兼綑绾捐法鈧箍鍎遍ˇ浼存偂閺囥垺鐓涢柛銉e劚婵$厧顭胯閸ㄤ即婀侀梺缁樓圭粔顕€顢旈崼鐔虹暢闂傚倷鐒︾€笛呮崲閸屾娑樜旈崨顓犲幒闂佸搫娲㈤崹娲偂閸愵亝鍠愭繝濠傜墕缁€鍫熸叏濡寧纭鹃柦鍐枛閺屾洘绻涜鐎氱兘宕戦妸鈺傗拺缂備焦锚婵洦銇勯弴銊ュ籍闁糕斂鍨藉鎾閳ユ枼鍋撻悽鍛婄叆婵犻潧妫楅埀顒傛嚀閳诲秹宕堕妸锝勭盎闂婎偄娲︾粙鎰板箟妤e啯鐓涢悘鐐靛亾缁€瀣偓瑙勬礋娴滃爼銆佸鈧幃銏$附婢跺澶�

    重磅专题
    往期文章
    最新文章