CODEWITHSUNDEEP
c#jqueryhtmlcssasp.net
Hasan Durukan
Hasan Durukan

Reputation: 113

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">
            <ItemTemplate>
                <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") %>' />
                            </a>
                            <div class="bottom_box">
                                <div class="bc_content">
                                    <h5 class="bc_title">
                                        <asp:HyperLink runat="server" ID="hplnkAlbumIcerik" Text='<%#Eval("Abaslik") %>'></asp:HyperLink>
                                    </h5>
                                    <div class="featured_items_meta">
                                        <span>
                                            <asp:Label runat="server" ID="lblKategoriler" Text='<%#Eval("Kategorihazir") %>'></asp:Label></span>
                                    </div>
                                </div>
                                <div id="divproblem" class="bc_likes gallery_likes_add">
                                    <i class="stand_icon icon-heart"></i>
                                    <span>
                                        <asp:Label runat="server" ID="lblAlbumBegeni" Text='<%#Eval("Albumbegenisayisi") %>'></asp:Label></span>
                                </div>
                            </div>
                            <div class="portFadder"></div>
                        </div>
                    </div>
                </div>
            </ItemTemplate>
        </asp:Repeater>

Upvotes: 0

Views: 1540

Answers (1)

Denys Wessels
Denys Wessels

Reputation: 17029

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)
    {
        if(!Page.IsPostBack)
        {
            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 };
            Repeater1.DataBind();
        }
    }

    [System.Web.Services.WebMethod]
    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; }
}

.ASPX:

<head runat="server">
    <title></title>
    <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');

                $.ajax({
                    url: 'RepeaterExample.aspx/ServerCall',
                    contentType: "application/json; charset=utf-8",
                    data: JSON.stringify({ id: id }),
                    method: 'POST',
                    success: function (data) {
                        alert(data.d);
                    }, error: function (err) {
                        console.log(err);
                    }
                });
            });
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <ul>
            <asp:Repeater ID="Repeater1" runat="server">
                <ItemTemplate>
                    <li>
                        <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>
                        </div>
                    </li>
                </ItemTemplate>
                <SeparatorTemplate>
                    <hr />
                </SeparatorTemplate>
            </asp:Repeater>
        </ul>
    </form>
</body>

Upvotes: 1

Related Questions