时间戳

首页 > 解决方案 > Asp.net c#显示文件夹中的图像

c# - Asp.net c#显示文件夹中的图像

问题描述

我有一个静态网站，目前我正在尝试使其成为一个动态网站。里面有很多图片。我用简单的 html 代码调用它们。同时，还有很多 css 和 boostrap 代码应用在它们上面。我想不出我如何调用文件夹中的所有照片并动态应用我的 css、boostrap 代码。

我的 html 网站中的照片存储在这些代码中

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

这是我试图调用我的照片的代码隐藏。它正在工作，我可以在数据网格上调用照片，但没有应用 css 代码。我想对屏幕上的图片进行排序，而不是将它们保存在数据网格中。并像在我的 html 代码中一样使用我的 css 类。

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

这是前端代码

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

标签： c#cssasp.net

解决方案

使用DataList代替GridView，它更适合这个：

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

并且您需要设置RepeatDirection="Horizontal"为水平显示图像。

推荐阅读