Get Data From Repeater Using Java Script To Edit And Delete Rows

Today I will show you how to retrieve data from repeater.

There are two ways to do that.

1. Using UpdatePanel and FindControl by server side scripting.
2. Using Java Script from client side scripting.

In this article I only show how to get the value using javascript.

So lets come to the example straight.

We will use one property of asp button and i.e. OnClientClick. Within this we can call a javascript function which is client side scripting.

<asp:Button ID="btn_details" runat="server" Text="Show Id"  OnClientClick="Get_Details(this);" />

Get_Details() is a javascript function which will be called by clicking on the btn_details button.

Check the code with repeater

<asp:Repeater ID="Repeater1" runat="server">
            <ItemTemplate>
                <asp:Label ID="Label2" runat="server" Text='<%# Eval("ContactName") %>'></asp:Label>&nbsp;
                <asp:Label ID="Label1" runat="server" Text='<%# Eval("ContactID") %>'></asp:Label>
                <asp:Button ID="btn_details" runat="server" Text="Show Id"  OnClientClick="Get_Product_Details(this);" />
                <asp:HiddenField ID="pid" runat="server" Value='<%# Eval("ContactID") %>'/>
            </ItemTemplate>
        </asp:Repeater>

 <asp:HiddenField ID="pid" runat="server" Value='<%# Eval("ContactID") %>'/>
We are taking the value from this asp hidden field.

Now take a look on the javascript function.

<script type="text/javascript">

        function Get_Product_Details(btn) {

            var s = btn.id;

            var start = s.indexOf("btn_details");

            var end = s.lastIndexOf("_");

            sub = s.substring(start, end);

            s = s.replace(sub, "pid");

            var hidden = document.getElementById(s);

            var id = hidden.value;

            alert(id);

        }

    </script>

Through this function we are getting the value from the repeater. Now  do your necessary work with this value. You can use this value to show data in another textbox or a lightbox or where ever you want.

Though you are using javascript to show, the page content will still refresh. To avoid this you can add an UpdatePanel and put the repeater within that UpdatePanel.

Download the whole code here.

Download Now