javascript - 根据用户在 HTML MVC 中的点击更改 Url.Content

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 并使用文件名构建图像标签。

我将创建一个单独的操作方法来执行此操作。此操作方法将接受目录名(用户选择的目录名)并获取目录下的文件，获取文件名和图像的构建路径

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);
}

您可以看到我们的操作方法正在将字符串列表传递给分部 View ，所以让我们创建一个名为 _Images.cshtml 的分部 View ，它是字符串列表的强类型并写入一些代码循环遍历这个集合并呈现图像标签

@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(在查询字符串中传递目录名称)来访问操作方法，并查看它是否呈现图像。

yourSiteBaseUrl/yourControllerName/GetImages?directory=profile

假设profile是"~/Images/Customers/A/下的一个目录名

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

在下面的代码片段中，我为每个 a 标签添加了一个 data-img-url 属性，它的值将是 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 代码来连接点击事件，然后进行 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>

这是基本思想。您可以改进代码片段以使其更健壮(空检查、字符串连接等)