Question

我正在使用jGallery来渲染我的图片。我在页面加载时显示所有图像，使用jGallery非常有效。我将我的图库渲染为 PartialView 。我也使用Kendo UI作为文件上传器。我的目标是使用上传器将图像添加到我的收藏中，然后成功刷新我的jGallery网格。

我面临的问题是，无论何时上传文件，我都会调用我的控制器使用 AJAX 从数据库中获取所有图像，但 jGallery 根本不呈现。所有这一切都是在没有任何脚本工作的情况下渲染标记。

如何将 PartialView 与 AJAX 一起使用，并仍在 <中使用jGallery脚本EM> PartialView ？（我希望这个问题有意义）

我的Index.cshtml和我的控制器操作：

public ActionResult Index()
{
    IEnumerable<Image> images = _imageModel.GetAllImages();

    return View(new ImageViewModel(images));
}

Index.cshtml

//stuff abbreviated
<div id="ImageSection">
    @{
        Html.RenderPartial("LoadImages", Model);
    }
</div>
//stuff abbreviated
<div>
    @(Html.Kendo().Upload()
          .Enable(true)
          .Name("files")
          .Async(a => a
            .Save("Save", "Image")
            .Remove("Remove", "Image")
            .AutoUpload(true)
          )
          .Events(e => e.Success("onImageUploadSuccess"))
          )
</div>

我的onImageUploadSuccess查询和我的控制器操作：

function onImageUploadSuccess(e) {
$.ajax({
    type: "POST",
    dataType: "html",
    url: 'Image/LoadImages/',
    success: function (data) {
        $("#ImageSection").html(data);
    },
    error: function (data) {
        //TODO: error
    }
});
}

控制器操作

public ActionResult LoadImages()
{
    IEnumerable<Image> images = _imageModel.GetAllImages();

    return PartialView(new ImageViewModel(images));
}

LoadImages.cshtml

@model WebPage.ViewModels.ImageViewModel

@if (Model != null)
{
    <div style="padding: 0px 0; width: 100%; margin: 0 auto; height: auto;">
        <div id="gallery">
            @foreach (var cat in Model.Categories)
            {
                string cat1 = cat;
                <div class="album" data-jgallery-album-title="@cat1">
                    <h1>@cat1</h1>
                    @foreach (var image in Model.Images.Where(w => w.Category.Name.Equals(cat1)))
                    {
                        <a href="@Url.Action("GetImageData", "Image", new { id = image.Id })">
                            <img src="@Url.Action("GetImageData", "Image", new { id = image.Id })" alt="@image.Description"
                            data-jgallery-bg-color="@image.BackgrColor" data-jgallery-text-color="@image.TextColor" />
                        </a>
                    }
                </div>
            }
        </div>
    </div>
}

这是onDocumentReady

jQuery(document).ready(function ($) {
$('#gallery').jGallery({
    mode: 'standard', // [ full-screen, standard, slider ]
    width: '100%', // (only for standard or slider mode)
    height: '600px', // (only for standard or slider mode)
    autostartAtImage: 1,
    autostartAtAlbum: 1,
    canResize: true,
    backgroundColor: '#000',
    textColor: '#fff',
    thumbnails: true,
    thumbnailsFullScreen: true,
    thumbType: 'image', // [ image | square | number ]
    thumbnailsPosition: 'top', // [ top | bottom | left | right ]
    reloadThumbnails: true, //Reload thumbnails when function jGallery() is called again for the same item
    thumbWidth: 100, //px
    thumbHeight: 100, //px
    thumbWidthOnFullScreen: 100, //px
    thumbHeightOnFullScreen: 100, //px
    canMinimalizeThumbnails: true,
    transition: 'moveToBottom_moveFromTop', // http://jgallery.jakubkowalczyk.pl/customize
    transitionWaveDirection: 'forward', // [ forward | backward ]
    transitionCols: 1,
    transitionRows: 5,
    showTimingFunction: 'linear', // [ linear | ease | ease-in | ease-out | ease-in-out | cubic-bezier(n,n,n,n) ]
    hideTimingFunction: 'linear', // [ linear | ease | ease-in | ease-out | ease-in-out | cubic-bezier(n,n,n,n) ]
    transitionDuration: '0.5s',
    zoomSize: 'original', // [ fit | original | fill ] (only for full-screen or standard mode)
    title: true,
    slideshow: true,
    slideshowAutostart: false,
    slideshowCanRandom: true,
    slideshowRandom: false,
    slideshowRandomAutostart: false,
    slideshowInterval: '8s',
    preloadAll: false,
    disabledOnIE8AndOlder: true,
    initGallery: function () {
    },
    showPhoto: function () {
    },
    beforeLoadPhoto: function () {
    },
    afterLoadPhoto: function () {
    },
    showGallery: function () {
    },
    closeGallery: function () {
    }
});

});

Answer 1

问题是您的事件绑定在绑定时假定现有的dom对象。所有针对$('#gallery')的绑定都在元素存在之前发生，因此被忽略。

您可以尝试创建一个封装所有$('#gallery')绑定的函数，并在成功Ajax调用时调用它。

function bindGallery(){
$('#gallery').jGallery({
    mode: 'standard', // [ full-screen, standard, slider ]
    width: '100%', // (only for standard or slider mode)
    height: '600px', // (only for standard or slider mode)
    autostartAtImage: 1,
    autostartAtAlbum: 1,
    canResize: true,
    backgroundColor: '#000',
    textColor: '#fff',
    thumbnails: true,
    thumbnailsFullScreen: true,
    thumbType: 'image', // [ image | square | number ]
    thumbnailsPosition: 'top', // [ top | bottom | left | right ]
    reloadThumbnails: true, //Reload thumbnails when function jGallery() is called again for the same item
    thumbWidth: 100, //px
    thumbHeight: 100, //px
    thumbWidthOnFullScreen: 100, //px
    thumbHeightOnFullScreen: 100, //px
    canMinimalizeThumbnails: true,
    transition: 'moveToBottom_moveFromTop', // http://jgallery.jakubkowalczyk.pl/customize
    transitionWaveDirection: 'forward', // [ forward | backward ]
    transitionCols: 1,
    transitionRows: 5,
    showTimingFunction: 'linear', // [ linear | ease | ease-in | ease-out | ease-in-out | cubic-bezier(n,n,n,n) ]
    hideTimingFunction: 'linear', // [ linear | ease | ease-in | ease-out | ease-in-out | cubic-bezier(n,n,n,n) ]
    transitionDuration: '0.5s',
    zoomSize: 'original', // [ fit | original | fill ] (only for full-screen or standard mode)
    title: true,
    slideshow: true,
    slideshowAutostart: false,
    slideshowCanRandom: true,
    slideshowRandom: false,
    slideshowRandomAutostart: false,
    slideshowInterval: '8s',
    preloadAll: false,
    disabledOnIE8AndOlder: true,
    initGallery: function () {
    },
    showPhoto: function () {
    },
    beforeLoadPhoto: function () {
    },
    afterLoadPhoto: function () {
    },
    showGallery: function () {
    },
    closeGallery: function () {
    }
  });
};

并添加到您的Ajax成功：

success: function (data) {
    $("#ImageSection").html(data);
    bindGallery();
},

使用ajax时，将Gallery渲染为部分视图无法正常工作

1 个答案: