c# - 如何在图像单击时加载部分视图

Question

当用户单击图像本身时，我想显示图像轮播。此时需要一个轮播，加载图库中的所有图像。我有一个部分视图，其中包含轮播所需的 HTML。

我试图将视图作为部分加载，<a href"">并且我也尝试将其加载到其中<a target="">。两者都没有工作。他们加载了部分，但它是在画廊显示时加载的，而不是在点击事件之后加载的。

Mij 目前的型号有：

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using umbraco;
using Umbraco.Core.Models;
using Umbraco.Web;

namespace NameSpace.Models
{

    public class Carousel
    {
        public List<Photo> PhotoList { get; set; }

        public Carousel(IPublishedContent content)
        {
            PhotoList = content.Children().Select(c => new Photo(c)).OrderByDescending(n => n.Date).ToList();
        }
    }
}

using System;
using System.Collections.Generic;
using System.Globalization;
using System.Linq;
using System.Web;
using Umbraco.Core.Models;
using Umbraco.Web;

namespace NameSpace.Models
{
    public class PhotoGallarypageRenderModel : BaseRenderModel
    {
        public string Name { get; set; }
        public IEnumerable<IPublishedContent> MediaGallary { get; set; }
        public string AlbumName { get; set; }
        public Carousel Carousel { get; set; }

        public PhotoGallarypageRenderModel(IPublishedContent content, CultureInfo culture) : base(content, culture)
        {
            Name = content.Name;
            MediaGallary = content.GetPropertyValue<IEnumerable<IPublishedContent>>("PhotoPicker");
            AlbumName = content.GetPropertyValue<string>("AlbumName");
            Carousel = new Carousel(content);
        }
    }
}

视图如下所示：

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

<div class="container">
    <h1 class="font-weight-light text-center text-lg-left mt-4 mb-0">Thumbnail Gallery</h1>
    <hr class="mt-2 mb-5">
    <div class="row text-center text-lg-left">
        @foreach (var item in Model.MediaGallary)
        {
            <div class="col-lg-3 col-md-4 col-6">
                <a href="/nl/fotografie/@Model.AlbumName/@item.Id" target="_blank" class="d-block mb-4 h-100">
                    <img class="img-fluid img-thumbnail" src="@item.GetCropUrl("gallaryThumbnail")" alt="Gallary photo">
                </a>
            </div>
        }
    </div>
</div>

因此，当按下图像时，我想首先使用所选图像来响亮轮播视图。

我不想使用任何 JavaScript，因为我不知道如何使用它。

标签： c#razorumbraco