0

Resumiendo un poco: quiero que mi Array llamado "imagenes" en mi archivo JavaScript, reciba imágenes que le pase de un controlador en C#

Hice una galería estática de imágenes las cuales cuando hago clic sobre alguna de ellas se agrandan y se ubican en un Carousel para poder verlas una por una.

Las imagenes son ubicadas en distintas carpetas, por lo que hay muchas carpetas, y cada carpeta tiene distintas imágenes. (Ejemplo: Carpeta1 tiene distintas imágenes que Carpeta2)

Con C# logré mostrar esas imágenes en el html, pero no puedo agregarlas en el Carousel.

Actualmente estoy armando un Array con las imágenes que están ubicadas en una carpeta local, todo de forma estática.

Lo que busco y no consigo hacer debido a mi poca experiencia con JavaScript es que las imágenes del Array sean dinámicas, ¿Qué imágenes quiero que estén en el Carousel? Las que les pase del controlador, dependiendo de la carpeta elegida. (Ejemplo: Si selecciono Carpeta1, el Carousel tendrá las imágenes que estén dentro de Carpeta1.)

Espero que se me haya entendido :(

Este es mi código actual del carousel con las imágenes estáticas dentro de Array "imagenes":

document.addEventListener('DOMContentLoaded', function () {
    let imagenes = [
        { img: '/imgAndroid/Celular.jpg' },
        { img: '/imgAndroid/Taza.jpg' },
        { img: '/imgAndroid/Horno.jpg' },
        { img: '/imgAndroid/TV.jpg' },        
        { img: '/imgAndroid/Monitor.jpg' },
        { img: '/imgAndroid/Notebook.jpg' },
        { img: '/imgAndroid/PanelSolar.jpg' },                      
        { img: '/imgAndroid/Teclado.jpg' },
        { img: '/imgAndroid/Samsung.jpg' },
        { img: '/imgAndroid/Mouse.jpg' },
    ]

    let contador = 0;
    const contenedor = document.querySelector('.slideshow');
    const overlay = document.querySelector('.overlay');
    const imagenesTd = document.querySelectorAll('.galeria img');
    const img_slideshow = document.querySelector('.slideshow img');   
    const btnDownload = document.getElementById('btnDownload');    

    contenedor.addEventListener('click', function (event) {
        let atras = contenedor.querySelector('.atras'),
            adelante = contenedor.querySelector('.adelante'),
            img = contenedor.querySelector('img'),
            tgt = event.target
        if (tgt == atras) {
            if (contador > 0) {
                img.src = imagenes[contador - 1].img
                contador--
            } else {
                img.src = imagenes[imagenes.length - 1].img
                contador = imagenes.length - 1
            }
        } else if (tgt == adelante) {
            if (contador < imagenes.length - 1) {
                img.src = imagenes[contador + 1].img
                contador++
            } else {
                img.src = imagenes[0].img
                contador = 0
            }
        }
    })

    Array.from(imagenesTd).forEach(img => {
        img.addEventListener('click', event => {
            const imagenSeleccionada = +event.target.dataset.imgMostrar
            img_slideshow.src = imagenes[imagenSeleccionada].img
            contador = imagenSeleccionada
            overlay.style.opacity = 1
            overlay.style.visibility = 'visible'
        })
    })

    document.querySelector('.btn_cerrar').addEventListener('click', () => {
        overlay.style.opacity = 0
        overlay.style.visibility = 'hidden'
    })    

    btnDownload.addEventListener('click', function (event) {
        let img = contenedor.querySelector('img');
        let imgPath = img.src;        
        console.log(imgPath);

        const downLoadImg = imgPath.substring(imgPath.lastIndexOf('/') + 1)
        btnDownload.href = "../Imagenes/" + downLoadImg;
    })
})}

EDIT AGREGO CODIGO HTML FOREACH DE IMAGENES

 @foreach(var pd in Model)
            {
                if(img != pd.getImagenes().ToString())
                {
                    <div class="columnaPedido">
                        <img class="imgPedido" src='@pd.getImagenes()' onclick="AbrirCarousel('"@pd.getNumeroPedido().ToString()"')" data-img-mostrar="@cont"/>
                        @{
                            cont++;
                        }
                    </div>   
                }           
                cont++;
            }   

