Search code examples
asp.netvb.nethtmlphotos

write within a div on page load in vb.net


I am new to programming and would like to write the following within a div (myGallerySet) from behind code (vb.net) on pageLoad:

 <div id="gallery1" class="galleryElement">
    <h2>Brugges 2006</h2>
    <div class="imageElement">
      <h3>Item 1 Title</h3>
      <p>Item 1 Description</p>
      <a href="#" title="open image" class="open"></a>
      <img src="images/brugges2006/1.jpg" class="full" />
      <img src="images/brugges2006/1-mini.jpg" class="thumbnail" />
    </div>
    <div class="imageElement">
      <h3>Item 2 Title</h3>
      <p>Item 2 Description</p>
      <a href="#" title="open image" class="open"></a>
      <img src="images/brugges2006/2.jpg" class="full" />
      <img src="images/brugges2006/2-mini.jpg" class="thumbnail" />
    </div>
  </div>
  <div id="gallery2" class="galleryElement">
    <h2>Stock Photos</h2>
    <div class="imageElement">
      <h3>Item 1 Title</h3>
      <p>Item 1 Description</p>
      <a href="#" title="open image" class="open"></a>
      <img src="images/stock/77196_6784.jpg" class="full" alt="Item 1 Title">
      <img src="images/stock/77196_6784_002.jpg" class="thumbnail" alt="thumbnail of Item 1 Title">
    </div>
    <div class="imageElement">
      <h3>Item 2 Title</h3>
      <p>Item 2 Description</p>
      <a href="#" title="open image" class="open"></a>
      <img src="images/stock/165392_5486.jpg" class="full" alt="Item 2 Title">
      <img src="images/stock/165392_5486_002.jpg" class="thumbnail" alt="thumbnail of Item 2 Title">
    </div>
  </div>

Basically I have images details which are stored in a database and would need to dynamically added hence, why i need to write within a div container.

Any ideas how I could achieve this? could you please give an example? any help would be greatly appreciated.

Thanks


Solution

  • You need to use a repeater (or some other databound control) and a datasoure. Not sure how your database is set up, but your SqlDataSource may look something like this:

    <asp:sqlDataSource ID="photosSqlDataSource" SelectCommand="SELECT imageName, imageUrl FROM images" />
    

    And then you need a control that can use the returned data and display it on the page:

    <asp:Repeater id="cdcatalog" runat="server">
        <HeaderTemplate>
            <table>
        </HeaderTemplate>
        <ItemTemplate>
            <tr>
                <td><img src="<%#Container.DataItem("imageUrl")%>" /></td>
            </tr>
            <tr>
                 <td><%#Container.DataItem("imageUrl")%></td>
            </tr>
        </ItemTemplate>
        <FooterTemplate>
            </table>
        </FooterTemplate>
    </asp:Repeater>