jquery - 使用 ajax 时渲染库作为部分 View 不起作用

Question

我正在使用jGallery渲染我的图像。我在页面加载时显示所有图像，并且使用 jGallery 效果非常好。我将我的画廊渲染为 PartialView。我也在使用Kendo UI对于我的文件 uploader 。我的目标是使用 uploader 将图像添加到我的收藏中，然后在成功后刷新我的 jGallery 网格。

我面临的问题是，每当上传文件时，我都会调用我的 Controller 使用AJAX从数据库获取所有图像，但是>jGallery 根本不渲染。它所做的只是在没有任何脚本工作的情况下渲染标记。

如何将 PartialView 与 AJAX 结合使用，并且仍然在 < 中使用 jGallery 脚本em>PartialView？ (我希望这个问题有意义)

我的 Index.cshtml 和我的 Controller 操作:

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 查询和我的 Controller 操作:

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

Controller 操作

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

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

您可以尝试创建一个封装所有 $('#gallery') 绑定(bind)的函数，并在成功的 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 中:

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