Guiandome con lo que pasó @Robinson, estoy teniendo problemas al momento de crear el carusel.

Asi me queda el Javascript:

function GetImagenes(entrega){
    var i = 0;
    console.log(entrega);
    $.ajax({
        method: "GET",
        url: "GetPedidoImagenes",
        contentType: "aplication/json; Charset=utf-8",
        data: { 'entrega': entrega },        
        async: true,
        success: function (result) {
            console.log("Longitud: " + result.length);
            console.log(result);
            if (result == 0) {
                alert("No hay Imagenes");
            }
            else {
                while (i < result.length) {
                    var carusel = document.getElementById("Entrega_" + entrega);
                    if (i == 0) {
                        var div = document.createElement('div');
                        div.setAttribute('class', 'carousel-item active');
                        var img = document.createElement("img");
                        img.setAttribute('class', 'd-block w-100');
                        div.appendChild(img);
                        img.setAttribute('src', 'imgAndroid/' + result[i]);
                        console.log(result[i].Path);
                        console.log(result[i].path);
                        carusel.appendChild(div);
                        i++;
                        //console.log(result);
                        //console.log(img.src);
                    }
                    else {
                        var div = document.createElement('div');
                        div.setAttribute('class', 'carousel-item');
                        var img = document.createElement('img');
                        img.setAttribute('class', 'd-block w-100');
                        div.appendChild(img);
                        img.setAttribute('src', 'imgAndroid/' + result[i]);
                        carusel.appendChild(div);
                        i++;
                    }
                }
            }
            console.log(result);
        }
    })
};

"Result" está trayendo las 11 imagenes que se trae del back-end, pero cuando la inspecciono, es un array con elementgos vacios:

(11) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]
0:{}
1:{}
2:{}
3:{}
4:{}
5:{}
6:{}
7:{}
8:{}
9:{}
10:{}
length:11
[[Prototype]]:Array(0)

La ruta de las imagenes deberia ser https://myWeb.com/imgAndroid/imagen.jpg

Pero en cambio es https://myWeb.com/Home/imgAndroid/[object%20Object]

GET https://myWeb.com/Home/imgAndroid/[object%20Object] 404 (Not Found)

Back:

