单击其中一张图像时，如何刷新局部视图中的图像列表？

Question

我的网页上包含一个部分视图，该视图按设定的顺序加载多个缩略图。单击缩略图时，我想重新加载列表，其中单击的缩略图成为第一个图像，然后按顺序排列列表的其余部分，而不重新加载网页的其余部分。

我的 PartialView 包含以下代码，用于加载缩略图并为每个缩略图分配一个 Url.Action。

<% foreach (var image in (ImageModel)ViewData.Model) { %>
    <a href='<%= Url.Action("ImageList", "ImageView", new { imageFolderName = image.Folder, imageFile = ImageHelper.GetImageName(image.Path) }, null) %>'>
    <img src="/images/<%= image.Path %>" height="<%=(image.Height/4).ToString() %>" width="<%=(image.Width/4).ToString() %>" alt=""  /></a>
<% }%>

我的控制器有一个 ActionResult，用于在加载包含页面时初始加载部分视图。我还包含了一个返回 PartialViewResult 的方法。

public class ImageViewController : Controller

    public ActionResult ImageView(string imageFolderName, string imageFile)
    {
        return View(new ImageModel(imageFolderName, imageFile));
    }

    public PartialViewResult ImageList(string imageFolderName, string imageFile)
    {
        return PartialView(new ImageModel(imageFolderName, imageFile));
    }

如果我将 Url.Action 设置为 ("ImageList", "ImageList"... 缩略图将按照我想要的方式刷新，但整个页面都会刷新，而不仅仅是刷新 当我将 Url.Action

设置为 ("ImageList", "ImageView"... 而不是刷新包含页面的部分视图时，包含页面消失了，部分页面消失了。也就是说，我在空白的白色网页上以正确的顺序看到了所有缩略图

，我无法理解任何有关 PartialViews 的 jQuery 或 Ajax 问答。 什么好处呢

如果控制器方法加载一个新网页而不是仅仅刷新其包含的页面中的部分视图，

那么它有 ？完成了吗？

Answer 1

链接通常会导致整个页面刷新，您需要使用 ajax 来刷新页面的一部分。

我将继续执行以下操作：

这将是几乎相同的代码，此处的更改是它调用您的原始 ImageView 操作。我添加了一个名为 image 的 css 类。另外，我在图像周围添加了一个 div（可能您已经有了）并将其命名为 allmypics

<div id="allmypics">
<% foreach (var image in (ImageModel)ViewData.Model) { %>
    <a class="image" href='<%= Url.Action("ImageView", "ImageView", new { imageFolderName = image.Folder, imageFile = ImageHelper.GetImageName(image.Path) }, null) %>'>
    <img src="/images/<%= image.Path %>" height="<%=(image.Height/4).ToString() %>" width="<%=(image.Width/4).ToString() %>" alt=""  /></a>
<% }%>
</div>

现在您必须使用一些 jQuery 来连接单击事件。

<script type="javascript">
    //use the live method to listen to future clicks
    $('a.image').live('click', function(e) {
        e.preventDefault(); // prevent following the link
        $('#allmypics').load($(this).attr('href')); // load the result of the link into the 'allmypics' element. Use the href attribute of the link as address.
    } );
</script> 

我添加了评论供您理解。

现在我们只需更改 action：

public ActionResult ImageView(string imageFolderName, string imageFile)
{
    if (Request.IsAjaxRequest())
        return PartialView(new ImageModel(imageFolderName, imageFile));
    else
        return View(new ImageModel(imageFolderName, imageFile));
} 

控制器知道它是否是 ajax 请求，因此如果是，我们返回部分视图（不要忘记重命名 ImageList.ascx< /code> 到 Imageview.ascx），否则我们返回整个页面。

现在，如果浏览器不支持 javascript（它只会正常地跟随链接），这也将起作用。

我没有测试它，因此可能存在一些语法错误。

Answer 2

我发现片面的观点在这种情况下没有帮助。当我想做的只是旋转缩略图列表时，我需要做的就是使用 jQuery 将顶部缩略图附加到容器的底部，并继续执行此操作，直到单击的缩略图位于顶部。

在我看来，我在第一次加载页面时加载缩略图。

<div id="thumbnails">
    <% foreach (var image in (ImageModel)ViewData.Model) { %>
        <img src="/images/<%= image.Path %>" class="thumbnail" height="<%=(image.Height/4).ToString() %>" width="<%=(image.Width/4).ToString() %>" alt=""  />
    <% }%>

</div>

然后我找到了旋转缩略图的 jQuery 代码，

$('.thumbnail').live('click', function() {

var imageSrc = $(this).attr('src');
var n = 0;

$('img.thumbnail').each(function(n) {
    if ((imageSrc == $(this).attr('src')) && (n == 0)) {
        $('div#thumbnails').append(this);
        return false;
    }
    if (imageSrc == $(this).attr('src')) {
        return false;
    }
    else {
        $('div#thumbnails').append(this);
    }
    n++;
});

这只是从 div 中剪切顶部缩略图，并使用一个循环将其附加到底部，该循环在到达单击的缩略图时停止，将单击的缩略图保留为顶部缩略图。

第一个 if 语句检查单击的缩略图是否是列表中的第一个缩略图，如果是，则将缩略图旋转 1。实际上，单击列表中的第一个或第二个缩略图都会将列表移动 1。单击列表中的任何其他缩略图都会成为第一个缩略图并相应地旋转。