0

Estoy tratando de cerrar una ventana modal de bootstrap con una url retornada desde al ActionResult, pero por alguna razón no me esta funcionando:

Este es mi script:

    $('form').submit(function () {
    var $form = $(this);
    $.ajax({
        url: this.action,
        type: this.method,
        contentType: this.enctype,
        data: $(this).serialize(),
        success: function (result) {
            if (result.success) {
                $('#myModal').modal('hide');
                //Refresh
                //location.reload();
                $('#replacetarget').load(result.url);
            } else {
                $('#myModalContent').html(result);
                //bindForm();
            }
        }
    });
});

Este es mi ActionResult:

[HttpPost]
[ValidateAntiForgeryToken]
public ActionResult CreateForCategory(MaterialViewModel material, HttpPostedFileBase upload)
{

    material.Status = Status.Activo;
    material.FechaRegistro = DateTime.Today.Date;

    var materialDomain = Mapper.Map<MaterialViewModel, Material>(material);

    if (upload != null && upload.ContentLength > 0)
    {
        var imagen = new Imagen
        {
            Nombre = System.IO.Path.GetFileName(upload.FileName),
            TipoContenido = upload.ContentType
        };

        using (var reader = new System.IO.BinaryReader(upload.InputStream))
        {
            imagen.Contenido = reader.ReadBytes(upload.ContentLength);
        }

        materialDomain.Imagen = imagen;
    }

    _materialRepository.Create(materialDomain);


    string url = Url.Action("MaterialesPorCategoriaIndex", "CategoriaMateriales");

    return Json(new { success = true, url = url }, JsonRequestBehavior.AllowGet);
}

Al momento de retornar el valor json se muestra una vista en blanco con este texto:

{"success":true,"url":"/CategoriaMateriales/MaterialesPorCategoriaIndex"}

Este es mi vista principal:

@model CategoriaMaterialViewModel
@{
    ViewBag.Title = "CategoriaMaterial";
}
<link href="~/Content/css/blockingwindow.css" rel="stylesheet" />

<div class="content clearfix">
    @Styles.Render("~/Content/MiBundle")
    @Styles.Render("~/Content/toastr")

    <div id="page-wrapper">
        <div class="container-fluid">
            <div class="row">
                <div class="col-lg-17">
                    <h3>
                        <!-- class="page-header" -->
                        Lista de Materiales de: @Html.DisplayFor(x => x.Descripcion)
                    </h3>
                    <ol class="breadcrumb">
                        <li><a class="MenuBread" href='@Url.Action("Index", "Home")' data-toggle="tooltip" title="Inicio">Inicio</a></li>
                        <li class="active"><b>Lista de Materiales</b></li>
                    </ol>
                </div>

                <div class="panel panel-default">

                    @Html.HiddenFor(x => x.CategoriaId, new { @id = "categoriaId" })
                    <form class="form-horizontal">
                        <div class="form-group">
                            <div class="col-sm-9">
                                <a data-target='#myModal' href='@Url.Action("CreateForCategory", "CategoriasMateriales")' id="btnCreate" class="btn btn-info" role="button">Agregar Material</a>
                                <a href='@Url.Action("Index", "CategoriasMateriales")' class="btn btn-warning" role="button">Regresar a Categorías</a>
                            </div>
                        </div>
                    </form>

                    <div id="materialesPorCategoria"></div>
                </div>


            </div> <!-- /.row -->
        </div><!-- /.container-fluid -->
    </div> <!-- /.container-PAGE -->
</div>


@section Scripts {

    @Scripts.Render("~/bundles/toastr")
    @Scripts.Render("~/Content/MyScripts")
    @Scripts.Render("~/Content/TableScripts")
    @Html.Partial("_Toastr")
}

