To create a hidden region in a repeater control

How can you make applications efficient in Web applications? How to attract users? This is really a great scholar, the content of the page, color collocation and so on are very important. However, it is important to show how the data is presented in most cases. Because of the growing size of Web applications, and more and more data, sometimes, because of a page at the same time too much data, resulting in the page is not beautiful, users will also be tired and difficult to operate. Therefore, this article will introduce the use of the hidden areas of the repeater control to achieve better data display results.

There are many ways to prevent data overload, such as using data paging method, or using the Master/detail way, is to first display the main content of each piece of data, and for detailed data, the user only need to point detail link on it. This article will introduce another way to display the data, it uses the hidden way of folding, when the user needs to look at the detailed description of each record, do not need to open a separate link window, and directly below the original data records, showing the original hidden data details. This makes it easier for the user to operate. Let's take a look at the actual effect (http://aspnet.4guysfromrolla.com/demos/collapsibleRepeater.aspx). Next, let's look at how to achieve the effect in repeater.

To achieve the effect above, we must adopt the scripting techniques of the client to hide or show an area. And after IE 4.x, it is possible to implement the technology. For example, the contents of a

tag can be dynamically hidden when a user clicks on it, and

The content of the content is labeled, and can be displayed when the user moves the mouse to a specific area. The key, however, lies in its display and visibility CSS style attributes. The following code shows how to use it, and when the user clicks the Hide Content button, the original text is hidden and the original text is displayed when the show content is clicked.





This text is displayed or hidden when clicking the Appropriate button below ...






In the Javscript code above, you take advantage of the display and Visiblity properties of HTML elements, and note that these two properties should be used at the same time. First, in the button button's onclick event, a custom Javscript write function showhidecontent is called, which has two parameters, and the ID and Show,id represent the name of the area to display or hide, for example, The area you want to show or hide is the text within the

tag, and show is a Boolean value that determines whether to hide or display the range. In the Showhidecontent function, the display and Visiblity properties are controlled according to the value of show.

Having understood the rationale of the above example, the following can be applied in the Repeater control. For example, we want to create a FAQ, there are many users to ask questions, then use the above method, you can first use the user's problem with the Repeater control list, then when the user clicks on the question, it will show a hidden answer, very convenient. The code snippet for repeater is as follows:

＜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＞