Avatar billede Martintb89 Nybegynder
23. november 2011 - 12:02 Der er 4 kommentarer og
1 løsning

Repeater - 5 billeder per linje?

Hej allesammen. Jeg er igang med at lave en hjemmeside.

På en af siderne skal jeg have en masse billeder på flere rækker med 5 billeder på hver række.

Jeg trækker billederne ud fra en database og prøver at hente dem ud i en repeater, men jeg kan ikke få det til at virke.
Den sætter det samme billede på hele rækken og det næste billede på hele rækken nedenunder osv.

Min kode ser sådan her ud:

<asp:Repeater ID="Repeater1" runat="server" DataSourceID="SqlDataSource1">
    <HeaderTemplate>
 
   
<table>
</HeaderTemplate>
<ItemTemplate>

<tr>

<td><%# Eval("id") %><br /><asp:Image ID="Image1" runat="server" ImageUrl='<%# Eval("stof_billede") %>' Width="120px" Height="120px"></asp:Image> </td> <td><%# Eval("id") %><br /><asp:Image ID="Image2" runat="server" ImageUrl='<%# Eval("stof_billede") %>' Width="120px" Height="120px"></asp:Image> </td> <td><%# Eval("id") %><br /><asp:Image ID="Image3" runat="server" ImageUrl='<%# Eval("stof_billede") %>' Width="120px" Height="120px"></asp:Image> </td> <td><%# Eval("id") %><br /><asp:Image ID="Image4" runat="server" ImageUrl='<%# Eval("stof_billede") %>' Width="120px" Height="120px"></asp:Image> </td> <td><%# Eval("id") %><br /><asp:Image ID="Image5" runat="server" ImageUrl='<%# Eval("stof_billede") %>' Width="120px" Height="120px"></asp:Image> </td>
</tr>
<tr>

<td><%# Eval("id") %><br /><asp:Image ID="Image6" runat="server" ImageUrl='<%# Eval("stof_billede") %>' Width="120px" Height="120px"></asp:Image> </td> <td><%# Eval("id") %><br /><asp:Image ID="Image7" runat="server" ImageUrl='<%# Eval("stof_billede") %>' Width="120px" Height="120px"></asp:Image> </td> <td><%# Eval("id") %><br /><asp:Image ID="Image8" runat="server" ImageUrl='<%# Eval("stof_billede") %>' Width="120px" Height="120px"></asp:Image> </td> <td><%# Eval("id") %><br /><asp:Image ID="Image9" runat="server" ImageUrl='<%# Eval("stof_billede") %>' Width="120px" Height="120px"></asp:Image> </td> <td><%# Eval("id") %><br /><asp:Image ID="Image10" runat="server" ImageUrl='<%# Eval("stof_billede") %>' Width="120px" Height="120px"></asp:Image> </td>
</tr>
<tr>

<td><%# Eval("id") %><br /><asp:Image ID="Image11" runat="server" ImageUrl='<%# Eval("stof_billede") %>' Width="120px" Height="120px"></asp:Image> </td> <td><%# Eval("id") %><br /><asp:Image ID="Image12" runat="server" ImageUrl='<%# Eval("stof_billede") %>' Width="120px" Height="120px"></asp:Image> </td> <td><%# Eval("id") %><br /><asp:Image ID="Image13" runat="server" ImageUrl='<%# Eval("stof_billede") %>' Width="120px" Height="120px"></asp:Image> </td> <td><%# Eval("id") %><br /><asp:Image ID="Image14" runat="server" ImageUrl='<%# Eval("stof_billede") %>' Width="120px" Height="120px"></asp:Image> </td> <td><%# Eval("id") %><br /><asp:Image ID="Image15" runat="server" ImageUrl='<%# Eval("stof_billede") %>' Width="120px" Height="120px"></asp:Image> </td>
</tr>
</ItemTemplate>




<FooterTemplate>

</table>

</FooterTemplate>

</asp:Repeater>

