Creating image-gallery in ASP.NET MVC-CodePudding

I have created an ASP.NET MVC app for uploading and getting images from the client, but it is not working as well.

Something is wrong with the HttpGet method.

Here is my project:

https://github.com/SashaMaksyutenko/imageGalleryApp_aspNet

function LoadSlider(val) {
    $.ajax
        ({
        type: 'GET',
        url: 'api/Gallery/'   val,
        dataType: 'json',
            success: function (data) {
                $(".swiper-wrapper").html("");
            $.each(data, function (key, value) {
                $(".swiper-wrapper").append("<div class='swiper-slide'><img width='100%' height='350px' src='"   value.image_Path   "' />"   value.image_Caption   "</div>");
            });
                var swiper = new Swiper('.swiper', {
                    pagination: {
                        el: '.swiper-pagination',
                        type: 'progressbar',
                    },
                    navigation: {
                        nextEl: '.swiper-button-next',
                        prevEl: '.swiper-button-prev',
                    },
                });
        }
    });
}

maybe here is the problem - its might be a slider in which we getting images from folders, but I'm not sure

this method from custom.js file

CodePudding user response：

there few issues, firstly the drop down loadGalleries function doesn't seam to be properly bound, the db is saving the image path with back slashes but you need forward slashes , this is because of how your mapping the file path server side

  string dbImageGalleryPath = Path.Combine($"{Path.DirectorySeparatorChar}Uploads{Path.DirectorySeparatorChar}Gallery{Path.DirectorySeparatorChar}", id.ToString());

and it wasn't mapping the json property's i.e. galleryId and title, to fix all this you can do something like this:

value.image_Path = value.image_Path.replace(/\\/g, '/');
 $('.swiper-wrapper').append("<div class='swiper-slide'><img width='100%' height='350px' src='"   value.image_Path   "' />"   value.image_Caption   "</div>");

that will fix the loadSlider witch was failing because it wasn't receiving an id value from the drop down

the next issue you have is your saving the images to \image_gallery\Uploads\

but they need to be in the www folder \wwwroot\Uploads\Gallery\ otherwise they wont be accessible

I hope this helps

CodePudding user response：

It must be like this? but it still doesn't working. And where to paste route wwwroot/uploads/gallery?

function loadSlider(val) {
    $.ajax
        ({
            type: 'GET',
            url: 'api/Gallery/'   val,
            dataType: 'json',
            success: function (data)
            {
                $(".swiper-wrapper").html("");
                $.each(data, function (key, value)
                {
                    value.image_Path = value.image_Path.replace(/\\/g, '/');   


                    $('.swiper-wrapper').append("<div class='swiper-slide'><img width='100%' height='350px' src='.."   value.image_Path   "' />"   value.image_Caption   "</div>");
                }); 
                
                var swiper = new Swiper('.swiper-container', {
                    pagination: {
                        el: '.swiper-pagination',
                        type: 'progressbar',
                    },
                    navigation: {
                        nextEl: '.swiper-button-next',
                        prevEl: '.swiper-button-prev',
                    },
                });
            }
        });
}