Verhindern Aktualisierung Seite auf Listenansicht Schaltfläche klicken Sie auf asp. NET

Question

Ich arbeite an der Produkt-Warenkorb-Seite. Unten ist der Code, mit dem ich arbeite. In der Listenansicht bekomme ich alle Produktbilder als Buttons. Ich möchte das Karussell aktualisieren, wenn auf das Bild in der Listenansicht geklickt wird.

Aber wenn ich auf das Bild die Seite aktualisiert, habe ich versucht, mit Update-Panel, aber da die Schaltfläche dynamisch sind nicht in der Lage, einen richtigen Weg zu finden, um damit umzugehen.

<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

Sie können in einem Updateknopf für asynchrones Postback registrieren, indem Sie einen neuen OnPreRender Ereignis auf die Schaltfläche hinzufügen:

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