<script type="text/javascript" language="javascript" class="init">

    $('#btnCreate').click(function (e) {
        e.preventDefault();
        $('#btnCreate').attr('data-modal', '');
        $('#btnCreate').attr('data-toggle', 'modal');
        $('#myModalContent').load(this.href + '/' + $('#categoriaId').val(), function () {
            $('#myModal').modal({
                /*backdrop: 'static',*/
                keyboard: true
            }, 'show');

        });
        return false;
    });


    $('form').submit(function () {
        var $form = $(this);
        $.ajax({
            url: this.action,
            type: this.method,
            contentType: this.enctype,
            data: $(this).serialize(),
            success: function (result) {
                if (result.success) {
                    $('#myModal').modal('hide');
                    //Refresh
                    //location.reload();
                    //$('#replacetarget').load(result.url);
                } else {
                    $('#myModalContent').html(result);
                    //bindForm();
                }
            }
        });
    });

</script>

<!-- modal placeholder-->
<div id='myModal' class='modal fade in'>
    <div class="modal-dialog">
        <div class="modal-content">
            <div id='myModalContent'></div>
        </div>
    </div>
</div>

Esta es mi vista Modal:

@model MaterialViewModel

@{
    ViewBag.Title = "Nuevo material";
    Layout = null;
}

<script src="~/Scripts/jquery.validate.min.js"></script>
<script src="~/Scripts/jquery.validate.unobtrusive.js"></script>
<script src="~/Content/js/fileUpload.js"></script>
<link href="~/Content/css/fileUpload.css" rel="stylesheet" />
<script src="~/Scripts/jquery-ui.js"></script>
<link href="~/Content/popup/popupstyle.css" rel="stylesheet" />

<div class="modal-header modal-header-success">

    <h3 class="modal-title" style="text-align: center;">
        xxxxx
        <button type="button" class="close panelTitleTxt glyphicon glyphicon-remove landing-icon" data-dismiss="modal" aria-hidden="true"></button>
    </h3>
</div>

@using (Html.BeginForm("CreateForCategory", "CategoriasMateriales", null, FormMethod.Post, new { enctype = "multipart/form-data" }))
{
    @Html.AntiForgeryToken()
    <div class="modal-body">
        @Styles.Render("~/Content/toastr")

        <br />

        <div class="form-horizontal">
            @Html.HiddenFor(x => x.CategoriaId)
            @Html.ValidationSummary(true, "", new {@class = "text-danger"})
            <div class="form-group">
                @Html.LabelFor(model => model.CategoriaId, htmlAttributes: new {@class = "control-label col-sm-3 popup-labelfont"})
                <div class="col-sm-8">
                    @Html.DropDownListFor(x => x.CategoriaId, Model.CategoriasMaterialViewModel, new {@class = "form-control", @disabled = "disabled"})
                    @Html.ValidationMessageFor(model => model.CategoriaId, "", new {@class = "label label-danger"})
                </div>
            </div>

            <div class="form-group">
                @Html.LabelFor(model => model.Descripcion, htmlAttributes: new {@class = "control-label col-sm-3 popup-labelfont"})
                <div class="col-sm-8">
                    @Html.EditorFor(model => model.Descripcion, new {htmlAttributes = new {@class = "form-control", maxlength = "200"}})
                    @Html.ValidationMessageFor(model => model.Descripcion, "", new {@class = "label label-danger"})
                </div>
            </div>

            <div class="form-group">
                @Html.Label("Imagen", htmlAttributes: new {@class = "control-label col-sm-3 popup-labelfont"})
                <div class="col-md-offset-0 col-sm-offset-0 col-sm-8">
                    <!-- image-preview-filename input [CUT FROM HERE]-->
                    <div class="input-group image-preview">
                        <input type="text" class="form-control image-preview-filename" disabled="disabled"> <!-- don't give a name === doesn't send on POST/GET -->
                        <span class="input-group-btn">
                            <!-- image-preview-clear button -->
                            <button type="button" class="btn btn-danger image-preview-clear" style="display: none;">
                                <span class="glyphicon glyphicon-remove"></span> Clear
                            </button>
                            <!-- image-preview-input -->
                            <div class="btn btn-info image-preview-input">
                                <span class="glyphicon glyphicon-folder-open"></span>
                                <span class="image-preview-input-title">Browse</span>
                                <input type="file" accept="image/png, image/jpeg, image/gif" name="upload" /> <!-- rename it -->
                            </div>
                        </span>
                    </div><!-- /input-group image-preview [TO HERE]-->
                </div>
            </div>

            <div class="form-group">
                <div class="col-sm-10">
                    <input class="btn btn-success" id="btnSave" type="submit" value="Guardar"/>
                    <input aria-hidden="true" class="btn btn-md btn-warning" data-dismiss="modal" id="btncancel" type="button" value="Cancelar"/>
                </div>
            </div>

            <div>
                @Scripts.Render("~/bundles/toastr")
                @Html.Partial("_Toastr")
            </div>
        </div>
    </div>
}

