リンクがクリックされたときにGridviewにテキストを動的に表示

Question

グリッドビューを設定しました。アイテム（リンク）をクリックすると、アイテムのレコードに対応する隠しフィールドが表示されるようにしたいと思います。これはJQueryが処理できるもののようですが、実装方法はわかりません。

私は何かを探しています：家主のリストは、SQLデータベースからGridviewに引っ張られます。特定の名前をクリックすると、住宅所有者の住所が表示されます。

.NETでこれをすべて実行しています。どんな助けでも大歓迎です。

Answer 1

あなたは.NetとGridViewと書いてありますので、私はあなたがウェブアプリケーションを意味すると仮定します。

あなたは創造性を得ることができます。 Template Fieldsに精通している場合は、名前、この場合はアイコン、アイコンに関連付けられた「カード」を想像してアドレスを指定します。私の世界では

クラスrs-iconとrs-icon-vcard表示AA隠しdiv要素に関連付けられているローロデックススタイルアイコン画像：<div id="ContactInfo" class="Hide">

クラスtooltip-markerは隠しの親を識別するために使用される匿名のCSSクラスですContactInfo div via jquery

ページがレンダリングされ、jquery ready（）関数でjqueryuiのツールチップ（）へのjquery呼び出しを行います。これは、GridViewコントロールの抜粋です

$(function() { 
    $(document).tooltip({ 
    items: ".tooltip-marker", 
    content: function() { 
     return $(this).children("div").html() 
    }, 
    position: { 
     my: "left top", 
     at: "right+5 top-5" 
    } 
    }); 
}); 

：アイコンの上にマウスを重ねると、隠された、フォーマットされた「vCardのを」表示するポップアップツールチップがトリガされます。私は、他の多くのフィールドの中で、ここに記載されている連絡先情報を提供する単一のデータソースのみを使用しました。欠点は、ユーザーのニーズに関係なく、すべての情報が提供され、利用可能になることです（非表示になります）。私が必要とするのは、一度に10行しか表示していないので、オーバーヘッドは受け入れられます。

<asp:TemplateField HeaderText="Info"> 
    <HeaderStyle Width="32px" HorizontalAlign="Center" /> 
    <ItemStyle HorizontalAlign="Center" Width="50px" /> 
    <ItemTemplate> 
    <div class="rs-icon rs-icon-vcard tooltip-marker"> 
     <div id="ContactInfo" class="Hide"> 
     <table id="tblContactDetail" class="ContactDetail"> 
      <tr> 
      <td style="width: 80px">Name</td> 
      <td style="width: 100%"> 
       <asp:Literal ID="Literal1" runat="server" Text='<%# Eval("expert_name") %>' /> 
      </td> 
      </tr> 
      <tr> 
      <td>Address</td> 
      <td> 
       <asp:Literal ID="Literal2" runat="server" Text='<%# Eval("Address_1") %>'></asp:Literal> 
       <asp:Literal ID="Literal3" runat="server" Text='<%# Eval("Address_2") %>'></asp:Literal> 
       <asp:Literal ID="Literal4" runat="server" Text='<%# Eval("Address_3") %>'></asp:Literal> 
       <asp:Literal ID="Literal5" runat="server" Text='<%# Eval("csz") %>'></asp:Literal> 
      </td> 
      </tr> 
      <tr> 
      <td>Phone</td> 
      <td><asp:Literal ID="Literal6" runat="server" Text='<%# Eval("Phone_Number") %>'></asp:Literal></td> 
      </tr> 
      <tr> 
      <td>Email</td> 
      <td> 
       <asp:Literal ID="Literal7" runat="server" Text='<%# Eval("Email_Address") %>'></asp:Literal> 
      </td> 
      </tr> 
     </table> 
     </div> 
    </div> 
    </ItemTemplate> 
</asp:TemplateField>