c# - tutorial - ¿Cómo se muestra una lista de imágenes, desde una carpeta en el disco duro, en el sitio web ASP.NET?
dal mvc c# (3)
Estoy tratando de hacer un sitio web simple galería de fotos. Usando ASP.NET y C #. En este momento no tengo un servidor configurado, pero solo estoy usando uno de desarrollo que Visual Studio comienza cuando usted hace un proyecto de sitio web y lo ejecuta.
Tengo una carpeta en mi disco duro que contiene una cantidad desconocida de imágenes. Quiero escribir un fragmento de código que recorra cada imagen y las agregue a la página web predeterminada. He intentado este código pero no funciona. ¿Qué estoy haciendo mal? ¿Debo usar un control ListView o un DataView o algo así? ¿Debo agregar un directorio virtual para acceder a las imágenes? Si es así, ¿cómo hago eso en este servidor de prueba?
TAMBIÉN, ¿cómo configuro la posición y la alineación de estas imágenes? Por ejemplo, ¿cómo lo haría para que las imágenes estén en una línea vertical y centrada en la página web?
protected void Page_Load(object sender, EventArgs e)
{
string[] filesindirectory = Directory.GetFiles(@"C:/Users/Jordan/Desktop/Web Images");
int i = 1;
foreach (string s in filesindirectory)
{
Image img = new Image();
img.ID = "image" + i.ToString();
img.ImageUrl = s;
img.Visible = true;
Page.Controls.Add(img);
i++;
}
}
Está creando un elemento <img> con una URL de C:/Users/Jordan/Desktop/Web Images/SomeImage.jpg . Obviamente, eso no funcionará en un navegador web.
Debe copiar las imágenes en una subcarpeta de su proyecto y establecer la URL en una URL relativa, como esta:
img.ImageUrl = "~/Web Images/" + Path.GetFileName(s);
(Suponiendo que la carpeta Web Images es una subcarpeta de la raíz de la aplicación)
Primero necesita colocar las imágenes que desea mostrar debajo del árbol web. Supongamos que lo ha hecho y están en una carpeta llamada Imágenes. A continuación, puede usar un control Repeater para mostrarlos mediante el enlace de datos de la siguiente manera:
Algo como esto...
<asp:Repeater ID="RepeaterImages" runat="server">
<ItemTemplate>
<asp:Image ID="Image" runat="server" ImageUrl=''<%# Container.DataItem %>'' />
</ItemTemplate>
</asp:Repeater>
Y luego en tu código detrás:
protected void Page_Load(object sender, EventArgs e)
{
string[] filesindirectory = Directory.GetFiles(Server.MapPath("~/Images"));
List<String> images = new List<string>(filesindirectory.Count());
foreach (string item in filesindirectory)
{
images.Add(String.Format("~/Images/{0}", System.IO.Path.GetFileName(item)));
}
RepeaterImages.DataSource = images;
RepeaterImages.DataBind();
}
Esto básicamente crea una matriz de imágenes con su ruta completa desde el directorio. A continuación, crea una lista de cadenas que contienen la ruta virtual a la imagen. A continuación, vincula esa lista al repetidor, que muestra cada elemento en su plantilla, que es un control de imagen que utiliza la ruta como ImageUrl. Es rapid''n''dirty, pero funciona y debería ser un buen punto de partida.
Por ejemplo
Debe tener una forma de especificar dónde se almacenarán sus imágenes en su aplicación. Por lo tanto, necesita un archivo de configuración web con la ruta de acceso. O si quieres ser realmente creativo, puedes almacenarlo en una base de datos ....
En su página web
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Images.aspx.cs" Inherits="ImageViewer" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Viewer Demo</title>
<link href=''styles.css'' rel=''stylesheet'' type=''text/css'' />
</head>
<body>
<form id="form1" runat="server">
<div id="outer">
<h2>Viewer Demo</h2>
<br />
<div style="clear:both;">
<h4>Using Viewer with the Repeater Control</h4>
<p>Repeater control to display a collection of images.</p>
</div>
<div style="clear:both;">
<asp:Repeater ID="RepeaterImages" runat="server">
<ItemTemplate>
<asp:Image ID="Image" runat="server" ImageUrl=''<%# Container.DataItem %>'' />
</ItemTemplate>
</asp:Repeater>
</div>
<br />
</div>
</form>
</body>
</html>
En su web.config
<appSettings>
<add key="FilePath" value="~/images"/>
</appSettings>
y En su código detrás del archivo .cs Realmente necesita filtrar archivos, de esa manera si alguien (tal vez usted;)) coloca archivos erróneos en él, no los incluirá inadvertidamente ...
string filters = "*.jpg;*.png;*.gif";
string Path = ConfigurationManager.AppSettings["FilePath"].ToString();
List<String> images = new List<string>();
foreach (string filter in filters.Split('';''))
{
FileInfo[] fit = new DirectoryInfo(this.Server.MapPath(Path)).GetFiles(filter);
foreach (FileInfo fi in fit)
{
images.Add(String.Format(Path + "/{0}", fi));
}
}
RepeaterImages.DataSource = images;
RepeaterImages.DataBind();