2017-05-08 12 views
1

私は製品カートページで作業しています。以下は、私が作業しているコードです。リストビューでは、すべての製品イメージをボタンとして取得しています。リストビュー内の画像のいずれかがクリックされたときにカルーセルを更新したい。リストビューの更新ページが表示されないようにするにはasp.netをクリックしてください

しかし、画像が更新されると、更新パネルを使用しようとしましたが、ボタンが動的であるため、適切な処理方法を見つけることができません。

あなたがボタンの上に新しいOnPreRenderイベントを追加することによってのUpdatePanel内の非同期ポストバックのボタンを登録することができます
<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> 
+0

あなたは 'WebMethod'を作成し、データを取得するために、AJAXを経由して、それを呼び出すことができますし、フィールドを更新します。 – vikscool

答えて

1

protected void btnReloadQty_PreRender(object sender, EventArgs e) 
{ 
    ScriptManager scriptMan = ScriptManager.GetCurrent(this.Page); 
    scriptMan.RegisterAsyncPostBackControl((LinkButton)sender); 
} 
関連する問題