Creating an unordered list with repeater

asp.netwebforms

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.

Best Solution

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));
}

Related Solutions

Javascript – Change the selected value of a drop-down list with jQuery

jQuery's documentation states:

[jQuery.val] checks, or selects, all the radio buttons, checkboxes, and select options that match the set of values.

This behavior is in jQuery versions 1.2 and above.

You most likely want this:

$("._statusDDL").val('2');

R – How to display an image in a repeater or grid control

First off, I need to say that storing the thumbnails on the server would probably be much more efficient than this solution. Some of the principles in this code would be usable for creating these thumbnails as the images are uploaded. That would probably be a better way to go.

That being said, here is a possible solution. This was hacked together really quickly, but it does work. I use something similar to serve up attachments from a database. Create a new ashx page as follows:

<%@ WebHandler Language="C#" Class="Handler" %>

using System;
using System.Web;
using System.Drawing;
using System.IO;
using System.Drawing.Imaging;

public class Handler : IHttpHandler
{
    public void ProcessRequest(HttpContext context)
    {
        Bitmap b = new Bitmap(@"c:\temp\pictures\" + context.Request.QueryString["filename"]);

        Image i = b.GetThumbnailImage(48, 48, null, System.IntPtr.Zero);

        using (MemoryStream ms = new MemoryStream())
        {
            i.Save(ms, ImageFormat.Jpeg);
            context.Response.BinaryWrite(ms.ToArray());
        }

        context.Response.ContentType = "image/jpeg";
    }

    public bool IsReusable
    {
        get
        {
            return false;
        }
    }
}

This will find a file who's name is passed in from the query string and create the thumbnail and use a memory stream to display the image. You will obviously have to adjust for path, error handling, ensuring mime types are correct, etc.

Once you have this complete, you can use this URL (something like http://localhost/Handler.ashx?filename=myFirstImage) in a repeater to generate your thumbnails.

Best Solution

Related Solutions

Javascript – Change the selected value of a drop-down list with jQuery

R – How to display an image in a repeater or grid control

Related Question