2017-04-24 22 views
0

私はListView内のすべての製品をリストしたショッピングカートアプリケーションに取り組んでいます。次に、各製品のボタンをクリックすると、イメージスライダが変更されます。今、私はクリックの代わりにマウスオーバーで作ろうと思っています。以下は私が達成しようとしたコードです。C#ボタンの呼び出し方法

ASP

<div class="col-md-12 "> 
       <div class="col-md-4 single_left pull-left"> 
        <div class="flexslider"> 
         <asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional"> 
          <ContentTemplate> 
           <asp:Repeater runat="server" ID="Repeater"> 
            <HeaderTemplate> 
             <ul class="slides"> 
            </HeaderTemplate> 
            <ItemTemplate> 
             <li data-thumb='<%# "assets/products/"+DataBinder.Eval(Container.DataItem, "Image1") %>'> 
              <asp:Image ID="image5" runat="server" 
               ImageUrl='<%# "assets/products/"+DataBinder.Eval(Container.DataItem, "Image1") %>' /> 
             </li> 
            </ItemTemplate> 
            <FooterTemplate> 
             </ul> 
            </FooterTemplate> 
           </asp:Repeater> 
          </ContentTemplate> 
         </asp:UpdatePanel> 
        </div> 
        <script defer src="assets/js/jquery.flexslider.js"></script> 
        <link rel="stylesheet" href="assets/css/flexslider.css" type="text/css" media="screen" /> 
        <!-- FlexSlider --> 
        <div class="caption"> 
         <strong> 
          <asp:Label ID="lblPrice" runat="server" Text="*"></asp:Label></strong> 
         <strong> 
          <asp:Label ID="ItemCode" runat="server" Text="*"></asp:Label></strong> 
         <p> 
          <small><strong> 
           <asp:Label ID="lblDesc" runat="server" Text="*"></asp:Label> 
          </strong></small> 
          <br /> 
          <asp:Label ID="lblID" Style="display: none;" runat="server" Text='<%# Eval("ID") %>'></asp:Label> 
          <small> 
           <asp:Label ID="lblMsg" runat="server" Text="*" ForeColor="#990000"></asp:Label> 
          </small> 
          <br /> 
         </p> 
         <asp:TextBox ID="txtqty" type="number" class="form-control" Text="0" runat="server"></asp:TextBox> 
        </div> 
        <asp:LinkButton ID="btnSubmit" type="submit" CssClass="add-cart item_add" runat="server" OnClick="btnSubmit_Click"><i class="fa fa-save"></i> Add to Cart</asp:LinkButton> 
        <script> 
         // Can also be used with $(document).ready() 
         $(window).load(function() { 
          $('.flexslider').flexslider({ 
           animation: "slide", 
           controlNav: "thumbnails" 
          }); 
         }); 
        </script> 
       </div> 
       <div class="col-md-8 single-top-in simpleCart_shelfItem"> 
        <asp:ListView ID="ImagesList" runat="server" 
         DataKeyNames="ID" 
         GroupItemCount="15" 
         OnPagePropertiesChanging="ImagesList_PagePropertiesChanging" 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> 
           <asp:LinkButton ID="LBtn" runat="server" 
            CommandName="Change" 
            OnCommand="btnDetails_Command" 
            CommandArgument='<%# Eval("Notes") %>'> 
            <img src='<%#"assets/products/"+Eval("ImageUrl").ToString() %>' class="image" style="Width:50px;Height:50px" alt="Change" onmouseover="this.OnCommand" /> 
           </asp:LinkButton> 
          </td> 
         </ItemTemplate> 
        </asp:ListView> 
       </div> 
       <div class="clearfix"></div> 
       <!----> 
      </div> 

答えて

2

私はクリックトリガーマウスオーバーのあなたのアプローチは、と言わなければならない - 正しいソリューションとしてではないようです。とにかく

を(だけ言って) - にあなたのコードを変更します(すでに使用)jQueryを経由して、その後

<asp:LinkButton ... CssClass="myButton" 
    ...     
</asp:LinkButton> 

$(function(){ 
    $(".myButton").on('mouseover',function(){this.click()}); 
}); 
+0

は同じを達成するための他の方法があります300以上の製品があり、それぞれにスライドショーで表示する3つの画像があります。マウスオーバー時にスライダの画像を変更するような要件があります。私は物事にかなり新しいので、これが私が得た唯一のアイデアでした。 – Developer

+0

はい私はこれを試して、あなたが言ったように、これは理想的ではありません。ページがマウスの上を飛び越えています。私はいくつかの選択肢を探す必要があります。どのようにも助けてくれてありがとう。 – Developer

+1

@Developer角度やバックボーンのようなajaxやFWライブラリを使う。 (更新パネルではない)。 –

関連する問題