Fatal编程技术网
  • jquery/
  • Jquery 使用ajax时将jGallery呈现为PartialView不起作用

Jquery 使用ajax时将jGallery呈现为PartialView不起作用

jquery asp.net ajax asp.net-mvc asp.net-mvc-4

Jquery 使用ajax时将jGallery呈现为PartialView不起作用,jquery,asp.net,ajax,asp.net-mvc,asp.net-mvc-4,Jquery,Asp.net,Ajax,Asp.net Mvc,Asp.net Mvc 4,我正在使用渲染我的图像。我在页面加载中显示了我的所有图像，使用jGallery效果非常好。我将我的图库渲染为一个局部视图。我也在使用我的文件上传器。我的目标是使用上传程序将图像添加到我的收藏中，然后在成功后刷新我的jGallery网格 我面临的问题是，每当上传文件时，我都会调用我的控制器使用AJAX从数据库获取所有图像，但是jGallery根本不会渲染。它所做的只是在不使用任何脚本的情况下呈现标记 如何将PartialView与AJAX一起使用，并且在PartialView中仍然使用jGalle

我正在使用渲染我的图像。我在页面加载中显示了我的所有图像，使用jGallery效果非常好。我将我的图库渲染为一个局部视图。我也在使用我的文件上传器。我的目标是使用上传程序将图像添加到我的收藏中，然后在成功后刷新我的jGallery网格

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

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

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

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

    return View(new ImageViewModel(images));
}
控制器动作

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

    return PartialView(new ImageViewModel(images));
}
问题是，事件绑定在绑定时假定存在dom对象。所有针对
$（“#gallery”）
的绑定都发生在元素存在之前，因此被忽略

您可以尝试创建一个封装所有
$（“#gallery”）
绑定的函数，并在成功调用时调用它

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();
},
我实际上没有意识到绑定是在元素存在之前发生的。谢谢你的帮助。@gardarvalur，很乐意帮忙 
@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>
}

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 () {
    }
});

});

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 () {
    }
  });
};

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