Hvordan skal det se ud ?
Avatar billede softspot Forsker
23. november 2011 - 12:25 #1
Hvis du benytter en enkelt repeater, skal du nok kun lave din itemtemplate for ét billede og så håndtere den formatering du vil have indenfor denne template.

Brugen af tabeller til formatering gør bare opgaven mere kompliceret, fordi du skal holde styr på hvormange billeder der er vist og selv indsætte et tr-slutelement, når der er vist 5 billeder. Desuden skal du tjekke for om der er flere billeder og indsætte et tr-startelement, hvis der er, samt håndtere afslutning af tabellen, hvis der f.eks. kun er 3 billeder i den sidste række... ikke umiddelbart trivielt.

Jeg vil da anbefale at du bruger div-elementer til hvert billede og så "floater" dem indenfor en container der har den ønskede bredde (så næste række selv "floater" ned under den forrige række).

Eksempel på en repeater med tabelstyret layout:

<% int cnt = 0 %>
<asp:Repeater ID="Repeater1" runat="server" DataSourceID="SqlDataSource1">
  <HeaderTemplate>
    <table>
      <tr>
  </HeaderTemplate>

  <ItemTemplate>
        <td>
          <%# Eval("id") %><br />
          <asp:Image runat="server"
              ImageUrl='<%# Eval("stof_billede") %>'
              Width="120px" Height="120px"></asp:Image>
        </td>
    <%=(++cnt % 5 == 0 ? "</tr><tr>" : "")%>
  </ItemTemplate>

  <FooterTemplate>
      </tr>
    </table>
  </FooterTemplate>
</asp:Repeater>

Jeg ved faktisk ikke om dette fungerer (og hvis det gør er det noget snask). Desuden vil du få en ekstra tr i de tilfælde hvor antallet af billeder går op i 5... men i princippet noget i den stil... :)
Avatar billede softspot Forsker
23. november 2011 - 12:39 #2
Jeg har lige en anden version som nok fungerer bedre (men jeg mener stadig ikke det er en optimal løsning, ej heller om det giver problemer at benytte Page.Items på denne måde):

<% Page.Items["cnt"] = 0; %>
<asp:Repeater ID="Repeater1" runat="server" DataSourceID="SqlDataSource1">
  <HeaderTemplate>
    <table>
      <tr>
  </HeaderTemplate>

  <ItemTemplate>
        <td>
          <%# Eval("id") %><br />
          <asp:Image runat="server"
              ImageUrl='<%# Eval("stof_billede") %>'
              Width="120px" Height="120px"></asp:Image>
        </td>
    <% int cnt = (int)Page.Items["cnt"]; cnt++; Page.Items["cnt"] = cnt; %>
    <%=(cnt % 5 == 0 ? "</tr><tr>" : "") %>
  </ItemTemplate>

  <FooterTemplate>
      </tr>
    </table>
  </FooterTemplate>
</asp:Repeater>
Avatar billede janus_007 Nybegynder
23. november 2011 - 17:52 #3
Hej Martin

Jeg ville bruge en datalist :)

<asp:DataList ID="DataList1" RepeatColumns="5" runat="server"
    DataSourceID="SqlDataSource1" EnableViewState="False">
    <ItemTemplate>
        <%# Eval("id") %><br />
          <asp:Image runat="server"
              ImageUrl='<%# Eval("stof_billede") %>'
              Width="120px" Height="120px"></asp:Image>
    </ItemTemplate>
</asp:DataList>

læs mere her om repeat columns : http://msdn.microsoft.com/en-us/system.web.ui.webcontrols.datalist.repeatcolumns.aspx
Avatar billede Martintb89 Nybegynder
23. november 2011 - 18:18 #4
Tusind tak det virkede nemt og hurtigt med en datalist :)
også tak til jer andre:)
Avatar billede janus_007 Nybegynder
23. november 2011 - 18:47 #5
Her er svar :)
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
IT-kurser om Microsoft 365, sikkerhed, personlig vækst, udvikling, digital markedsføring, grafisk design, SAP og forretningsanalyse.

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester