一个简单的 ASP.NET AJAX 图片浏览器
4.07/5 (11投票s)
一篇关于使用 ASP.NET 和 AJAX 在网页上显示图片浏览器的文章。
引言
我使用 ASP.NET 和 ASP.NET AJAX 编写了一个图片浏览器页面，用于检索服务器上的图片信息。图片使用单个 ASPX 页面和包含 JPG 文件的文件夹显示。代码后端使用 C# 编写。不涉及数据库。
背景
我的目标是在网页上向我的家人展示一些照片，并希望在几个小时内完成。我希望在不使用数据库、不使用标题、不使用描述、不使用标签等的情况下做到这一点。但是，我将拍摄日期作为文件名的一部分包含在内，因为它提供了一种在不使用数据库的情况下保留一些信息的方式。
使用代码
代码后端 (C#)
我首先创建了一个 ASPX Web 表单，并在代码后端编写了一个静态 Web 方法来返回服务器上图片的信息
[WebMethod]
public static Image[] GetImages()
{
// The virtual path to the image folder:
// (in this case a folder that contains some photos)
string imageFolderVirtualPath = "~/Photos/";
string imageFolderPath = HttpContext.Current.Server.MapPath(imageFolderVirtualPath);
List<image> images = new List<image>();
DirectoryInfo diImages = new DirectoryInfo(imageFolderPath);
// Only *.jpg files are included in this case:
foreach (FileInfo fiImage in diImages.GetFiles("*.jpg"))
{
string fileName = fiImage.Name;
// If the file name starts with the DateTime pattern yyyy-MM-dd,
// the date is parsed from that:
string date = string.Empty;
int year = 0;
int month = 0;
int day = 0;
if (fileName.Length > 9 && Int32.TryParse(fileName.Substring(0, 4), out year)
&& Int32.TryParse(fileName.Substring(5, 2), out month)
&& Int32.TryParse(fileName.Substring(8, 2), out day))
{
date = new DateTime(year, month, day).ToLongDateString();
}
images.Add(new Image
{
Date = date,
VirtualPath = CombineVirtualPaths(imageFolderVirtualPath, fileName)
});
}
return images.ToArray();
}
一个辅助方法组合虚拟路径
private static string CombineVirtualPaths(string virtualPath1, string virtualPath2)
{
return string.Format("{0}/{1}", virtualPath1.Trim('~', '/'), virtualPath2.Trim('/'));
}
一个辅助类提供关于图片的的信息
public class Image
{
/// <summary>
/// The virtual path to the image file
/// </summary>
public string VirtualPath { get; set; }
/// <summary>
/// The date as a string
/// </summary>
public string Date { get; set; }
}
HTML/ASPX 标记
在 *.aspx 文件中，我具有以下标记
<body onload="GetImages();">
<form id="form1" runat="server">
<asp:ScriptManager id="sm1" runat="server"
EnablePageMethods="true" EnableScriptGlobalization="true">
</asp:ScriptManager>
<div>
<div id="divButtons" style="float: left;">
</div>
<div id="divImage" style="float: left;">
</div>
</div>
</form>
</body>
JavaScript
页面加载时，会触发一个 JavaScript 方法，该方法从页面方法检索信息
// Information about the Images:
var images;
// The index of the currently shown Image:
var currentImageIndex = 0;
// Calls the page method to obtain information about the Images:
function GetImages() {
PageMethods.GetImages(GetImagesCompleted);
}
// The call-back where information about the images is returned:
function GetImagesCompleted(result) {
images = result;
ShowImage();
}
// Shows the Image:
function ShowImage() {
var currentImage = images[currentImageIndex];
var date = currentImage.Date;
var imgImage = "<img id='imgImage' alt='" + date +
"' title='" + date + "' src='" +
currentImage.VirtualPath "' />";
var dp = document.getElementById("divImage");
dp.innerHTML = imgImage;
document.title = date;
ShowButtons();
}
一个单独的 JavaScript 方法显示适当的导航按钮
// Shows the buttons:
function ShowButtons() {
// Gets localized texts (English or Danish) for the buttons.
// This only works with the following two settings:
// - The ScriptManager on this page must have:
/// EnableScriptGlobalization="true"
// - web.config must have:
// <globalization culture="auto"> (in <system.web> section)
// The default English texts:
var first = "First";
var previous = "Previous";
var next = "Next";
var last = "Last";
if (Sys.CultureInfo.CurrentCulture.name.toLowerCase().startsWith("da")) {
// The Danish texts:
first = "Første";
previous = "Forrige";
next = "Næste";
last = "Sidste";
}
var button1 = "<div><input type='button' style='width: 75px;'";
var btnFirst = button1 + " value='" + first +
"' onclick='ShowFirstImage();'";
var btnPrevious = button1 + " value='" + previous +
"' onclick='ShowPreviousImage();'";
var btnNext = button1 + " value='" + next +
"' onclick='ShowNextImage();'";
var btnLast = button1 + " value='" + last +
"' onclick='ShowLastImage();'";
if (currentImageIndex == 0) {
btnFirst += " disabled='disabled'";
btnPrevious += " disabled='disabled'";
}
if (currentImageIndex == images.length - 1) {
btnNext += " disabled='disabled'";
btnLast += " disabled='disabled'";
}
var button2 = " /></div>";
btnFirst += button2;
btnPrevious += button2;
btnNext += button2;
btnLast += button2;
var db1 = document.getElementById("divButtons");
db1.innerHTML = btnFirst + btnPrevious + btnNext + btnLast;
}
// Shows the first Image:
function ShowFirstImage() {
currentImageIndex = 0;
ShowImage();
}
// Shows the previous Image:
function ShowPreviousImage() {
if (currentImageIndex > 0) {
currentImageIndex -= 1;
ShowImage();
}
}
// Shows the next Image:
function ShowNextImage() {
if (currentImageIndex < images.length - 1) {
currentImageIndex += 1;
ShowImage();
}
}
// Shows the last image:
function ShowLastImage() {
currentImageIndex = images.length - 1;
ShowImage();
}
关注点
- 一个有用的应用程序，构建在一个单独的 Web 表单和一个包含图片的文件夹中。
ScriptManager上的EnableScriptGlobalization功能以及使用Sys.CultureInfo.CurrentCulture.name在 JavaScript 中提取语言信息的能力。