Question

您好我正在尝试使用两个阵列制作转发器，但我不知道该怎么做或者是否可能。我想要完成的是得到这个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>

li标签必须动态生成。更具体一点我希望imgs src从第二个列表中获取元素，数据大从第一个列表中获取元素，数据描述从文件名中获取文件名第一个或第二个。并为每次迭代生成li标签。这是背后的代码：

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

在我使用控件制作标签之前，但是使用这个html我无法实现这一点。我不知道如何将属性添加到内部img标签。如果有人可以帮助我进行控制或给我一些关于如何使转发器采用多个阵列的指示，那将会有很大的帮助。如果可以用控件制作它会更好，但任何解决方案都是好的。提前谢谢。

对不起我昨晚真的很累的错误。

Answer 1

以下代码已经过调试并且运行正常！

代码隐藏：

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>

我不确定您要从哪里检索描述，但您可以使用它从目录中获取ID：

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

Answer 2

这是我将如何做到的。

首先，我要添加一个类：

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

在我的页面中，每当我需要对转发器进行数据绑定时，我会调用一个名为DataBind的方法。这是DataBind方法：

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

现在我的转发器有一个数据源是List。我可以在我的标记中获得所有属性。我的中继器看起来像这样：

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

当然我会在MyImage类中为alt，data-description添加属性，并在我的转发器中使用它们。

使用转发器创建无序列表

2 个答案: