Asp.net c# display images from folder

Question

I had a static webiste, currently I'm trying to make it a dynamic webiste. There are lots of images inside of it. I call them with simple html codes. At the same time, there are lots of css and boostrap codes applied on them. I couldn't figured that how can i call all the photos at the folder and apply my css, boostrap codes on them dynamicly.

My photos in my html site are stored in these codes

<div class="galeri-info">
    <div>
        <a href="/Images/resim1.jpeg" data-lightbox="galeri" data-title="App 1" class="link-preview" title="Preview"><i class="ion ion-eye"></i></a>
    </div>
</div>

And this is the codebehind im trying to call my photos. It's working i can call photos on datagrid but there are no css codes applied on them. I want to sort the pictures on the screen instead of holding them in the datagrid. And use my css clases as i do in my html code.

   protected void Upload(object sender, EventArgs e)
{
    if (FileUpload1.HasFile)
    {
        string fileName = Path.GetFileName(FileUpload1.PostedFile.FileName);
        FileUpload1.PostedFile.SaveAs(Server.MapPath("~/Images/") + fileName);
        Response.Redirect(Request.Url.AbsoluteUri);
    }
}


protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack)
    {
        string[] filePaths = Directory.GetFiles(Server.MapPath("~/Images/"));
        List<ListItem> files = new List<ListItem>();
        foreach (string filePath in filePaths)
        {
            string fileName = Path.GetFileName(filePath);
            files.Add(new ListItem(fileName, "~/Images/" + fileName));
        }
        GridView1.DataSource = files;
        GridView1.DataBind();
    }
}

This is the frontend code

<asp:FileUpload ID="FileUpload1" runat="server" /> 
<asp:Button ID="btnUpload" runat="server" Text="Upload" OnClick="Upload" />
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false" ShowHeader="false">
 <Columns>
    <asp:BoundField DataField="Text" />
    <asp:ImageField DataImageUrlField="Value" ControlStyle-Height="100" ControlStyle-Width="100" />
</Columns>
</asp:GridView>

Answer 1

Use DataList instead of GridView , it's more suitable for this:

<asp:DataList ID="dtlist" runat="server" RepeatDirection="Horizontal">
    <ItemTemplate>
        <asp:Label Text='<%# Eval("Text") %>' runat="server"></asp:Label>
        <asp:Image ImageUrl='<%# Eval("Value") %>' runat="server" Height="100" Width="100" />
        <span>-</span>
    </ItemTemplate>
</asp:DataList>

And you need to set RepeatDirection="Horizontal" to display images horizontally.