Prevent refresh page on list view button click in asp .net

Question

I'm working on product cart page. Below is the code I'm working with. In the list view I'm getting all the products images as buttons. I want to update the carousel when any of the image in the list view clicked.

But When I click the image the page refreshes, I tried using update panel but since the button are dynamic can't able to find a proper way to handle it.

 <div class="col-md-8 single-top-in simpleCart_shelfItem">
                    <div style="align-content: center">
                        <strong>CLICK THE IMAGE TO SELECT </strong>
                    </div>

                    <asp:ListView ID="ImagesList" runat="server"
                        DataKeyNames="ID"
                        GroupItemCount="14"
                        OnPagePropertiesChanging="ImagesList_PagePropertiesChanging" class="data" OnSelectedIndexChanged="OnSelectedIndexChanged">
                        <EmptyDataTemplate>
                            No Images found.
                        </EmptyDataTemplate>
                        <LayoutTemplate>
                            <table>
                                <tr runat="server" id="groupPlaceholder" />
                            </table>
                        </LayoutTemplate>
                        <GroupTemplate>
                            <tr>
                                <td runat="server" id="itemPlaceholder" />
                            </tr>
                        </GroupTemplate>
                        <ItemTemplate>
                            <td>
                                <div class="data" data-image='<%#"assets/products/"+Eval("ImageUrl").ToString() %>'
                                    data-name='<%# Eval("Description") %>' data-price='<%# Eval("Price") %>'
                                    data-image1='<%#"assets/products/1_"+Eval("ImageUrl").ToString() %>'
                                    data-image2='<%#"assets/products/2_"+Eval("ImageUrl").ToString() %>'>

                                    <asp:LinkButton ID="GridBtn" runat="server" CssClass="myButton"
                                        CommandName="Change"
                                        OnCommand="btnDetails_Command"
                                        CommandArgument='<%# Eval("Notes") %>'>

                                    <img src='<%#"assets/products/"+Eval("ImageUrl").ToString() %>' class="image" style="width: 50px; height: 50px" alt="Change" /></asp:LinkButton>

                                </div>
                            </td>
                        </ItemTemplate>
                    </asp:ListView>
                </div>

                    <div class="col-md-4 single_left pull-left left">
                    <asp:UpdatePanel ID="UpdatePanel1" runat="server">
                        <ContentTemplate>
                            <fieldset>
                                <div class="flexslider">
                                    <ul class="slides">
                                        <li id="image3" data-thumb="">
                                            <%--<img id="image3" src="assets/products/1_ZP244.jpg" />--%>
                                            <img id="image" src="assets/products/1_ZP244.jpg" />
                                            <%--  <asp:Image ID="image" src="assets/products/1_ZP244.jpg" runat="server" />--%>
                                        </li>
                                        <li id="image4" data-thumb="">
                                            <%--<img id="image4" src="assets/products/1_ZP244.jpg" />--%>
                                            <img id="image1" src="assets/products/1_ZP244.jpg" />
                                            <%--<asp:Image ID="image1" src="assets/products/1_ZP244.jpg" runat="server" />--%>
                                        </li>
                                        <li id="image5" data-thumb="">
                                            <%--<img id="image5" src="assets/products/1_ZP244.jpg" />--%>
                                            <img id="image2" src="assets/products/1_ZP244.jpg" />
                                            <%--<asp:Image ID="image2" src="assets/products/1_ZP244.jpg" runat="server" />--%>
                                        </li>
                                    </ul>
                                </div>
                            </fieldset>
                        </ContentTemplate>
                        <Triggers>
                            <asp:AsyncPostBackTrigger  ControlID="btnSubmit" />
                        </Triggers>
                    </asp:UpdatePanel>
       </div>


   <script>
            $(".data").mouseover(function () {
                var image = $(this).attr('data-image');
                var image1 = $(this).attr('data-image1');
                var image2 = $(this).attr('data-image2');
                var name = $(this).attr('data-name');
                var price = $(this).attr('data-price');

                var btnID = $(this).attr('ID');
                $(".left").find('#image').attr('src', image);
                $(".left").find('#image1').attr('src', image1);
                $(".left").find('#image2').attr('src', image2);
                $(".left").find('#image3').attr('data-thumb', image);
                $(".left").find('#image4').attr('data-thumb', image1);
                $(".left").find('#image5').attr('data-thumb', image2);
                $(".left").find('#name').text(name);
                $(".left").find('#price').text(price);

                $(".left").find('#price').text(price);
            })
        </script>

Answer 1

You can register button for async postback inside an updatepanel by add a new OnPreRender event on the button:

protected void btnReloadQty_PreRender(object sender, EventArgs e)
{
    ScriptManager scriptMan = ScriptManager.GetCurrent(this.Page);
    scriptMan.RegisterAsyncPostBackControl((LinkButton)sender);
}