WebForm's repeater and JS light bar effects

Source: Internet
Author: User

Repeater:

HeaderTemplate-Execute again at load start

ItemTemplate-How many data are executed and how many times

FooterTemplate-executed at the end of the load

AlternatingItemTemplate-Alternating Item template


<asp:repeater id= "Repeater1" runat= "Server" >
<HeaderTemplate>
<table id= "TB1" >
<tr id= "Tr_head" >
<td> User name </td>
<td> Password </td>
<td> Nickname </td>
<td> Sex </td>
<td> Birthdays </td>
<td> Age </td>
<td> ethnic </td>
</tr>
</HeaderTemplate>
<ItemTemplate>
<tr class= "Tr_item" >
<td><% #Eval ("UserName")%></td>
<td><% #Eval ("PassWord")%></td>
<td><% #Eval ("nickname")%></td>
<td><% #Eval ("Sexstr")%></td>
<td><% #Eval ("Birthdaystr")%></td>
<td><% #Eval ("Age")%></td>
<td><% #Eval ("Nationname")%></td>
</tr>
</ItemTemplate>
<FooterTemplate>
</table>
</FooterTemplate>
</asp:Repeater>
This is a general notation, I do not use VS, in my database in the user table as an example, written in Notepad
Main labels on 3, head tag HeaderTemplate, item label ItemTemplate, Foot label FooterTemplate. As for AlternatingItemTemplate, there is no written
Why I did not write, because there is no need, if the alternatingitemtemplate tag is added, then the item label and the alternating item label will be output alternately in the Repeater, you can
By setting the style to achieve the beautification, in fact there is not much of a bird (at least now I think so).
As for the binding data source, the bindings for the list written on the previous WebForm's essay are roughly the same, slightly simpler, because only the Datesource is directed, and bind is bound to the line

Changes the style of a piece of data by determining whether a property value matches the criteria. They call this an inventory early warning system, because it's more common in stock alerts.


Property extension, write a property that returns a string type, and return a CSS style sheet style (and a way to function methods, however, hehe)
Code:
public string Red
{
Get
{
String end = "";
if (Convert.ToInt32 (age) >= 16)
{
end = "background-color:red;";
}
return end;
}
}
This is the code of the extended property in the attribute class, which returns a string type of HTTP code and then, very critical!
Style= "<% #Eval (" Red ")%>"
by <% #Eval%>, throw the string returned in the red extended property to the style, and you're done. The TR in the throw item label


To let you know, the attribute value does not have to be a display

Light Bar Effect:
This light bar effect, with JS write
<script type= "Text/javascript" >
Window.onload = function () {
var items = document.getelementsbyclassname ("Tr_item");
var oldcolor = "";
for (var i = 0; i < items.length; i++) {
Items[i].onmouseover = function () {
Oldcolor = This.style.backgroundColor;
This.style.backgroundColor = "Yellow";
};
Items[i].onmouseout = function () {
This.style.backgroundColor = Oldcolor;
};

}


};
</script>
The code is above and we analyze the logic below. What does the wand effect mean, you move the mouse up to change color, move it out and change it back, that's it.
In this case, we will have two events: mouse over onmouseover and mouse out of onmouseout, the code is not uppercase I do not write. Well, first, we have to get class.
For everything in the Tr_item, which is the data in the item tag. Then, we define a oldcolor to be empty and one to record the original color. Then we use the For loop
Attach all of the two events to the item label. I won't talk about the logic of the event.

-----------------------------------------------
Non-tabular information display:
1, Pure Html+css+js production

2. Add Repeater control to show data binding

WebForm's repeater and JS light bar effects

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.