根据用户单击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);
}

您可以看到我们的action方法正在将字符串列表传递给局部视图，因此让我们创建一个名为_Images.cshtml的局部视图，该视图被强类型_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标签上关联一个click事件，并停止默认行为（导航），获取所需的信息（目录名称），并对我们的action方法进行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代码来连接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>

这是基本思想。 您可以对代码段进行改进，使其更健壮（空检查，字符串串联等）