none
Error al grabar en un formulario Modal RRS feed

  • Pregunta

  • Hola a todos:

    Tengo un problema al guardar datos desde un formulario que se encuentra en un Modal.

    Mi Modal:

    <div class="modal fade" id="idModalForm" tabindex="-1" role="dialog" aria-labelledby="idModalFormTitle" aria-hidden="true">
            <div class="modal-dialog modal-dialog-scrollable" role="document">
                <div class="modal-content" style="border-radius:10px !important;">
                    <div class="modal-header" style="background-color:#222d32; color:#ffffff;">
                        Agregar imágen
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <form action="javascripts:;" enctype="multipart/form-data">
                        <div class="modal-body">
                            @Html.AntiForgeryToken()
                            @Html.ValidationSummary(true, "", new { @class = "text-danger" })
    
                            <div class="row">
                                <div class="form-group col-sm-12 col-md-12 col-lg-12">
                                    <div class="form-group col-md-4">
                                        <label for="message-text" class="col-form-label">Cantidad de imágenes: </label>&nbsp;
                                        @Html.DropDownList("Cantidad", (IEnumerable<SelectListItem>)ViewBag.Cantidad, new { @class = "form-control", @required = "", @id = "idcantidad" })
                                    </div>
    
                                    <div id="1">
                                        <div class="form-group col-md-12">
                                            <label for="message-text" class="col-form-label">Imágen 1: </label>
                                            @Html.TextBox("fileupload1", "", new { type = "file", @class = "btn btn-default", @name = "fileupload1", @id = "fileupload1", @accept = ".jpg, .jpeg, .png, .bmp", @style = "width: 100%;" })
                                        </div>
                                    </div>
    
                                    <div id="2">
                                        <div class="form-group col-md-12">
                                            <label for="message-text" class="col-form-label">Imágen 2: </label>
                                            @Html.TextBox("fileupload2", "", new { type = "file", @class = "btn btn-default", @name = "fileupload2", @id = "fileupload2", @accept = ".jpg, .jpeg, .png, .bmp", @style = "width: 100%;" })
                                        </div>
                                    </div>
                                    @{
                                        if (ViewBag.Message != null)
                                        {
                                            @ViewBag.Message
                                        }
                                    }
                                </div>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-danger" data-dismiss="modal" id="idcerrar">Cerrar</button>
                            <button type="button" class="btn btn-primary" id="btn-send-ajax">Guardar</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>

    Código para grabar:

       //**************** Grabar desde el modal ****************
        $(document).ready(function () {
            $("#btn-send-ajax").click(function (e) {
                e.preventDefault();
    
                var selectFile1 = ($("#fileupload1"))[0].files[0];
                var selectFile2 = ($("#fileupload2"))[0].files[0];
                var cant = ($("#idcantidad")).val();
                var dataString = new FormData();
    
                dataString.append("fileupload1", selectFile1);
                dataString.append("fileupload2", selectFile2);
                dataString.append("idcantidad", cant);
    
                $.ajax({
                    url: '@Url.Action("GrabarImgPopUp", "Informes_y_Publicaciones")',
                    type: "POST",
                    data: dataString,
                    processData: false,
                    contentType: false,
                    async: false,
                    success: function (data) {
                        window.location.href = window.location.href; //Refrescar la página
                        alert("Se registro la(s) imágen(es) con éxito")
                    },
                    error: function (data) {
                        alert("Error del servidor");
                    }
                });
            });
        });

    Y al intentar grabar, me lleva de frente al mensaje:


    El error:

    He tratado de ver de todo y no me resulta :-( Agradeceré su ayuda por favor. Gracias.

    viernes, 18 de diciembre de 2020 3:28

Respuestas

  • Ya lo pude resolver:

    En una vista donde se encuentra mi modal, agrego en el botón guardar el "id":

    <button type="button" class="btn btn-primary" id="btn-send-ajax">Guardar</button>

    La cual invocará mi archivo JavaScript:

    //**************** Grabar desde el modal ****************
    $(document).ready(function () {
        $("#btn-send-ajax").click(function () {
            //e.preventDefault();
    
            if (datos_correctos() == true) { //AQUI VALÍDO
                var opcion = confirm("¿Seguro que desea guardar?");
                if (opcion == true) {
                    var ID = ($("#id_user")).val();
                    var cant = ($("#idcantidad")).val();
                    var url_pag1 = ($("#url_pag1")).val();
                    var url_pag2 = ($("#url_pag2")).val();
                    var selectFile1 = ($("#fileupload1"))[0].files[0];
                    var selectFile2 = ($("#fileupload2"))[0].files[0];
                    var selectFile3 = ($("#fileupload3"))[0].files[0];
                    var selectFile4 = ($("#fileupload4"))[0].files[0];
                    var dataString = new FormData();
                    dataString.append("idcantidad", cant);
                    dataString.append("fileupload1", selectFile1);
                    dataString.append("fileupload2", selectFile2);
                    dataString.append("fileupload3", selectFile3);
                    dataString.append("fileupload4", selectFile4);
                    dataString.append("url_pag1", url_pag1);
                    dataString.append("url_pag2", url_pag2);
                    dataString.append("id_user", ID);
    
                    $.ajax({
                        type: 'POST',
                        url: '/Informes_y_Publicaciones/GrabarImgPopUp',
                        data: dataString,
                        processData: false,
                        contentType: false,
                        async: false,
                        success: function (data) {
                            window.location.href = window.location.href; //Refrescar la página
                            alert("Se registró la(s) imágen(es) con éxito")
                        },
                        error: function (data) {
                            alert("Error del servidor");
                        }
                    });
                }
            }//datos_correctos()
        });//click(function ()
    });//$(document).ready(function ()

    Y ahí es donde direcciono a un Action de mi controller para guardarlo. Y eso es todo :-)

    hace 10 horas 24 minutos

