Question

我正在使用产品购物车页面。以下是我正在使用的代码。在列表视图中，我将所有产品图像作为按钮。我想在点击列表视图中的任何图像时更新轮播。

但是当我单击图像页面刷新时，我尝试使用更新面板但由于按钮是动态的，因此无法找到正确的方法来处理它。

 <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

您可以在更新面板中注册异步回发按钮，方法是在按钮上添加一个新的OnPreRender事件：

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

阻止列表视图上的刷新页面按钮单击asp.net

1 个答案: