2016-08-29 12 views
0

クリック可能なdivに問題がありますが、クリック可能なdivを作成する方法はわかりますが、クリック可能にしたいdivはリピータにあります。私はcommandnameとのdivの代わりにlinkbuttonを試しましたが、それは私にはあまり適していません。リピータのASP.NETクリック可能部

私がしようとしているのは、コードを背後から制御する必要があるため、div可能にすることです。多分、jQueryの解決策があるか、両方とも大丈夫です。

私が話したdivはdivproblemです。

<asp:Repeater runat="server" ID="rpAlbumler" OnItemCommand="rpAlbumler_ItemCommand"> 
      <ItemTemplate> 
       <div class='<%#Eval("Kategoricss") %>' runat="server" id="dvKategoriler"> 
        <div class="fw-portPreview"> 
         <div class="img_block wrapped_img fs_port_item"> 
          <a class="featured_ico_link" href="portfolio_post_fullscreen_ribbon.aspx"> 
           <asp:Image runat="server" ID="imgkapak" ImageUrl='<%#Eval("Kapakpath") %>' /> 
          </a> 
          <div class="bottom_box"> 
           <div class="bc_content"> 
            <h5 class="bc_title"> 
             <asp:HyperLink runat="server" ID="hplnkAlbumIcerik" Text='<%#Eval("Abaslik") %>'></asp:HyperLink> 
            </h5> 
            <div class="featured_items_meta"> 
             <span> 
              <asp:Label runat="server" ID="lblKategoriler" Text='<%#Eval("Kategorihazir") %>'></asp:Label></span> 
            </div> 
           </div> 
           <div id="divproblem" class="bc_likes gallery_likes_add"> 
            <i class="stand_icon icon-heart"></i> 
            <span> 
             <asp:Label runat="server" ID="lblAlbumBegeni" Text='<%#Eval("Albumbegenisayisi") %>'></asp:Label></span> 
           </div> 
          </div> 
          <div class="portFadder"></div> 
         </div> 
        </div> 
       </div> 
      </ItemTemplate> 
     </asp:Repeater> 
+0

このコードは、問題を再現するのに十分ではありません。問題をより詳しく説明し、実際に問題を再現できるサンプルを提供してください。 jQueryコードに問題がある場合は、それも提供する必要があります。 – rcdmk

+0

クリックすると、どんな機能が必要ですか?リダイレクトまたはポップアップ?あなたはScriptManagerを使ってコードの背後にあるコード(onclickコードを持つ)をdivにしてから、何でもしてもらうことができます –

+0

実際にユーザがdivをクリックしたときにリピータのためにデータをデータベースに送る必要があります。後ろのコードからのdiv –

答えて

1

それは本当に簡単です、あなたの<div>あなたがclass属性を使用して、クリックイベントにdiv要素をバインドする必要があるので、IDがリピーターで複数回表示されますので、IDを使用してjQueryの中で、クリックイベントにフックアップすることができません。

$(".bc_likes").click(function() { }); 

第二に、あなたが$.ajaxを使用して、ロジックの後ろにあなたのコードを書くことができますC#の[WebMethod]に電話をかけることができ、イベントをクリックjQueryのからの背後にあるコードに話をします。背後

.CODE:

public partial class RepeaterExample : System.Web.UI.Page 
{ 
    protected void Page_Load(object sender, EventArgs e) 
    { 
     if(!Page.IsPostBack) 
     { 
      var p1 = new Product { ID = 1, ProductName = "Banana" }; 
      var p2 = new Product { ID = 2, ProductName = "Apple" }; 
      var p3 = new Product { ID = 3, ProductName = "Orange" }; 
      Repeater1.DataSource = new List<Product> { p1, p2, p3 }; 
      Repeater1.DataBind(); 
     } 
    } 

    [System.Web.Services.WebMethod] 
    public static string ServerCall(int id) 
    { 
     return "Server response.Processed ID - " + id; 
    } 

} 

public class Product 
{ 
    public int ID { get; set; } 
    public string ProductName { get; set; } 
} 

.ASPX:

<head runat="server"> 
    <title></title> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.3/jquery.min.js"></script> 
    <script type="text/javascript"> 
     $(function() { 
      $(".bc_likes").click(function() { 
       var id = $(this).data('id'); 

       $.ajax({ 
        url: 'RepeaterExample.aspx/ServerCall', 
        contentType: "application/json; charset=utf-8", 
        data: JSON.stringify({ id: id }), 
        method: 'POST', 
        success: function (data) { 
         alert(data.d); 
        }, error: function (err) { 
         console.log(err); 
        } 
       }); 
      }); 
     }); 
    </script> 
</head> 
<body> 
    <form id="form1" runat="server"> 
     <ul> 
      <asp:Repeater ID="Repeater1" runat="server"> 
       <ItemTemplate> 
        <li> 
         <div id="divproblem" class="bc_likes gallery_likes_add" data-id='<%# Eval("ID") %>' style="border:1px solid red;"> 
          <i class="stand_icon icon-heart"></i> 
          <span><%# Eval("ProductName") %></span> 
         </div> 
        </li> 
       </ItemTemplate> 
       <SeparatorTemplate> 
        <hr /> 
       </SeparatorTemplate> 
      </asp:Repeater> 
     </ul> 
    </form> 
</body> 
+0

良い答え。また、jQueryのクリックイベントを呼び出すことができないという理由を追加するのは、そのIDがページにある最初の要素にのみ適用されるということです。 また、ページの読み込み後にそれ以上動的に追加する場合は、 '$(" SOMEPARENTELEMENT ")。on(" click "、" .bc_likes "、function(e){// onクリック動作}};を使用して、さらに動的に追加された要素がクリック可能になるようにします。前にこの問題に遭遇したので、私はこれを言うだけです。 – SeanKendle

+0

@DenysWesselsあなたの答えに感謝します –

関連する問題