數據回發時，維護ASP.NET Tree控件位置

ASPNET提供了一個功能強大的TreeView控件但是它看起來有一個缺陷它好像不能夠跟蹤用戶最後選擇的一個節點如果你滾動到第個節點然後展開該節點那麼當單擊鏈接頁面進行回發後你必須重新利用滾動條下拉到你想要的節點位置

　　在NET較早的版本裡您可能考慮使用SmartNavigation這個特性SmartNavigation是Web頁面指令的一個屬性它的取值為布爾值一個設置為true的頁面指令看起來類似如下

＜%@ Page Language=VB AutoEventWireup=false CodeFile=Defaultaspxvb Inherits=_Default SmartNavigation=true %＞
　　不過正如好多人已經注意到的SmartNavigation本身就有洗衣阿問題事實上微軟也被這個問題所困擾以至於在ASPNET裡添加了MaintainScrollbackPositionOnPostback屬性而取代SmartNavigation 遺憾的是我在使用它們時感覺它們都有一些問題我稍後將進行解釋

　　本文我將介紹SmartNavigation和MaintainScrollbackPositionOnPostback 在維護頁面回發位置方面的缺點並提供如何利用Javascript來解決這個問題這個小技巧即使對復雜的Web頁面也同樣有效

　　再見了SmartNavigationeb歡迎MaintainScrollbackPositionOnPostback

　　SmartNavigation主要作用是減少頁面導航時的閃動它主要利用適當的IFrames來進行這個工作並僅僅顯示改變的部分SmartNavigation 同樣被設計為能夠維護頁面位置元素焦點回發浏覽器訪問歷史記錄的作用遺憾的是即使微軟知道SmartNavigation已經去掉但是檢查MSDN文檔您仍然能夠看到SmartNavigation其實僅僅被定義為過時的 利用GOOGLE的搜索您可以搜到大家對SmartNavigation的討論

　　下一步

　　ASPNET引進了MaintainScrollbackPositionOnPostback和SmartNavigation類似您可以在Page屬性裡設置它的值為true或者為false

＜%@ Page Language=VB AutoEventWireup=false CodeFile=Defaultaspxvb 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=TreeView_SelectedNode id=TreeView_SelectedNode value=TreeViewt /＞

　　有了這些知識你就知道該怎麼做了基本方法是隱藏的Input是一個textbox我們要做的就是知道將來呈獻的內容一個TreeView最終呈現為HTML表格節點的值被用來作為單元格的值＜TD＞元素呈現節點名稱所以通過查找單元格ID並滾動到那裡

　　為了具體說明做法我使用TreeView編寫了一些代碼在Page_Load時間裡加載一段腳本來找到需要的單元格（參考下表）在＜body＞的onload時間裡調用該函數

Imports SystemCollectionsGeneric

Partial Class _Default
Inherits SystemWebUIPage

Protected Sub Page_Load(ByVal sender As Object _
ByVal e As SystemEventArgs) Handles MeLoad

InjectLoadEvent()

If (IsPostBack) Then Return

TreeViewNodesClear()

Dim chicken As New TreeNode(Chicken)
　TreeViewNodesAdd(chicken)
　Dim beef As New TreeNode(Beef)
　TreeViewNodesAdd(beef)
　Dim pork As New TreeNode(Pork)
　TreeViewNodesAdd(pork)
　Dim fish As New TreeNode(Fish)
　TreeViewNodesAdd(fish)

　chickenChildNodesAdd(New TreeNode(Crepes Florentine with Buffalo Chicken))
　fishChildNodesAdd(New TreeNode(Linguine with White Clam Sauce))
　porkChildNodesAdd(New TreeNode(Pork Loin with Peanut and Madarin Orange Sauce))
　beefChildNodesAdd(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 = To
　　chickenChildNodesAdd(New TreeNode(Placeholder + IToString()))
　　fishChildNodesAdd(New TreeNode(Placeholder + IToString()))
　　porkChildNodesAdd(New TreeNode(Placeholder + IToString()))
　　beefChildNodesAdd(New TreeNode(Placeholder + IToString()))
　Next

　TreeViewCollapseAll()
End Sub

Public Sub InjectLoadEvent()
　Dim script As String = _
　　　function LoadEvent() + _
　　　{{ + _
　　　 try + _
　　　 {{ + _
　　　 var elem = documentgetElementById({}_SelectedNode); + _
　　　 if(elem != null ) + _
　　　 {{ + _
　　　 var node = documentgetElementById(elemvalue); + _
　　　 if(node != null) + _
　　　 {{ + _
　　　 nodescrollIntoView(true); + _
　　　 {}scrollLeft = ; + _
　　　 }} + _
　　 }} + _
　 }} + _
　 catch(oException) + _
　 {{}} + _
　}}

PageClientScriptRegisterClientScriptBlock(MeGetType() LoadEvent _
StringFormat(script TreeViewClientID PanelClientID) True)
　End Sub
End Class

　　下面的代碼顯示了頁面的布局

＜%@ Page Language=VB AutoEventWireup=false CodeFile=Defaultaspxvb Inherits=_Default %＞
＜!DOCTYPE html PUBLIC //WC//DTD XHTML Transitional//EN transitionaldtd＞

＜html xmlns= ＞
＜head runat=server＞
　＜title＞Focus Tree Node on Postback＜/title＞
＜/head＞
＜body onload=LoadEvent()＞
　＜form id=form runat=server＞
　　＜div＞
　　　＜asp:Panel ID=Panel runat=server Height=px Width=px ScrollBars=Both＞
　　　　＜asp:TreeView ID=TreeView runat=server＞
　　　　　＜SelectedNodeStyle BackColor=#FF /＞
　　　　＜/asp:TreeView＞
　　　＜/asp:Panel＞
　　＜/div＞
　＜/form＞
＜/body＞
＜/html＞

　　下圖顯示了本例子運行的結果

　　最後下面的代碼顯示了javascript的注入方式

＜script＞
function LoadEvent()
{
　try
　{
　　var elem = documentgetElementById(TreeView_SelectedNode);
　　if(elem != null )
　　{
　　　var node = documentgetElementById(elemvalue);
　　　if(node != null)
　　　{
　　　　nodescrollIntoView(true);
　　　　PanelscrollLeft = ;
　　　}
　　}
　}
　catch(oException)
　{}
}// ＞
＜/script＞
　　用Javascript定義的LoadEvent函數將查找隱藏字段我們利用TreeView控件的ClientID 查找所有元素不過在嵌套多個TreeView控件後名稱將變得非常長找到單元格的值後我使用scrollIntoView方法scrollLeft屬性將讓滾動條滾動當前位置

From:http://tw.wingwit.com/Article/program/net/201311/13687.html