ASP.net simple design question

Question

I have this in a repeater:

<div class="vote-wrapper">
    <asp:hyperlink runat="server" CssClass="s dislike-button" ID="CommentVoteDown" />                        
    <div class="vote-total-bad">
        23
    </div>
    <asp:hyperlink runat="server" CssClass="s like-button" ID="CommentVoteUp" />
    <div class="clear"></div>
</div>

This is repeated (obviously!). Due to my project settings, I've made it no generate unique ID's, and manage it all myself, the reason for this is that it makes calling references to DOM elements in external JS files a lot easier.

The ID's come out as duplicates, all are CommentVoteDown and CommentVoteUp. What I want to do, is make them read as:

CommentVoteUp124
CommentVoteDown124

Where the number afterwards represents the ID of the comment it is associated with.

I try doing:

 UV.Attributes["ID"] += ThisComment.ID;

and

UV.Attributes.Add("ID", "CommentVoteUp" + ThisComment.ID);

But these just add second keys to the HTML element. How can I name them so I can reference them in Jquery?

Answer 1

Can't you do something like

<asp:hyperlink runat="server" CssClass="s dislike-button" 
                ID='<%# "CommentVoteDown" + Eval("ID") %>' />    

Answer 2

Won't this work?

UV.ID += ThisComment.ID;

---

Unless you're doing a postback you don't have to use asp.net server controls and might be better off with clean and simple html:

<% Comment comment = Container.DataItem as Comment %>
<div class="vote-wrapper">
    <a class="s dislike-button" ID="CommentVoteDown<%=comment.ID %>" />                        
    <div class="vote-total-bad">
        23
    </div>
    <a class="s like-button" ID="CommentVoteUp<%=comment.ID %>" />                        
    <div class="clear"></div>
</div>

of just use the classes and find the id off the wrapping container with jQuery

<% Comment comment = Container.DataItem as Comment %>
<div id="CommentVoteUp<%=comment.ID %>" class="vote-wrapper">
    <a class="s dislike-button" />                        
    <div class="vote-total-bad">
        23
    </div>
    <a class="s like-button" />                        
    <div class="clear"></div>
</div>

and then using jQuery you can find the id from the scope of the vote up/ down <a> tag using this:

$(".like-button").click(function(){
    var id = $(this).closest(".vote-wrapper").attr("id");
});

$(".dislike-button").click(function(){
    var id = $(this).closest(".vote-wrapper").attr("id");
});