Repeater simple application (Dynamic Change of internal style)

Source: Internet
Author: User
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 ).

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.