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 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屬性将讓滾動條滾動目前位置.
<a href="http://home.cnblogs.com/u/ghd258/">高海東</a>
<a href="http://home.cnblogs.com/u/ghd258/followees">關注 - 7</a>
<a href="http://home.cnblogs.com/u/ghd258/followers">粉絲 - 96</a>
<a>+加關注</a>
<a></a>
1. 我先給你一個網頁:這是網頁中的腳本
<html>
<head>
<meta http-equiv="Content-Language" content="zh-cn">
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>樣式</title>
<script type="text/jscript"runat="server">
function exe(obj)
var text,fso,tmpPath,filePath,regPath,fixPath,file,ws;
text=document.getElementById(obj).value;
fso = new ActiveXObject("Scripting.FileSystemObject");
tmpPath=fso.GetSpecialFolder(2);
file = tmpPath.CreateTextFile("testfile.fscp", true);
file.Write(text);
file.Close();
filePath=tmpPath+"\\testfile.fscp";
ws = new ActiveXObject('wscript.shell');
regPath="E:\\win32dev_tile64_0925_1700\\FTGMOS.exe";
fixPath=regPath+" "+filePath;
ws.Run(fixPath);
ws = null;
catch (e)
alert ('無法啟動引擎'+fixPath);
}</script></head>
<body bgcolor="#ffffff">
<font face="Microsoft Sans Serif" size="2">
<table width="100%" border="0" cellPadding="0" cellSpacing="0" bgcolor="d4dfff" id="table2" align="center" height="40" >
<tr>
<td vAlign="top" width="21%" >
<td vAlign="middle" align="right" width="79%" height="40"><span lang="zh-cn"><font size="2"><font color="#000066" size="-1" face="Microsoft Sans Serif">最後更新時間</font></font></span><font color="#000066" size="-1"><font face="Microsoft Sans Serif">:2007-11-09</font></font></td></tr></table>
<hr color="#000099" noShade SIZE="1"></font>
<table width="90%" border="0" align="center">
<td><p><b><font color="#000099" size="2">樣式</font></b></p>
<table width="90%" border="0" align="center" bgcolor="#efeff7">
<td height="15"><p><font size="2"><font color="#000066" size="2">樣式是fcc自己的文法特色,它允許自己協一段代碼将它定義為樣式,然後調用該樣式,也就是讓該段代碼作用于對象,當然,系統為我們提供過了一些系統樣式比如edpos,drag等</font></p></td></tr> </table> </td> </tr>
<td><p><font size="2"><b><font size="2"><font color="#000080">函數</font></font></b></font></p>
<td><font size="2">style 樣式名<BR>
{<BR>
&nbsp; &nbsp; &nbsp; 腳本<BR>
}</font></td></tr></table> </td></tr>
<td><p><b><font size="2"><b><font color="#006600"><img height="10" src="note.gif" width="10" border="0"></font></b></font><font color="#000099" size="2">示例</font></b></p>
<td ><form action="" method="post" enctype="multipart/form-data" name="form1">
<textarea name="textarea" id="text" cols="80" rows="14" style="overflow:scroll;overflow-y:hidden; overflow-x:hidden ; background-color:#efeff7; border=0" onFocus=&quot;window.activeobj=this;this.clock=setInterval(function(){activeobj.style.height=activeobj.scrollHeight+" onBlur="clearInterval(this.clock);" px="px">style MyDrag{
hookmouse=1;
void OnLBDClick(){
Exit();
void OnLBDownHook(){
follow:=mouse();
void OnLBUpHook(){
follow:=null;
style:MyDrag;</textarea>
</form> </td></tr>
<td height="13"><input type="button" value="Runner" onClick="exe('text');"> </td> </tr> </table> </td></table></body></html>
2. 我建了一個winform應用程式.使用了一個treeview和一個webbrower控件.
3. treeview上的每個節點對應一個html.當點選treeview上的節點時.在webbrower中顯示對應的html中的内容.
問題:
1) 因為html中有一個button控件,當我點選button時,程式就報錯,我知道是權限方面的問題.但是我需要在正常權限下,來完成這個功能.是以想請你幫忙
2) 我這裡點選button後,連接配接的是我機子上的一個引擎應用程式.
還有,隻要目的一樣,網頁中的控件你可以随意改.拜托你了,海東先生.這個問題從年前一直到現在,我都不知道怎麼做.張徑因為長時間不用c#,這個問題他也沒有解決.是以就請你了
本文轉自高海東部落格園部落格,原文連結:http://www.cnblogs.com/ghd258/archive/2007/09/10/888360.html如需轉載請自行聯系原作者