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

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的方法。

公共类ImageViewController :控制器

    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问答，因为它适用于这个场景。

如果一个控制器方法加载一个新的网页，而不是仅仅刷新它所包含的页面中的部分视图，那么返回PartialView又有什么用呢？

而且，有没有任何文档或解释来说明如何做到这一点？

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重命名为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。实际上，单击列表中的第一个或第二个缩略图都会将列表移动一个。单击列表中的任何其他缩略图将使该缩略图成为第一个缩略图并相应旋转。