MVC 的超级简单的照片库

• 下载 Gallery.zip - 23.5 MB

引言

我想为我的个人网站添加一个简单的图片库，但找不到合适的方法，大部分都是基于数据库而不是从文件夹中选择图片。也许我应该再仔细找找！无论如何，这是我实现的一个照片库，它以最简单的方式从一个或多个文件夹中选择图片。

背景

我使用 Visual Studio 2017 以 MVC Asp.Net 4.6.2 应用程序的形式实现了这个功能。你可以根据你选择的框架版本进行调整，也可以提取到 Web Forms 应用程序中。我没有为那种情况进行测试，但经过一些小的修改，应该可以工作。

另外请注意，该应用程序使用了 jquery 和 bootstrap，但除此之外没有太多其他依赖。

使用代码

好的，我们开始吧！

首先要做的就是打开附件的项目并检查代码。在大多数情况下，它相当直接，你应该能够将执行工作的代码片段提取到你自己的应用程序中 - 这是设计得尽可能的简单。

这是怎么回事...

如果你还没有一个想要应用这个库的应用程序，你应该打开你选择的 Visual Studio 并创建一个 MVC Web 应用程序。你可以接受默认设置，因为这不会影响接下来的内容。

首先，我们需要创建一个文件夹来存放我们的图片。我将其命名为“Photos”。在其下，我创建了一个名为“Other”的子文件夹。你可以在主文件夹下创建任意数量的子文件夹，但这可能会使跟踪变得混乱。记住，这是一个简单的解决方案，而不是一个企业级的图片库解决方案！

“Photos”文件夹存放了我所有的默认图片；也就是我想立即显示的图片，而其他文件夹则包含图片的子集或你需要逐级深入才能访问的图片。

现在我们需要一个类来存放所有的图片 - 我称之为“Photos”（显然，我缺乏想象力）。

		public string Path { get; set; }

		public string Description { get; set; }

		public Photos(string path, string description)
		{
			Path = path;
			Description = description;
		}

这里没有什么特别之处；我们需要获取其位置的路径和一些描述性文本。

接下来，我们需要一种方法将图片导入模型（类），以便我们可以将适当的图片集传递给视图。

一种合理的方法是创建一个继承自我们模型列表的类，例如：

public class PhotoModel : List<Photos>

在构造函数中，我们可以导航到给定文件夹并枚举该文件夹中的所有文件。

public PhotoModel(string folder)

这会将文件夹解析为 `DirectoryInfo` 对象，使我们能够枚举文件夹，并确保我们只访问给定的文件夹，而不访问其下存在的任何文件夹...

foreach (var file in di.EnumerateFiles("*.jpg", SearchOption.TopDirectoryOnly))

最后，将每个找到的文件添加到 <Photos> 对象中，使用：

var p = new Photos(string.Concat(folder, file.Name), Path.GetFileNameWithoutExtension(file.Name));
Add(p);

为了将所有这些内容发送到视图，我们需要向实例化该视图的 Controller 对象添加代码。

打开控制器并添加以下代码：

		public ActionResult Gallery(int id)
		{
			// Default.
			string folder = "~/photos/";

			switch (id)
			{
				case 1:
					folder = "~/photos/other/";
					break;
				case 0:
					folder = "~/photos/";
					break;
			}

			return View(new PhotoModel(folder));
		}

我强调过这很简单，因此这里将照片文件夹的路径硬编码了。你可以随意提取这部分代码，使其可配置，或者以你认为更合适的方式处理。无论如何，我们必须告诉 <PhotoModel> 我们希望它从中获取图片的路径。另外请注意，我们将一个整数作为 id 传递给方法，以告诉它使用哪个文件夹。同样，这很简单，但也可以将此作为字符串路径传递 - 任你选择。最后，调用视图，传递正确的模型。

从视觉上看...

好的，我们已经涵盖了所有代码，现在让我们看看视图。

首先，我们需要添加一个菜单选项来驱动页面 - 我们通过向 `Views/Shared/_Layout.cshtml` 添加一行来实现。

<li>@Html.ActionLink("Gallery", "Gallery", "Home", new { id = 0 }, null)</li>

请注意，我们通过告诉 Controller 我们想要显示默认库来预加载。如果你不这样做，将会出现严重错误。

现在在 `Views/Home` 下添加一个名为 `Gallery.cshtml` 的页面。这需要四样东西：

1. 添加 CSS 和 JavaScript
2. 切换文件夹的方法
3. 显示所有找到的图片的机制
4. 在弹出窗口中显示单个文件夹的机制

我们还需要包含一些 CSS 和 JavaScript，它们将为页面设置样式并使我们能够显示弹出窗口 - 文件名为 gallery.css 和 gallery.js。

你可以随意检查和更改 CSS，没有特别之处。JavaScript 只是显示一个否则隐藏的 `div`，将选定的图片放入一个新的图片控件中，并使用该图片的 alt 文本作为弹出窗口的描述性文本。

注意：如果你不喜欢在显示模态窗口时将页面变黑，你可以稍后在 gallery.css 中更改以下行（第 26 行）：

background-color: rgb(0, 0, 0);

例如，以下代码在我的屏幕上呈现出一种相当不错的黄橙色调：

background-color: rgb(255, 216, 0);

视图的主要部分是 `foreach` 循环，它将图片渲染到页面上，并从 <PhotoModel> 类中分配值。

在此下方是描述模态弹出窗口的 HTML 片段。

<div id="divimage" class="modal">
	<img class="modal-content" id="modalimg">
	<div id="caption"></div>
</div>

就是这样。附件的演示应该可以正常工作并可以编译。

关注点

对我来说效果很好 - 如果这不够复杂，或者你需要从数据库加载图片，那么这个解决方案不适合你。

最后

我确信这还有改进的空间，但它已经满足了我的要求，特别是考虑到它花费的时间并不长。尽情享受吧！

历史

v1 - 初始版本和最终版本