建立|控制項 在WEB應用中，如何才能使應用高效率呢?如何才能吸引使用者呢?這的確是個大學問,頁面的內容,色搭配等都十分重要。但不可忽視的是,多數情況下，對於資料的呈現方式也是十分重要的。由於web應用的規模不斷增大，資料也越來越多了,有時候,由於在一個頁面同時顯示的資料太多，從而造成頁面的不美觀,使用者因此也會感到厭倦和操作困難。因此，本文將介紹利用repeater控制項的隱藏地區，以達到較好的資料顯示效果。
防止資料過多載入有很多方法，比如採用資料分頁的方法,又或者採用master/detail的方式,就是先顯示每條資料的主要內容，而對於詳細資料,使用者只需要點detail的連結就可以了。本文將介紹另外一種方式來顯示資料，它採用摺疊的隱藏方式，當使用者需要看每條記錄的詳細描述時，不需要另外開啟連結視窗，而直接在原資料記錄的下方，呈現出原先隱藏的資料詳細資料。這樣一來，方便了使用者的操作。我們先來看下其實際效果(http://aspnet.4guysfromrolla.com/demos/collapsibleRepeater.aspx)。 接下來，我們看如何在repeater中實現其效果。
要實現上面的效果，我們必須採用用戶端的指令碼技術，從而實現隱藏或展示某個地區。而在IE 4.x後,是可以實現該技術的。比如,＜div＞標記內的內容，當使用者點擊時可以動態地隱藏起來，而＜p＞標記內容的內容，也可以當使用者移動滑鼠到某特定地區時顯示出來。而其中的關鍵之處，在於其display和visibility的CSS風格屬性。下面的代碼顯示了其使用方法，當使用者點擊HIDE CONTENT按鈕時，則會隱藏原本顯示的文本，當點擊show content時，又會顯示原先的文本了。
＜script language="JavaScript"＞
function showHideContent(id, show)
{
var elem = document.getElementById(id);
if (elem)
{
if (show)
{
elem.style.display = 'block';
elem.style.visibility = 'visible';
}
else
{
elem.style.display = 'none';
elem.style.visibility = 'hidden';
}
}
}
＜/script＞
＜div id="someRegion"＞
This text will be displayed or hidden when clicking the appropriate button below...
＜/div＞
＜input type="button" value = "Hide Content"
＞
＜input type="button" value = "Show Content" ＞
在上面的javscript代碼中，充分利用了HTML元素的display和visiblity屬性，而且要注意，這兩個屬性應該同時使用。首先在button按鈕的onclick事件中，調用了自訂的javscript寫的函數showhidecontent,該函數有兩個參數，id和show,id表示要顯示或者隱藏的地區的名稱，比如該例子中，要顯示或隱藏的地區是＜div＞標記內的文本，show為布爾值，決定是否隱藏或顯示該地區。而在showhidecontent函數中，則根據show的值,控制display和visiblity屬性。
明白了上面例子的道理後，下面就可以在repeater控制項中應用了。比如，我們要建立一個FAQ問答錄，其中有很多使用者要詢問的問題，則使用上面的方法，可以先將使用者的問題使用repeater控制項羅列出來,之後當使用者點擊該問題時,則會顯示出隱藏的回答，十分方便。Repeater的程式碼片段如下:
＜asp:Repeater id="rptFAQs" runat="server"＞
＜ItemTemplate＞
＜h2＞＜%# DataBinder.Eval(Container.DataItem, "Description") %＞＜/h2＞＜br /＞
＜b＞Submitted By:＜/b＞ ＜%# DataBinder.Eval(Container.DataItem, "SubmittedByName") %＞＜br /＞
＜b＞Views:＜/b＞ ＜%# DataBinder.Eval(Container.DataItem, "ViewCount", "{0:d}") %＞＜br /＞
＜b＞FAQ:＜/b＞＜br /＞
＜%# DataBinder.Eval(Container.DataItem, "Answer") %＞
＜/ItemTemplate＞
＜/asp:Repeater＞
我們可以看到，上面的代碼只是描述了靜態一個repeater。接下來，我們要在repeater的模版列上進行一下修改，以滿足要求。
首先，我們為每一條記錄都建立兩個＜div＞標記，一個顯示FAQ的問題，另一個則顯示問題的答案,而且要為每一個＜div＞標記賦值一個唯一的id,每條記錄中，顯示問題的＜div＞標記的id記作h index(index為Repeater控制項中每一項的id號，利用itemindex),而顯示答案的＜div＞標記的id記作dindex。代碼如下:
＜script language="JavaScript"＞
function ToggleDisplay(id)
{
var elem = document.getElementById('d' + id);
if (elem)
{
if (elem.style.display != 'block')
{
elem.style.display = 'block';
elem.style.visibility = 'visible';
}
else
{
elem.style.display = 'none';
elem.style.visibility = 'hidden';
}
}
}
＜/script＞
＜style＞
.header { font-size: larger; font-weight: bold; cursor: hand; cursor:pointer;
background-color:#cccccc; font-family: Verdana; }
.details { display:none; visibility:hidden; background-color:#eeeeee;
font-family: Verdana; }
＜/style＞
＜asp:Repeater id="rptFAQs" runat="server"＞
＜ItemTemplate＞
＜div id='h＜%# DataBinder.Eval(Container, "ItemIndex") %＞' class="header"
onclick='ToggleDisplay(＜%# DataBinder.Eval(Container, "ItemIndex") %＞);'＞
＜%# DataBinder.Eval(Container.DataItem, "Description") %＞
＜/div＞
＜div id='d＜%# DataBinder.Eval(Container, "ItemIndex") %＞' class="details"＞
＜b＞Submitted By:＜/b＞ ＜%# DataBinder.Eval(Container.DataItem, "SubmittedByName") %＞＜br /＞
＜b＞Views:＜/b＞ ＜%# DataBinder.Eval(Container.DataItem, "ViewCount", "{0:d}") %＞＜br /＞
＜b＞FAQ:＜/b＞＜br /＞
＜%# DataBinder.Eval(Container.DataItem, "Answer") %＞
＜/div＞
＜/ItemTemplate＞
＜/asp:Repeater＞
我們重點來看下後半部分的代碼，其中
＜div id='h＜%# DataBinder.Eval(Container, "ItemIndex") %＞' class="header"
onclick='ToggleDisplay(＜%# DataBinder.Eval(Container, "ItemIndex") %＞);'＞會將每條記錄的問題部分，包裹在類似＜div id=h1＞,＜div id=h2＞之類的標記內，當點擊時，則調用toggledisplay函數，在該函數內，看傳入的參數是否是需要顯示的地區（注意，通過
var elem = document.getElementById('d' + id);）一句進行判斷，是的話則設定display和visiblity屬性顯示，否則不顯示。
