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

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

您可以将UpdatePanel内注册异步回发按钮，通过该按钮添加一个新的OnPreRender事件：

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