JS allows you to create a hidden area in the Repeater control

In Web applications, how can we make applications highly efficient? How can we attract users? This is indeed a great learning. The content and color matching of pages are all very important. However, in most cases, it is also important to present data. As the scale of Web applications increases and data increases, sometimes the data displayed on a page is too large, which leads to poor page appearance, users will also feel bored and difficult to operate. Therefore, this article describes how to use the hidden area of the Repeater control to achieve better data display.

There are many methods to prevent excessive data loading. For example, the data paging method or the master/detail method is used to display the main content of each data entry first. For detailed data, you only need to click the detail link. This article will introduce another way to display data, which uses the fold hidden mode. When you need to view the detailed description of each record, you do not need to open a link window, the hidden data details are displayed directly below the original data record. This facilitates user operations. Let's first look at its actual effect (http://aspnet.4guysfromrolla.com/demos/collapsibleRepeater.aspx ). Next, let's look at how to implement the effect in repeater.

To achieve the above effect, we must use the client script technology to hide or display a region. This technology can be implemented after ie 4.x. For example, the content in the <div> tag can be dynamically hidden when the user clicks, And the content in the <p> tag content, it can also be displayed when the user moves the mouse to a specific area. The key lies in the CSS style attributes of display and visibility. The following Code The usage is displayed. When you click the hide content button, the original text is hidden. When you click show content, the original text is displayed again.

<Script language = "JavaScript">
Function showhidecontent (ID, show)
{
VaR ELEM = Document. getelementbyid (ID );
If (ELEM)
{
If (show)
{
ELEM. style. Display = 'block ';
ELEM. style. Visibility = 'visable ';
}
Else
{
ELEM. style. Display = 'none ';
ELEM. style. Visibility = 'hiden ';
}
}
}
</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 ('meregion', false);">
<Input type = "button" value = "show content" onclick = "showhidecontent ('sommeregion ', true);">

In the above javscript code, the display and visiblity attributes of HTML elements are fully utilized. Note that these attributes should be used at the same time. First, in The onclick event of the button, the showhidecontent function written by the custom javscript is called. This function has two parameters: ID and show, id indicates the name of the area to be displayed or hidden. In this example, the area to be displayed or hidden is the text in the <div> label, and show is a Boolean value, determines whether to hide or display the region. In the showhidecontent function, the display and visiblity attributes are controlled based on the show value.

After understanding the above example, we can apply it in the Repeater control. For example, if you want to create a faq Q & A record that contains many questions, you can use the above method to list your questions using the Repeater control, when you click this question, a hidden answer is displayed, which is very convenient. The repeater code snippet 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>

We can see that the above Code only describes a static repeater. Next, modify the repeater template column to meet the requirements.
First, we create two <div> tags for each record, one for the FAQ and the other for the answer to the question, in addition, each <div> tag must be assigned a unique ID. In each record, the <div> marked ID of the problem is marked as H index (index is the ID of each item in the Repeater control, and itemindex is used ), the <div> mark id of the displayed answer is recorded as dindex. The Code is as follows:

<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 = 'visable ';
}
Else
{
ELEM. style. Display = 'none ';
ELEM. style. Visibility = 'hiden ';
}
}
}
</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>

Let's focus on the code in the second half.
<Div id = 'H <% # databinder. eval (container, "itemindex") %> 'class = "Header"
Onclick = 'toggledisplay (<% # databinder. eval (container, "itemindex") %>); '> the problem section of each record is wrapped in a similar <Div id = h1>, <Div id = h2> and so on. When you click it, The toggledisplay function is called to check whether the input parameter is the area to be displayed.
VaR ELEM = Document. getelementbyid ('D' + id);). If yes, set the display and visiblity attributes to display. Otherwise, the display is not displayed.