[HttpGet]
public List<PedidoViewModel> GetPedidoImagenes(string entrega)
{
    string consulta;
    List<PedidoViewModel> listaPedidos = new List<PedidoViewModel>();
    try
    {
        consulta = "SELECT Path from Entrega WHERE Entrega = '" + entrega + "'";
        using (var cn = new MySqlConnection("datasource=" + server + ";database=" + database + ";" + ";username=" + user + ";password=" + password + ";"))
        {
            MySqlCommand cmd = new MySqlCommand(consulta, cn);
            cn.Open();

            var reader = cmd.ExecuteReader();

            while (reader.Read())
            {
                PedidoViewModel pedido = new PedidoViewModel();
                pedido.setPathImagen(reader["Path"].ToString());                        
                listaPedidos.Add(pedido);
            }
        }

        return listaPedidos;

    
1
  • 1
    puedes usar Fetch o Ajax para realizar una petición a tu controlador y este te devuelva una lista de las imágenes que estas solicitando Commented el 5 ago. 2022 a las 18:24

1 respuesta 1

1

Estoy realizando un sitio, y tengo un modulo donde creo un carrusel de Bootstrap de forma dinámica, mis imágenes están en una carpeta llamada "evidencia" dentro del directorio "wwwwroot" de mi proyecto, en el backend C# yo realice una función en el controlador de mi vista que recibe como parámetro un id y me retorna una lista con todas la evidencias de ese id:

[HttpGet]
        public List<Evidencia> GetEvidenceScrap(int idscrap)
        {
            var idscrapparametro = new SqlParameter("@idscrap", idscrap);
            var listaevidencescrap = _context.Evidencias.FromSqlRaw($"SELECT IDRegistro, IDScrap, rutevidencia FROM dbo.F_GetEvidenceScrap(@idscrap)", idscrapparametro);
            return listaevidencescrap.ToList();
        }

En mi vista, tengo una tabla dinámica también donde en una de sus columnas tengo un botón, a ese botón le agregue, un evento onclick para que llamara a una función JavaScript, el codigo del boton es así:

<button id="[email protected]" type="button" class="btn click" onclick="GetEvidenceScrap(this)" data-bs-toggle="modal" data-bs-target= "#[email protected]()">
                                <i class="fas fa-image"></i>
                            </button>

Como parámetro de la función estoy enviando el mismo botón

En la función de JavaScript voy a acceder a mi parámetro y extraigo el id, que previamente, corresponde al id en el registro de una tabla, esto me ayuda en la funciona de ASP que mostré al principio, ahora muestro el código de la funcion JavaScript

function GetEvidenceScrap(id)
{
    var idcompleto = id.id;
    var i = 0;
    var idbutton = idcompleto.substring(2, idcompleto.length);
        $.ajax({
            method: "GET",
            url: "Coordinador/GetEvidenceScrap",
            contentType: "aplication/json; Charset=utf-8",
            data: { 'idscrap': idbutton },
            async: true,
            success: function (result) {
                console.log("Longitud: " + result.length);
                if (result.length == 0)
                {
                    alert("No se capturo evidencia");
                }
                else
                {
                    while (i < result.length) {
                        var carousel = document.getElementById('CI_' + idbutton);
                        if (i == 0) {
                            var div = document.createElement('div');
                            div.setAttribute('class', 'carousel-item active');
                            var img = document.createElement("img");
                            img.setAttribute('class', 'd-block w-100');
                            div.appendChild(img);
                            img.setAttribute('src', '/Evidence/' + result[i].rutevidencia);
                            carousel.appendChild(div);
                            i++;
                        }
                        else {
                            var div = document.createElement('div');
                            div.setAttribute('class', 'carousel-item');
                            var img = document.createElement('img');
                            img.setAttribute('class', 'd-block w-100');
                            div.appendChild(img);
                            img.setAttribute('src', '/Evidence/' + result[i].rutevidencia);
                            carousel.appendChild(div);
                            i++;
                        }
                    }
                }
                console.log(result);
            }
        });
}

Con AJAX estoy ejecutando la función de ASP, si es satisfactoria, en la variable result voy a obtener una lista en donde valido su longitud, si, no es mayor a 0 arroja un alert, caso contrario, comienzo a construir el carrusel.

Te recomiendo en tu vista crear los modals (si es que usas Bootstrap), yo lo arme así:

<!-- Crear modals para las evidencias -->
                    @foreach(var itemev in Listascarpevidence)
                    { 
                        @if (item.IDScrap == itemev.IDScrap)
                            {
                                <div class="modal fade modal-fullscreen" id="[email protected]()" tabindex="-1" aria-hidden="true">
                                    <div class="modal-dialog">
                                        <div class="modal-content">
                                            <div class="modal-header">
                                                <h5 class="modal-title">Evidence Scrap @item.IDScrap</h5>
                                                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                                            </div>
                                            <div id="@item.IDScrap" class="modal-body">
                                                @*<p>Aqui deberia ir las imagenes dependiendo el ID @item.IDScrap</p>*@
                                                <!--Carousel Evidence-->
                                                <div id="[email protected]()" class="carousel slide" data-bs-ride="carousel">
                                                    <div id="[email protected]" class="carousel-inner">
                                                        <!--Creacion del carousel con evidencia-->
                                                        <!--Fin del carousel con evidencia-->
                                                    </div>
                                                    <button class="carousel-control-prev" type="button" data-bs-target="#[email protected]()" data-bs-slide="prev">
                                                        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                                                        <span class="visually-hidden">Previous</span>
                                                    </button>
                                                    <button class="carousel-control-next" type="button" data-bs-target="#[email protected]()" data-bs-slide="next">
                                                        <span class="carousel-control-next-icon" aria-hidden="true"></span>
                                                        <span class="visually-hidden">Next</span>
                                                    </button>
                                                </div>
                                                <!--End Carousel Evidence-->
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            }
                    }
                    <!--Termino de crear modal para las evidencias-->

El código tendrías que adaptarlo a tu esquema, pero espero te ayude como guía

1
  • 1
    Los comentarios no deben usarse para discusiones extendidas; esta conversación ha sido trasladada a un chat.
    – gbianchi
    Commented el 24 oct. 2022 a las 18:43

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.