Html 单击其中一个图像时，如何刷新partialview中的图像列表？

我有一个包含在网页上的局部视图，它以设置的顺序加载了许多缩略图。当一个缩略图被点击时，我想重新加载列表，点击的缩略图将成为第一个图像，然后依次是列表的其余部分，而无需重新加载网页的其余部分

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

如果我将Url.Action设置为ImageList，ImageList。。。缩略图完全按照我想要的方式刷新，但是整个页面都刷新了，而不仅仅是局部视图

当我将Url.Action设置为ImageList时，ImageView。。。不是刷新包含页面的部分视图，而是删除包含页面，加载部分页面时不使用它。也就是说，我在一个空白的白色网页上看到了所有按正确顺序排列的缩略图

我是一个noob，我无法理解任何jQuery或Ajax Q和关于PartialView的解释，也无法将其应用到这个场景中

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

---

还有，是否有任何文件或解释说明如何做到这一点

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

我将着手做以下工作：

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

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

现在，如果浏览器不支持javascript，它也可以正常地跟随链接

---

我没有测试它，所以可能有一些语法错误。

我发现部分视图在这种情况下没有帮助。当我只想旋转缩略图列表时，我所需要做的就是使用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>

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

---

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

感谢Gidon的输入。还有几个问题。首先，如果视图和部分视图具有相同的名称，即使扩展名不同，调用也会引发堆栈溢出异常。因此，我使用控制器PartialViewResult ImageList将部分视图的ImageList名称恢复为ImageList。继续添加jQuery脚本，并使div中的图像具有正确的ID，以及类为image的图像。我可以看到它正在尝试做什么。但是，当我在控制器中放置断点并单击图像时，Request.IsAjaxRequest函数返回false。我认为你的建议接近我需要的。为了更好地理解，我买了一本jQuery的书。再次感谢。

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

<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>

<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> 

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

<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>

$('.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++;
});