点击图片加载含选中首图的轮播Partial View（无需JavaScript）

既然你不想用JavaScript，那我们可以通过服务器端路由+调整图片顺序的方式来实现，核心思路是：点击缩略图时跳转到一个单独的轮播页面，同时传递选中图片的ID，在轮播页面里把这张图设为轮播的第一张，再加载所有图库图片。

步骤1：添加轮播处理的SurfaceController（适配Umbraco环境） #

在Umbraco里用SurfaceController来处理轮播请求会更灵活，创建一个控制器类：

using System.Web.Mvc;
using Umbraco.Web.Mvc;
using NameSpace.Models;
using Umbraco.Core.Models;
using System.Globalization;
using System.Linq;

namespace NameSpace.Controllers
{
    public class CarouselSurfaceController : SurfaceController
    {
        public ActionResult Index(int albumId, int selectedPhotoId)
        {
            // 获取对应的相册节点
            var albumContent = Umbraco.Content(albumId);
            if (albumContent == null)
            {
                return HttpNotFound();
            }

            // 初始化相册模型
            var model = new PhotoGallarypageRenderModel(albumContent, CultureInfo.CurrentUICulture);
            
            // 调整图片顺序：把选中的图片移到轮播第一位
            var selectedPhoto = model.Carousel.PhotoList.FirstOrDefault(p => p.Content.Id == selectedPhotoId);
            if (selectedPhoto != null)
            {
                model.Carousel.PhotoList.Remove(selectedPhoto);
                model.Carousel.PhotoList.Insert(0, selectedPhoto);
            }

            // 返回轮播视图
            return View("Carousel", model);
        }
    }
}

补充：完善Photo类的匹配字段 #

要实现图片ID匹配，需要确保你的Photo类包含对应的节点引用，修改Photo类：

public class Photo
{
    public IPublishedContent Content { get; set; }
    public DateTime Date { get; set; }
    // 其他自定义属性...

    public Photo(IPublishedContent content)
    {
        Content = content;
        Date = content.GetPropertyValue<DateTime>("date"); // 替换成你实际的日期属性别名
        // 初始化其他属性
    }
}

步骤2：创建独立的轮播视图（Carousel.cshtml） #

把你现有的轮播Partial View改成独立视图，这里以Bootstrap轮播为例：

@inherits UmbracoViewPage<NameSpace.Models.PhotoGallarypageRenderModel>
@{ Layout = "~/Views/Shared/_Layout.cshtml"; }

<div class="container py-5">
    <div id="photoCarousel" class="carousel slide" data-ride="carousel">
        <!-- 轮播指示器 -->
        <ol class="carousel-indicators">
            @for (int i = 0; i < Model.Carousel.PhotoList.Count; i++)
            {
                <li data-target="#photoCarousel" data-slide-to="@i" class="@(i == 0 ? "active" : "")"></li>
            }
        </ol>
        <!-- 轮播内容 -->
        <div class="carousel-inner">
            @foreach (var photo in Model.Carousel.PhotoList.Select((item, index) => new { Item = item, Index = index }))
            {
                <div class="carousel-item @(photo.Index == 0 ? "active" : "")">
                    <img class="d-block w-100" 
                         src="@photo.Item.Content.GetCropUrl("carouselLarge")" 
                         alt="@photo.Item.Content.Name">
                </div>
            }
        </div>
        <!-- 轮播控制按钮 -->
        <a class="carousel-control-prev" href="#photoCarousel" role="button" data-slide="prev">
            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
            <span class="sr-only">Previous</span>
        </a>
        <a class="carousel-control-next" href="#photoCarousel" role="button" data-slide="next">
            <span class="carousel-control-next-icon" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
        </a>
    </div>
</div>

步骤3：修改图库页面的链接 #

把原来的<a>标签指向SurfaceController的Action，传递必要的参数：

@foreach (var item in Model.MediaGallary) {
    <div class="col-lg-3 col-md-4 col-6">
        <a href="@Url.Action("Index", "CarouselSurface", new { albumId = Model.Content.Id, selectedPhotoId = item.Id })" 
           class="d-block mb-4 h-100">
            <img class="img-fluid img-thumbnail" src="@item.GetCropUrl("gallaryThumbnail")" alt="Gallery photo">
        </a>
    </div>
}

为什么之前的方法无效？ #

你之前尝试在<a>标签里直接加载Partial View，本质上是在渲染图库页面时就把Partial的HTML输出了，而不是点击后才加载。因为Partial View是服务器端渲染的，只有当请求触发对应的Action时，才会动态生成内容——所以单独的轮播页面/Action是必须的。

这样修改后，用户点击缩略图时会跳转到轮播页面，服务器端会自动把选中的图片调整到轮播首位，完全不需要JavaScript，符合你的需求。

内容的提问来源于stack exchange，提问作者Gino Blaazer