Question

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

我尝试将视图部分加载到<a href"">上，也尝试将视图加载到<a target="">中。两者都不起作用。它们会加载部分内容，但会在显示画廊时而不是在click事件之后加载。

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，因为我不知道如何使用它。

如何在图像上加载局部视图

0 个答案: