Hasan Durukan Hasan Durukan - 1 year ago 212
ASP.NET (C#) Question

ASP.NET Clickable Div in Repeater

I have a problem with a clickable div, I know how to make a clickable div, however, the div I want to make clickable is in a repeater. I tried linkbutton instead of div with the commandname but its not quite suitable for me.

The thing I'm trying to do is make the div clickable because I need control it from code behind, maybe there is a solution with the jQuery or c# both of them okay for me.

The div I talked about is divproblem.

<asp:Repeater runat="server" ID="rpAlbumler" OnItemCommand="rpAlbumler_ItemCommand">
<div class='<%#Eval("Kategoricss") %>' runat="server" id="dvKategoriler">
<div class="fw-portPreview">
<div class="img_block wrapped_img fs_port_item">
<a class="featured_ico_link" href="portfolio_post_fullscreen_ribbon.aspx">
<asp:Image runat="server" ID="imgkapak" ImageUrl='<%#Eval("Kapakpath") %>' />
<div class="bottom_box">
<div class="bc_content">
<h5 class="bc_title">
<asp:HyperLink runat="server" ID="hplnkAlbumIcerik" Text='<%#Eval("Abaslik") %>'></asp:HyperLink>
<div class="featured_items_meta">
<asp:Label runat="server" ID="lblKategoriler" Text='<%#Eval("Kategorihazir") %>'></asp:Label></span>
<div id="divproblem" class="bc_likes gallery_likes_add">
<i class="stand_icon icon-heart"></i>
<asp:Label runat="server" ID="lblAlbumBegeni" Text='<%#Eval("Albumbegenisayisi") %>'></asp:Label></span>
<div class="portFadder"></div>

Answer Source

It's really simple your <div> cannot be hooked up to the click event in jQuery using ID because the ID appears multiple times in the repeater so you need to bind the div to a click event using the class attribute:

$(".bc_likes").click(function () { });

Secondly to talk to the code behind from the jQuery click event you can use $.ajax and make a call to a C# [WebMethod] where you can write your code behind logic.

.Code behind:

public partial class RepeaterExample : System.Web.UI.Page
    protected void Page_Load(object sender, EventArgs e)
            var p1 = new Product { ID = 1, ProductName = "Banana" };
            var p2 = new Product { ID = 2, ProductName = "Apple" };
            var p3 = new Product { ID = 3, ProductName = "Orange" };
            Repeater1.DataSource = new List<Product> { p1, p2, p3 };

    public static string ServerCall(int id)
         return "Server response.Processed ID - " + id;


public class Product
    public int ID { get; set; }
    public string ProductName { get; set; }


<head runat="server">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.3/jquery.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $(".bc_likes").click(function () {
                var id = $(this).data('id');

                    url: 'RepeaterExample.aspx/ServerCall',
                    contentType: "application/json; charset=utf-8",
                    data: JSON.stringify({ id: id }),
                    method: 'POST',
                    success: function (data) {
                    }, error: function (err) {
    <form id="form1" runat="server">
            <asp:Repeater ID="Repeater1" runat="server">
                        <div id="divproblem" class="bc_likes gallery_likes_add" data-id='<%# Eval("ID") %>' style="border:1px solid red;">
                            <i class="stand_icon icon-heart"></i>
                            <span><%# Eval("ProductName") %></span>
                    <hr />
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download