Question

我有这个HTML页面，它创建了一个库并显示它。现在的问题是，我想根据用户点击更改目录以拍摄照片。所以，首先我创建一个导航栏，其中每个文件夹都是一个按钮。然后，我必须抓住用户单击并将他选择的目录名称（@dir.name）放在Url.Content和Server.MapPath中（替换'???'）。关于如何做到这一点的任何想法？提前谢谢。

<div class="collapse navbar-collapse" id="myNavbar">
                <ul class="nav navbar-nav">
                    @foreach (var dirPath in Directory.GetDirectories(Server.MapPath("~/Images/Customers/A")))
                    {
                        var dir = new DirectoryInfo(dirPath);
                        <li id="@dir.Name"><a href="#">@dir.Name</a></li>
                    }
                </ul>
            </div>
        </div>
    </nav>

    <div class="preload"></div>
    <div class="gallery">
        <div class="container-fluid">
            <div class="row">
                @foreach (var imgPath in Directory.GetFiles(Server.MapPath("~/Images/Customers/A/???"), "*.jpg"))
                {
                    var img = new FileInfo(imgPath);
                    <div class="col-md-3 batas">
                        <a href="@Url.Content(String.Format("~/Images/Customers/A/???/{0}", img.Name))"><img src="@Url.Content(String.Format("~/Images/Customers/A/???/{0}", img.Name))" data-lity class="img-thumbnail" /></a>
                    </div>
                }
            </div>
        </div>
    </div>

整页在这里：https://github.com/ohadki/ShmuliksProject/blob/master/ShmuliksProject/Views/Home/CustomerGallery.cshtml

Answer 1

如果要在用户单击其中一个文件夹名称链接时更新图像，则需要执行一些C＃代码，该代码获取当前单击的链接（目录名称）并使用File.IO获取其下的文件api＆＃39; s并使用文件名来构建图像标签。

我将创建一个单独的动作方法来做到这一点。此操作方法将接受目录名称（由用户选择）并获取其下的文件，获取文件名并构建映像的路径

public ActionResult GetImages(string directory)
{
    var urlPath = Path.Combine(Url.Content("~/Images/Customers/A/"), directory);
    var pathDir = Server.MapPath(urlPath);
    var files = new List<string>();
    if(Directory.Exists(pathDir))
    {

        var fileNames= Directory.GetFiles(pathDir, "*.jpg")
                                .Select(g=>Path.GetFileName(g));
        var fileUrls=fileNames.Select(a => urlPath +"/"+ a);
        files.AddRange(fileUrls);
    }
    return PartialView("_Images", files);
}

你可以看到我们的action方法是将一个字符串列表传递给局部视图，所以让我们创建一个名为_Images.cshtml的局部视图，它强烈地键入一个字符串列表并写一些代码循环遍历此集合并呈现图像标记

@model List<string>
<div class="container-fluid">
    <div class="row">
        @foreach (var imgPath in Model)
        {
            <div class="col-md-3 batas">
                <a href="@imgPath">
                    <img src="@imgPath" data-lity class="img-thumbnail" />
                </a>
            </div>
        }
        </div>
</div>

使用此代码，您可以尝试通过转到url（在查询字符串中传递目录名称）来访问action方法，并查看它是否呈现图像。

yourSiteBaseUrl/yourControllerName/GetImages?directory=profile

假设profile是"~/Images/Customers/A/

下的目录名称

如果这么多代码有效，下一步就是处理链接上的click事件。我们将在a标签上连接点击事件并停止默认行为（导航），获取所需信息（目录名称）并对我们的操作方法进行ajax调用，该方法将返回部分视图结果我们想要并更新UI

在下面的代码段中，我为每个data-img-url标记添加了a属性，它的值将是具有目录名称的GetImages操作方法的相对路径在查询字符串中。

<div class="collapse navbar-collapse" id="myNavbar">
    <ul class="nav navbar-nav">
        @{ var path = Server.MapPath("~/Images/Customers/A"); }
        @foreach (var dirPath in Directory.GetDirectories(path))
        {
            var dir = new DirectoryInfo(dirPath);
            <li>
                 <a href="#" 
                    data-img-url="@Url.Action("GetImages",
                                  new { directory = dir.Name })">@dir.Name</a>
           </li>
        }
    </ul>
</div>
<div id="gallery" class="gallery"></div>

现在我们的UI标记已准备就绪，让我们编写一些jQuery代码来连接click事件，然后进行ajax调用。在下面的代码片段中，我使用jQuery load方法进行ajax调用并更新DOM

<script>
    $(function () {
        $("a[data-img-url]").click(function (e) {
            e.preventDefault();
            var url = $(this).data("img-url");
            $("#gallery").load(url);
        })
    })

</script>

这是基本的想法。您可以对代码片段进行改进，使其更加健壮（空检查，字符串连接等）

根据用户在HTML MVC中单击更改Url.Content

1 个答案: