Modal dialog no funciona en azure

Question

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.

Answer 1

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

Answer 2

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.

Answer 3

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

Answer 4

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.

Answer 5

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