To create a hidden region in a repeater control

Source: Internet
Author: User
Tags eval visibility

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>

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.