Creating an unordered list with repeater

Question

Hi i am trying to make a repeater with two arrays, but i don't know how to do it or if its possible. What i am trying to accomplish is to get this html:

 <ul>
           <asp:Repeater ID="Repeater1" runat="server">
                   <ItemTemplate>
                      <li><a href="#"><img src="images/gallery/thumbs/2.jpg" data-large="<%# Container.DataItem %>" alt="image02" data-description="A plaintful story from a sistering vale" /></a>
                      </li>
                      ...       
                   </ItemTemplate>
            </asp:Repeater>

 </ul>

The li tags have to be generated dynamically.To be more specific i want the imgs src to take elements from second list, data large to take the elements from the first list and data description to take file name from the element of the first or second.And to generate li tag for every iteration. This is the code behind:

        string[] original = Directory.GetFiles(Server.MapPath(@"images\gallery\projects\original\"));
        string[] thumbs = Directory.GetFiles(Server.MapPath(@"images\gallery\projects\thumbs\"));

        List<string> originalL = new List<string>();

        foreach (string s in original)
        {
            originalL.Add("images/gallery/projects/original/" + Path.GetFileName(s));
        }
        Repeater1.DataSource = originalL;
        Repeater1.DataBind();

Before i have used controls to make tags but with this html i cant achieve that. I don't know how to add the attributes to inner img tag.If someone can help me make the control or give me some pointers on how to make the repeater take multiple arrays it will be of great help. If it could be made with controls it would be better , but any solution is good. Thanks in advance.

P.s sorry for the mistakes i was really tired last night.

Answer 1

Here's how I would do it.

First, I would add a class:

public class MyImage
{
    public string ImageThumb { get; set; }
    public string ImageOriginal { get; set; }
    //Add other properties if needed
}

In my page whenever I need to databind the repeater, I would call a method named DataBind. And here's the DataBind method:

protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack)
    {
        DataBind();
    }
}
private void DataBind()
{
    string[] original = Directory.GetFiles(Server.MapPath(@"images\gallery\projects\original\"));
    string[] thumbs = Directory.GetFiles(Server.MapPath(@"images\gallery\projects\thumbs\"));

    List<MyImage> originalL = new List<MyImage>();

    for(int i = 0; i < original.Length; i++)
    {
        if (i < thumbs.Length)
        {
            MyImage img = new MyImage();
            img.ImageOriginal = string.Format("images/gallery/projects/original/{0}", Path.GetFileName(original[i]));
            img.ImageThumb = string.Format("images/gallery/projects/thumbs/{0}", Path.GetFileName(thumbs[i]));
            //Add other properties if needed
            originalL.Add(img);
        }                
    }
    Repeater1.DataSource = originalL;
    Repeater1.DataBind();
}

Now my repeater has a datasource which is List. I can get all properties in my markup. My Repeater looks like this:

<asp:Repeater ID="Repeater1" runat="server">
    <HeaderTemplate>
        <ul>
    </HeaderTemplate>
    <ItemTemplate>
        <li><a href="#">
            <img src='<%#Eval("ImageThumb") %>'
                data-large='<%#Eval("ImageOriginal") %>' alt="image02"
                data-description="A plaintful story from a sistering vale" /></a>
        </li>
    </ItemTemplate>
    <FooterTemplate>
        </ul>
    </FooterTemplate>
</asp:Repeater>

Of course I would add properties for alt, data-description in MyImage class and use them in my repeater.

Answer 2

The following code has been debugged and works perfectly!

Codebehind:

public partial class WebForm1 : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        List<Image> ImageList = new List<Image>();

        Image Image1 = new Image();
        Image1.ID = 1;
        Image1.Description = "From off a hill whose concave womb reworded";

        Image Image2 = new Image();
        Image2.ID = 2;
        Image2.Description = "A plaintful story from a sistering vale";

        ImageList.Add(Image1);
        ImageList.Add(Image2);

        Repeater1.DataSource = ImageList;
        Repeater1.DataBind();
    }
}

class Image
{
    public int ID { get; set; }
    public string Description { get; set; }
}

HTML:

<ul>
<asp:Repeater ID="Repeater1" runat="server">
    <ItemTemplate>
        <li><a href="#"><img src="images/gallery/thumbs/<%# DataBinder.Eval(Container.DataItem, "ID") %>.jpg" data-description="<%# DataBinder.Eval(Container.DataItem, "Description") %>" /></a></li>
    </ItemTemplate>
</asp:Repeater>
</ul>

I am unsure where you are going to retrieve the descriptions from, but you can use this to get the IDs from a directory:

string[] images = Directory.GetFiles(Server.MapPath("~/Images/Gallery/Projects/Original"));
foreach (string s in images)
{
    Image NewImage = new Image();
    NewImage.ID = int.Parse(Path.GetFileNameWithoutExtension(s));
}