超级简单的照片画廊MVC

• 下载Gallery.zip - 23.5 MB

介绍 我想在我的个人网站上添加一个简单的图片库，但找不到任何合适的方法来从文件夹而不是数据库中挑选图片。也许我应该看得更仔细些!尽管如此，下面是我实现的一个图片库，它从一个或多个文件夹中选取图像，并以尽可能简单的方式实现。 背景 我已经在Visual Studio 2017实现了这个MVC Asp。净4.6.2应用程序。您可以自由地适应所选择的框架版本，并根据需要提取到web-forms应用程序中。我还没有测试过这种情况，但是通过一些小的插件，它应该可以工作。 还请注意，该应用程序使用jquery和引导程序，但没有其他内容。 使用的代码 好了，我们开始吧! 首先要做的是打开附加的项目并检查代码。在大多数情况下，它是相当直接的，你应该能够提取的比特，以完成工作到您自己的应用程序-这是设计尽可能简单。 怎么回事… 如果您还没有一个应用程序，您希望将图库应用到其中，您应该打开您的Visual Studio选择并创建一个MVC web应用程序。您可以接受默认值，因为它不会影响接下来的操作。 第一件事是创建一个文件夹来存储我们的图像。我把我的名字命名为“Photos”。在这下面，我创建了一个名为“Other”的子文件夹。你可以在主文件夹下创建任意数量的子文件夹，尽管这样做可能会很麻烦。请记住，这是一个简单的解决方案，而不是企业级的图片库解决方案! “Photos”文件夹保存了我所有的默认图片;那些我想立即显示的文件夹，而其他文件夹包含图像的子集或需要钻取才能看到的图像。 现在我们需要一个类来保存所有的图像—我将其命名为“Photos”(显然，我缺乏想象力)。 隐藏,复制Code

public string Path { get; set; }

public string Description { get; set; }

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

没什么神奇;我们需要获得其位置的路径和一些描述性文本 接下来，我们需要一种方法将图像放入模型(类)中，以便将适当的图像集传递给视图。 一个合理的方法是创建一个继承模型列表的类，如下所示: 隐藏,复制Code

public class PhotoModel : List<Photos>

在构造函数中，我们可以导航到一个给定的文件夹并枚举该文件夹中的所有文件。 隐藏,复制Code

public PhotoModel(string folder)

在将文件夹解析为DirectoryInfo对象后，它允许我们枚举文件夹，确保我们只命中给定的文件夹，并且它下面不存在文件夹… 隐藏,复制Code

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

最后，将每个找到的文件添加到photo & gt;对象与 隐藏,复制Code

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

为了将所有这些都放到视图中，我们需要向实例化视图的控制器对象添加代码: 打开控制器，添加以下代码: 隐藏,复制Code

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中添加一行来实现。 隐藏,复制Code

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

注意，我们是通过告诉控制器我们想要显示默认图库来预加载的。如果你不这样做，它会变得非常糟糕。 现在在Views/Home下添加一个名为Gallery.cshtml的页面。这需要四件事: 添加css和javascript一种方法来切换文件夹，一种方法来显示所有发现的图像，一种方法来显示单独的文件夹在弹出窗口 我们还需要包含一些css和javascript，它们将设计页面的样式，并赋予我们显示弹出窗口的能力——这些文件称为gallery.css和gallery.js。 您可以自由地检查和修改css，没有什么不可思议的。javascript只是显示一个隐藏的div，将选中的图像弹出到一个新的图像控件中，并在弹出窗口中使用该图像的alt文本作为描述性文本。 注意:如果你不喜欢我在显示模态时将页面涂黑，你可以稍后在galler .css中使用以下行(第26行): 隐藏,复制Code

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

例如，下面给出了一个相当漂亮的黄橙色阴影(在我的屏幕上): 隐藏,复制Code

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

视图的主要部分是foreach循环，它将图像呈现到页面中，并分配来自PhotoModel>的值。类。 下面的描述模态弹出的html片段: 隐藏,复制Code

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

就是这样。所附的演示程序应该可以正常工作并可编译。 的兴趣点 它很适合我-如果这不是足够复杂或你需要从数据库加载图像，这个解决方案不适合你。 最后 我确信这可以改进，但它满足了我的要求，因为它的立场，特别是因为它没有花太长的时间，把它拉在一起。享受吧! 历史 初始版和最终版 本文转载于：http://www.diyabc.com/frontweb/news19331.html