超级简单的照片画廊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

巴特西

超级简单的照片画廊MVC

最新文章

热门文章