CODEWITHSUNDEEP
htmlasp.net
Jinesh Sam
Jinesh Sam

Reputation: 111

How to format repeater control with ul and li tags

i need to format the aspx like this with the help of repeater control

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

My repeater code is like this

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

My Database contain fields ImageName ImageThumbPath ImageTitle ImageDescription

How can i achieve this

Upvotes: 2

Views: 4122

Answers (2)

StuartLC
StuartLC

Reputation: 107267

You'll want to repeat all of the Html which needs to be emitted for each item in the ItemTemplate, and the static wrapper part outside of the repeater, something like:

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

Note the capitalization issues with the controls in your code.

Upvotes: 0

Pawan
Pawan

Reputation: 1744

Start your ul tag in HeaderTemplate and li will be added in ItemTemplate and close tour ul tag in FooterTemplate..like shown below:

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

Upvotes: 2

Related Questions