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

您可以看到我们的操作方法是将字符串列表传递给分部视图，因此让我们创建一个名为_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(在查询字符串中传递目录名称)来访问操作方法，并查看它是否呈现图像。

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 调用。在下面的代码片段中，我使用 jQueryload方法来进行 ajax 调用并更新 DOM

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

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