Todas las respuestas

  • Hola Miguel,

    Gracias por levantar tu consulta en los foros de MSDN.

    Saludos,

    Eric Ruiz

    ____________________________

    Por favor recuerde "Marcar como respuesta" las respuestas que hayan resuelto su problema, es una forma común de reconocer a aquellos que han ayudado, y hace que sea más fácil para los otros visitantes encontrar la solución más tarde.

    Si tiene algún cumplido o reclamo sobre el soporte de MSDN siéntase en la libertad de contactar MSDNFSF@microsoft.com.

    viernes, 18 de diciembre de 2020 16:54
    Moderador
  • La parte importante en la que te tienes que fijar es que el POST te está devolviendo un error 500 (Internal Server Error). Ese es el error que se devuelve de forma predeterminada cuando el método de acción al que estás llamando genera una Excepción. Y por razones de seguridad, el servidor no le envía al navegador ninguna información acerca de cuál fue el error concreto que se produjo. Así que este error lo tienes que depurar necesariamente desde el lado servidor. No se puede saber qué es lo que pasa examinando el fuente de la vista ni el ajax.

    Pon un punto de ruptura con el debugger a la entrada del método de acción, inicia la parte servidora en modo depuración desde Visual Studio, y lanza la grabación desde el navegador. Cuando se detenga la ejecución en el debugger, avanza paso a paso hasta que detectes en qué línea se para, y fíjate en cuál es el mensaje de error que muestra el debugger.

    • Propuesto como respuesta EricRRModerator viernes, 18 de diciembre de 2020 20:45
    viernes, 18 de diciembre de 2020 20:06
  • Ya lo pude resolver:

    En una vista donde se encuentra mi modal, agrego en el botón guardar el "id":

    <button type="button" class="btn btn-primary" id="btn-send-ajax">Guardar</button>

    La cual invocará mi archivo JavaScript:

    //**************** Grabar desde el modal ****************
    $(document).ready(function () {
        $("#btn-send-ajax").click(function () {
            //e.preventDefault();
    
            if (datos_correctos() == true) { //AQUI VALÍDO
                var opcion = confirm("¿Seguro que desea guardar?");
                if (opcion == true) {
                    var ID = ($("#id_user")).val();
                    var cant = ($("#idcantidad")).val();
                    var url_pag1 = ($("#url_pag1")).val();
                    var url_pag2 = ($("#url_pag2")).val();
                    var selectFile1 = ($("#fileupload1"))[0].files[0];
                    var selectFile2 = ($("#fileupload2"))[0].files[0];
                    var selectFile3 = ($("#fileupload3"))[0].files[0];
                    var selectFile4 = ($("#fileupload4"))[0].files[0];
                    var dataString = new FormData();
                    dataString.append("idcantidad", cant);
                    dataString.append("fileupload1", selectFile1);
                    dataString.append("fileupload2", selectFile2);
                    dataString.append("fileupload3", selectFile3);
                    dataString.append("fileupload4", selectFile4);
                    dataString.append("url_pag1", url_pag1);
                    dataString.append("url_pag2", url_pag2);
                    dataString.append("id_user", ID);
    
                    $.ajax({
                        type: 'POST',
                        url: '/Informes_y_Publicaciones/GrabarImgPopUp',
                        data: dataString,
                        processData: false,
                        contentType: false,
                        async: false,
                        success: function (data) {
                            window.location.href = window.location.href; //Refrescar la página
                            alert("Se registró la(s) imágen(es) con éxito")
                        },
                        error: function (data) {
                            alert("Error del servidor");
                        }
                    });
                }
            }//datos_correctos()
        });//click(function ()
    });//$(document).ready(function ()

    Y ahí es donde direcciono a un Action de mi controller para guardarlo. Y eso es todo :-)

    hace 10 horas 24 minutos