Let's talk about the things we want to talk about today: reteater, friends of Asp.net may like very much. inserting a sentence first is not to say that gridview, datalist, is not good, I can see where the application is applied, but on the front-end page, I prefer repeater, which has good performance and is flexible, today, I will give you a question about repeater when I first entered the company.
Let's talk about the problem first. In a UL and Li display image list, four images are required to be displayed on each line. I thought it was super simple and confident. I used repeater to edit the template, however, I did not notice that the style of the Li application on each line is different, so the problem also came. After a flip, I finally found a solution.
Let's take a look at the completed template:
Code
<Asp: repeater id = "repeater1" runat = "server" onitemcreated = "repeaterincluitemcreated">
<Headertemplate>
<Ul class = "healweek">
</Headertemplate>
<Itemtemplate>
<Li id = "Rep" runat = "server"> <a href = "health_idea_detail.aspx? Id = <% # eval ("ID") %> & type = 3 ">
<Asp: Image id = "image3" runat = "server" imageurl = '<% # eval ("defaultimage ","~ /Img/small/health/{0} ") %>'
Alternatetext = '<% # eval ("idearname") %> 'width = "160" Height = "120"
/> </A>
<Span> <
Href = "health_idea_detail.aspx? Id = <% # eval ("ID") %> & type = 3 ">
<% # Eval ("idearname") %> </a> </span> </LI>
</Itemtemplate>
<Footertemplate>
</Ul>
</Footertemplate>
</ASP: repeater>
(For integrity, UL is added to the header)
In addition to writing templates and binding data internally, in itemtemplate, Li is changed to <li id = "Rep" runset = "server">
This is the key. In this way, you can perform dynamic operations on Li in the CS file, and other operations are just as common as binding data.
In the repeaterincluitemcreated event, the operation is performed as follows:
Code
Protected
Void repeaterincluitemcreated (Object sender, repeateritemeventargs E)
{
If (E. Item. itemtype = listitemtype. Item | E. Item. itemtype = listitemtype. alternatingitem)
{
If (E. Item. itemindex +
1) %
4
=
0)
{
Htmlcontrol divcontent = E. Item. findcontrol ("Rep") as htmlcontrol;
Divcontent. Attributes. Add ("class", "lastchild ");
}
}
}
Explanation:
If (E. Item. itemtype = listitemtype. Item | E. Item. itemtype = listitemtype. alternatingitem)
You are very familiar with the template content items.
If (E. Item. itemindex + 1) % 4 = 0)
This is to determine which one is to change the style. In the above example, the last item of each line is 4th, 8 .. update the style, so here when itemindex = 3, 7 .. to perform the following operations:
Htmlcontrol divcontent = E. Item. findcontrol ("Rep") as htmlcontrol;
Divcontent. Attributes. Add ("class", "lastchild ");
Find the rep and change its style to lastchild!
This is just a very simple application. It is useful to know more about the runtime of the control.
Of course, there are other methods to achieve this, or you can perform dynamic output on the HTML page (commonly used in Asp.net MVC ).