none
Modal dialog no funciona en azure RRS feed

  • Pregunta

  • Hola amigos, espero que puedan ayudarme. Tengo un proyecto web hecho en visual studio 2017 con C#. Este proyecto funciona a la perfección en los equipos de desarrollo, pero cuando publicamos en producción (servidor Azure), los modal dialog no se pueden visualizar. He revisado que logran ejecutarse e incluso se cambian los divs, pero no se visualiza ningún dialog.

    Aquí copio el orden de renderizado en mi plantilla:

    @Scripts.Render("~/bundles/jquery")
        @Scripts.Render("~/bundles/bootstrap")
        @Scripts.Render("~/Content/plugins")

    En mi BundleConfig:

    bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
                            "~/Content/js/plugins/jquery/jquery.min.js"
                            ));
    Estoy usando la plantilla JoliAdmin
    bundles.Add(
                    new ScriptBundle("~/Content/plugins").Include(
                            "~/Content/js/plugins/jquery/jquery-ui.min.js",
                            "~/Content/js/plugins/bootstrap/bootstrap.min.js",
                            "~/Content/js/plugins/icheck/icheck.min.js",
                            "~/Content/js/plugins/mcustomscrollbar/jquery.mCustomScrollbar.min.js",
                            "~/Content/js/plugins/blueimp/jquery.blueimp-gallery.min.js",
                            "~/Content/js/plugins/scrolltotop/scrolltopcontrol.js",
                            "~/Content/js/plugins/morris/morris.min.js",
                            "~/Content/js/plugins/rickshaw/d3.v3.js",
                            "~/Content/js/plugins/rickshaw/rickshaw.min.js",
                            "~/Content/js/plugins/jvectormap/jquery-jvectormap-1.2.2.min.js",
                            "~/Content/js/plugins/jvectormap/jquery-jvectormap-world-mill-en.js",
                            "~/Content/js/plugins/bootstrap/bootstrap-datepicker.js",
                            "~/Content/js/plugins/owl/owl.carousel.min.js",
                            "~/Content/js/plugins/moment.min.js",
                            "~/Content/js/plugins/daterangepicker/daterangepicker.js",
                            "~/Content/js/plugins.js",
                            "~/Content/js/actions.js",
                            "~/Content/js/plugins/datatables/jquery.dataTables.min.js",
                            "~/Content/js/modalform.js"
                            
                        //"~/Content/js/demo_dashboard.js"
                        )
                    );

    Cuando ejecuto en los equipos de pruebas el modal dialog se visualiza bien:

    Pero en Azure no se visualiza nada. 

    Este es el código de mi modal dialog:

     <div id='myModal' class='modal fade in'>
            <div class="modal-dialog" style="z-index: 10000;">
                <div class="modal-content">
                    <div id='myModalContent'></div>
                </div>
            </div>
        </div>

    Lo que he logrado diferenciar es que en los equipos de desarrollo, los divs si cambian al llamar al modal dialog.

    Sin embargo, en Azure, cuando hago click sobre el ActionLink que abre el modal se muestra de la siguiente forma:

    Finalmente, logro detallar que el modal se carga, pero de alguna forma esta invisible:

    De antemano muchas gracias por su apoyo.

    jueves, 23 de mayo de 2019 12:50

Respuestas

  • hola

    >>He intentado colocar todos los scripts fuera de @Scripts.Render, pero brinda el mismo error.

    no hace falta eso solo indica que no aplique el minificado, cuando ejecutas desde VS esto se produce porque compilas en Debug

    si quieres formzarlo debes asignar la propiedad

    Bundling and Minification

    public static void RegisterBundles(BundleCollection bundles)
    {
        bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
                     "~/Scripts/jquery-{version}.js"));
    
        // Code removed for clarity.
        BundleTable.EnableOptimizations = true;
    }

    ponla en false asi no minifica, o mejor tambine prueba ponerla en true pero ejecutando desde el VS a ver como se comporta

    saludos


    Leandro Tuttini

    Blog
    MVP Profile
    Buenos Aires
    Argentina

    • Marcado como respuesta ArtechSoft viernes, 24 de mayo de 2019 4:44
    jueves, 23 de mayo de 2019 22:56

Todas las respuestas

  • hola

    Cuando lo publicas en produccion seguramente este aplicando el bundler y la minificacion del codigo, podrias ver de publicar sin minificar o de habilitar la optimizacion cuando ejecutas desde el Visual Studio

    Revisa la solapa Console del developer tools del browser cuando intentas mostrar el dialogo para ver si hay un error de javascript

    saludos


    Leandro Tuttini

    Blog
    MVP Profile
    Buenos Aires
    Argentina

    jueves, 23 de mayo de 2019 13:10
  • La consola no brinda ningún error, yo creí que era un script faltante, pero no muestra nada la consola.

    He intentado colocar todos los scripts fuera de @Scripts.Render, pero brinda el mismo error.

    jueves, 23 de mayo de 2019 16:39
  • hola

    >>He intentado colocar todos los scripts fuera de @Scripts.Render, pero brinda el mismo error.

    no hace falta eso solo indica que no aplique el minificado, cuando ejecutas desde VS esto se produce porque compilas en Debug

    si quieres formzarlo debes asignar la propiedad

    Bundling and Minification

    public static void RegisterBundles(BundleCollection bundles)
    {
        bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
                     "~/Scripts/jquery-{version}.js"));
    
        // Code removed for clarity.
        BundleTable.EnableOptimizations = true;
    }

    ponla en false asi no minifica, o mejor tambine prueba ponerla en true pero ejecutando desde el VS a ver como se comporta

    saludos


    Leandro Tuttini

    Blog
    MVP Profile
    Buenos Aires
    Argentina

    • Marcado como respuesta ArtechSoft viernes, 24 de mayo de 2019 4:44
    jueves, 23 de mayo de 2019 22:56
  • Leandro, como siempre eres lo máximo.

    Mil gracias. En efecto había olvidado quitar el código de debug:

    #if DEBUG
                BundleTable.EnableOptimizations = false;
    #else
                            BundleTable.EnableOptimizations = true;
    #endif

    Mi solución fue quitar el If DEBUG y obligar que EnableOptimizations este siempre en false.

    Muchas gracias.

    viernes, 24 de mayo de 2019 4:46
  • hola

    >>Mi solución fue quitar el If DEBUG y obligar que EnableOptimizations este siempre en false.

    pero si dejas siempre en false que sentido tiene usar bundler ? se supone que al llevar a produccion deberias habilitar la optimizacion

    Solo hay que encontrar el porque afecta al modal

    Ahora sabes que es la optimizacion de los .js y .css, pero no debes dejar esa opcion en false, debes encontrar la causa

    saludos


    Leandro Tuttini

    Blog
    MVP Profile
    Buenos Aires
    Argentina


    viernes, 24 de mayo de 2019 13:08