使用jquery的asp.net转发器

Question

我有一个转发器，它直接从与我的Outlook绑定的应用列出电子邮件。我需要中继器列出文件夹名称，然后列出该文件夹中的每条消息。然而，我得到的是该文件夹中的每条消息重复的文件夹名称。

我也试图使用jquery切换文件夹名称以显示它下面的消息，但是当我使用style="display:none;"时，不显示任何消息。我不认为我试图使用的jquery是正确的。它被称为jsfiddle。

任何帮助将不胜感激，因为我画空白。我一直盯着这个太久，可能只是需要休息一下。

这里是我的代码：

<script type="text/javascript"> 
    $(function() { 
     $('a.toggler').on('click', function() { 
      $('+ div', this).toggle(); 
     }); 
    }); 
</script> 

<asp:Repeater runat="server" ID="ListServRepeater"> 
      <ItemTemplate> 
       <div class="dataContentSection"> 
        <a href="javascript:void(0);" class="folders toggler"> 
         <h4> 
          <%# Eval("FolderName") %> 
         </h4> 
        </a> 
       </div> 
       <div class="dataContentSection"> 
        <div> 
         <%# Eval("Message") %> 
        </div> 
       </div> 
      </ItemTemplate> 
</asp:Repeater> 

编辑：我嵌套的中继器，但我不能做正确的事情，因为所有的FolderNames仍会在每次消息显示。

<div runat="server"> 
    <ul> 
     <asp:Repeater runat="server" ID="FolderRepeater"> 
      <ItemTemplate> 
       <li class="dataContentSection"> 
        <a href="javascript:void(0);" class="folders toggler"> 
         <h4> 
          <%# Eval("FolderName") %> 
         </h4> 
        </a> 
       </li> 
       <asp:Repeater runat="server" ID="MessagesRepeater"> 
        <ItemTemplate> 
         <li class="dataContentSection" > 
          <div id="messages"> 
           <%# Eval("Message") %> 
          </div> 
         </li> 
        </ItemTemplate> 
       </asp:Repeater> 
      </ItemTemplate> 
     </asp:Repeater> 
    </ul> 
</div> 

更新：我能得到的中继器的工作得益于@rs提供的文章，以帮助。如果你看看评论，文章应该仍然存在。我几乎一字不差地接受了它，取而代之的是列名和其他与我的代码相关的内容。仍然看着jQuery，不知道为什么它不会工作。我能想到的唯一的事情就是它是动态的，而不是静态的，我试图展示和隐藏的数据。

<div class="dataContentSection"> 
    <a href="javascript:void(0);" class="folders toggler"> 
     <h4> 
      Folder Name 
     </h4> 
    </a> 
</div> 
<ul> 
    <div class="dataContentSection"> 
     <div id="message"> 
      Message Text 
     </div> 
    </div> 
</ul> 
</div> 

Answer 1

这个问题是一个两部分问题。关于每个文件夹下的消息的子中继器控制，rs是正确的。一旦这个问题通过.Net解决，你可以解决将显示/隐藏每个文件夹的jquery部分。

jquery部分可以用多种不同的方式寻址。这里是一旦你准备解决jQuery的部分，你可以参考一个示例代码：

<script type="text/javascript"> 
    $(function() { 
     $('a').click(function() { 
      $(this).parent().children('.dataContentSectionMessages').toggle(); 
     }); 
    }); 
</script> 

<div class="dataContentSection"> 
    <a href="javascript:void(0);" class="folders toggler"> 
     <h4> 
      Folder 1 
     </h4> 
    </a> 
    <div class="dataContentSectionMessages"> 
     <div id="message1a"> 
      Message 1a 
     </div> 
     <div id="message1b"> 
      Message 1b 
     </div> 
    </div> 
</div> 
<div class="dataContentSection"> 
    <a href="javascript:void(0);" class="folders toggler"> 
     <h4> 
      Folder 2 
     </h4> 
    </a> 
    <div class="dataContentSectionMessages"> 
     <div id="message2a"> 
      Message 2a 
     </div> 
    </div> 
</div> 

下面是一个的jsfiddle demoing以上：http://jsfiddle.net/4PPdz/