如何使用ul和li标签格式化转发器控件

时间:2014-10-01 05:50:24

标签: html asp.net

我需要在转发器控制的帮助下像这样格式化aspx

<div id="gallery">
            <ul>
                <li>
                    <h5>Image title 1</h5>
                    <a href="gallery/1.jpg" title="Des 2">
                    <img src="gallery/1.jpg" alt="Image 01" />
                    </a>
                </li>
                <li>
                    <h5>Image Title 2</h5>
                    <a href="gallery/2.jpg" title="Des 2">
                    <img src="gallery/2.jpg" alt="Image 02" />
                    </a>
                </li>
               </ul>
</div>

我的转发器代码就像这样

<div id="gallery">
          <asp:repeater id="repeater1" runat="server">
              <itemtemplate>
                  <asp:Image ID="Image1" runat="server" ImageUrl='<%# Eval("ImageThumbPath") %>' 
                  Width="100px" Height="80px" alt='<%#Eval("ImageName") %>' style="cursor:pointer" />
              </itemtemplate>                  
          </asp:repeater>
      </div>

我的数据库包含字段 ImageName ImageThumbPath ImageTitle ImageDescription

我怎样才能实现这个目标

2 个答案:

答案 0 :(得分:2)

ul中开始您的HeaderTemplate标记,li中的ItemTemplate将添加ul中的FooterTemplate并关闭游览<div id="gallery"> <asp:Repeater id="repeater1" runat="server"> <HeaderTemplate> <ul> </HeaderTemplate> <ItemTemplate> <li> <h5><%# Eval("ImageTitle") %></h5> <a href="<%# Eval("ImageThumbPath") %>"> <asp:Image ID="Image1" runat="server" ImageUrl='<%# Eval("ImageThumbPath") %>' /> </a> </li> </ItemTemplate> <FooterTemplate> </ul> </FooterTemplate> </asp:Repeater> </div> 标记。如下所示:

{{1}}

答案 1 :(得分:0)

您想要重复ItemTemplate中每个项目需要发出的所有Html,以及转发器外部的静态包装器部分,例如:

<div id="gallery">
  <ul>
    <asp:Repeater ID="repeater1" runat="server">
        <ItemTemplate>
          <li>
            <h5><%# Eval("ImageTitle") %></h5>
             <a href="<%# Eval("ImageThumbPath") %>">
               <asp:Image ID="Image1" runat="server" ImageUrl='<%# Eval("ImageThumbPath") %>' 
                   Width="100px" Height="80px" alt='<%#Eval("ImageName") %>' />
             </a>
          </li>
        </ItemTemplate>                  
    </asp:Repeater>
  </ul>
</div>

请注意代码中控件的大小写问题。