由於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"
onclick="showHideContent('someRegion', false);">
<input type="button" value = "Show Content" onclick="showHideContent('someRegion', true);">
在上面的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屬性顯示，否則不顯示。