当点击链接时在GridView中动态显示文本

Question

我有一个gridview设置，我想要它，这样当一个项目（链接）被点击时，将显示对应于该项目记录的隐藏字段。这看起来像JQuery可以处理的东西，但我不知道如何实现它。

我正在寻找的东西沿线：房主列表是从SQL数据库拉入到Gridview。如果您点击某个特定的名称，则会显示房主的地址。

我在.NET中这样做。任何帮助将不胜感激。

Answer 1

你提到.Net和GridView所以我打算假设你的意思是一个Web应用程序。

GridView允许您发挥创意。如果您熟悉模板字段，那么想象并解决与名称关联的“卡片”，或者在这种情况下，以及图标。

在我的世界中的类rs-icon和rs-icon-vcard显示与AA隐藏的div相关的关系网的时尚偶像形象：<div id="ContactInfo" class="Hide">

类tooltip-marker是仅用于识别隐藏的父匿名CSS类ContactInfo div via jquery

页面呈现后，在jquery ready（）函数中，我对jqueryui的tooltip（）进行jquery调用。将鼠标悬停在图标会触发显示隐藏的，格式化的“名片”，弹出提示：

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

这是GridView中的一个片段。我只使用了一个数据源，这个数据源在许多其他领域中提供了您在此看到的联系信息。缺点是无论用户需求如何，都会提供所有信息（尽管隐藏）。对于我的需求，因为我一次只显示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>