<script>
    $("form").removeData("validator");
    $("form").removeData("unobtrusiveValidation");
    $.validator.unobtrusive.parse("form");

    $('form').submit(function () {

        $('#myModal').on('hidden.bs.modal', function () {
            window.LoadMateriales();
        });
    });

    $('.modal').modal({
        keyboard: true,
        show: false
    });
    // Jquery draggable
    $('.modal-dialog').draggable({
        handle: ".modal-header"
    });
</script>

Si alguien tiene alguna idea como solucionar esto les agradecería demasiado su apoyo.

3
  • Hola Jose Luis, ¿cómo tienes definido el formulario? el 15 may. 2016 a las 6:26
  • Hola Asier: Detallo mi pregunta con el código del formulario contenedor y el mostrado como Popup. A ver que puedes encontrarle el 15 may. 2016 a las 14:30
  • Qué tal un $("elemento").closeModal(); a mí siempre me ha funcionado así..
    – Candelo
    el 21 ene. 2019 a las 0:07

2 respuestas 2

1

Olvidaste pasar el parámetro dataType, el cuál determina el tipo de datos que estás esperando como respuesta, en este caso el valor es json.

Así quedaría el código:

$('form').submit(function () {
  var $form = $(this);
  $.ajax({
    url: this.action,
    type: this.method,
    contentType: this.enctype,
    dataType: 'json',
    data: $(this).serialize(),
    success: function (result) {
        if (result.success) {
            $('#myModal').modal('hide');
            //Refresh
            //location.reload();
            $('#replacetarget').load(result.url);
        } else {
            $('#myModalContent').html(result);
            //bindForm();
        }
    }
  });
});

Documentación de jQuery:

dataType (default: Intelligent Guess (xml, json, script, or html))

Type: String

The type of data that you're expecting back from the server. If none is specified, jQuery will try to infer it based on the MIME type of the response (an XML MIME type will yield XML, in 1.4 JSON will yield a JavaScript object, in 1.4 script will execute the script, and anything else will be returned as a string).

4
  • Hola shaz: ya antes había intentando espeficificando el dataType, pero el resultado fue el mismo, lo extraño es que con otros scripts similares esto si me funciona, ¿podría ser el encode type? el 15 may. 2016 a las 4:25
  • Yo hice una prueba con tu código (jQuery), corrigiendo el dataType y pasando el string json que tienes y funciona perfectamente.
    – Shaz
    el 15 may. 2016 a las 4:33
  • Supongo que algún factor externo esta provocando comportamiento que describo, volveré a probar especificando el dataType, gracias hago la prueba y comentó mis resultados. el 15 may. 2016 a las 4:37
  • Hola Shaz: Hice algunas pruebas y el codigo funciona solo cuando se envía la entidad simple, cuando intento cargar un archivo en este caso una imagen por alguna razón no esta regresando a la función: @using (Html.BeginForm("CreateForCategory", "CategoriasMateriales", null, FormMethod.Post, new { enctype = "multipart/form-data" })) el 16 may. 2016 a las 14:51
-2

Intenta hacer un result = JSON.parse(result) antes de hacer el if(result.success).

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.