Динамическое отображение текста в Gridview при щелчке по ссылке

Question

У меня есть сетчатый сет, и я хотел бы иметь его так, чтобы при щелчке элемента (ссылки) появлялись скрытые поля, соответствующие записи элемента. Это похоже на то, что может обрабатывать JQuery, но я не знаю, как его реализовать.

Я ищу что-то по строкам: список домовладельцев вытаскивается из базы данных SQL в Gridview. Если вы нажмете на определенное имя, отобразится адрес домовладельца.

Я делаю все это в .NET. Любая помощь будет принята с благодарностью.

Answer 1

Вы упомянули .Net и GridView, поэтому я собираюсь предположить, что вы имеете в виду веб-приложение.

GridView позволяет вам проявлять творческий подход. Если вы знакомы с Template Fields, тогда представьте и адресуйте «карту», ​​связанную с именем, или в этом случае, и значок.

В моем мире классов rs-icon и rs-icon-vcard дисплей значок изображение Ролодекса стиль, связанный с аа скрытого DIV: <div id="ContactInfo" class="Hide">

Классом tooltip-marker является анонимным классом CSS, который используется только для идентификации родителя скрытого ContactInfo div через jquery

После того, как страница отображается и в функции jquery ready() я делаю вызов jquery для подсказки jqueryui(). При наведении курсора на иконку вызовет всплывающее всплывающую подсказку, которая отображает скрытые, отформатированный «визитку»:

$(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>