Create | controls in Web applications, how can you make applications efficient? How to attract users? This is really a great study, 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 <div> tag can be dynamically hidden when a user clicks on it, and <p> 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.
<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 is displayed or hidden when clicking the appropriate button below ...
</div>
<input type= "button" value = "Hide Content"
>
<input type= "button" value = "Show Content" >
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 <div> 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>
<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 just describes a static repeater. Next, we are going to make a change on the Repeater template column to meet the requirements.
First, we create two <div> tags for each record, one for the FAQ, the other for the answer, and a unique ID for each <div> tag, in each record, the ID of the <div> tag that displays the problem is labeled H Index ( Index is the ID number of each item in the Repeater control, using ItemIndex, and the ID of the <div> tag that displays the answer is 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 = ' 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>
Let's focus on the second half of the code, where
<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 tag like <div Id=h1>,<div id=h2>, and when clicked, the Toggledisplay function is called, in which the incoming parameter is seen as the area to be displayed (note that the
var elem = document.getElementById (' d ' + id) a sentence to make a judgment, yes then set the display and Visiblity properties displayed, otherwise not displayed.
