在Repeater控件中创建可隐藏区域

核心提示：在WEB应用中，如何才能使应用高效率呢?如何才能吸引用户呢?这的确是个大学问,页面的内容,色搭配等都十分重要，在Repeater控件中创建可隐藏区域，但不可忽视的是,多数情况下，对于数据的呈现方式也是十分重要的，则会隐藏原本显示的文本，当点击show content时，由于web应用的规模不断增大，数据也越来越多了,有

在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"
　onclick="showHideContent('someRegion', false);"＞
＜input type="button" value = "Show Content" onclick="showHideContent('someRegion', true);"＞