0

Trabajo con ASP.NET MVC 5, Visual Studio Community Edition, jQuery v3.

Llamo a la vista parcial desde un botón en realidad un input.

<input type="button" class="btn btn-success" onclick="createPartialView();" 
data-toggle="modal" value="Nuevo" data-target="#AgregarEmpleado" />

Implemente una función que llama a una vista parcial.

@section Scripts{

    <script type="text/javascript">

        function createPartialView() {
            var urlVista = "@Url.Action("Create", "Empleado")";
            $.ajax({
                cache: false,
                async: true,
                type: "GET",
                url: urlVista,
                data: {},
                success: function (response) {
                    $('#resultado').html(response);
                },
                error: function (request, status, error) {
                    alert(request.responseText);
                }
            });

            $("#AgregarEmpleado").modal("show");
        }
    </script>

}

_layout.cshtml

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@ViewBag.Title - Mi aplicación ASP.NET</title>
    @Styles.Render("~/Content/css")
    @Scripts.Render("~/bundles/modernizr")
</head>
<body>
    <div class="navbar navbar-inverse navbar-fixed-top">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                @Html.ActionLink("Nombre de la aplicación", "Index", "Home", new { area = "" }, new { @class = "navbar-brand" })
            </div>
            <div class="navbar-collapse collapse">
                <ul class="nav navbar-nav">
                    <li>@Html.ActionLink("Inicio", "Index", "Home")</li>
                    <li>@Html.ActionLink("Acerca de", "About", "Home")</li>
                    <li>@Html.ActionLink("Contacto", "Contact", "Home")</li>
                </ul>
            </div>
        </div>
    </div>
    <div class="container body-content">
        @RenderBody()
        <hr />
        <footer>
            <p>&copy; @DateTime.Now.Year - Mi aplicación ASP.NET</p>
        </footer>
    </div>

    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/bootstrap")
    @RenderSection("scripts", required: false)
</body>
</html>

El mensaje de error es el siguiente:

Modal no es una función

Exactamente el error es en esta línea de código

$("#AgregarEmpleado").modal("show");

¿Qué estoy haciendo mal?

2
  • Revisa la documentación probablemente te falta cargar el script del modal y, además, se debe mostrar con el elemento del modal, no con un botón: $('#id-de-ventana-modal').modal('show');
    – Triby
    Commented el 29 abr. 2021 a las 18:04
  • estás llamando ese script antes de que los que necesiten hayan cargado. Muestra lo que tienes en tu _layout.cshtml
    – fredyfx
    Commented el 29 abr. 2021 a las 18:59

1 respuesta 1

0

Tenía la línea que llama al modal fuera del success

function createPartialView() {
        var urlVista = "@Url.Action("Create", "Empleado")";
        $.ajax({
            cache: false,
            async: true,
            type: "GET",
            url: urlVista,
            data: {},
            success: function (response) {
                $('#resultado').empty().html(response);
                $("#AgregarEmpleado").modal("show");
            },
            error: function (request, status, error) {
                alert(request.responseText);
            }
        });
    }

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.