1

Tengo una consulta y es la siguiente:

Tengo un modal que carga una imagen, pero al dar clic al boton subir la imagen me recarga la pagina y se cierra el modal.

Lo que quiero es que no se recargue la pagina y se mantenga abierto mi modal después de haberlo subido.

Además no quiero usar razor @Html.BeginForm si no simplemente con <form></form> y trabajarlo con ajax y jquery ya que mi aplicación esta trabajando con ello.

Este es mi código

<!-- modal para ver detalles de un proyecto -->
<div class="modal fade" id="ModalEmpleadoSerie" tabindex="1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h6 class="modal-title" id="modal_det_title">Nuevo Registro</h6>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body bg-white">
                @using (Html.BeginForm("SubirImagen", "Acceso", FormMethod.Post, new { enctype = "multipart/form-data" }))
                {
                    <!--<input type="file" name="file" /> <button type="submit">Subir archivo</button>-->

                    @*<form id="form" method="post" enctype="multipart/form-data">*@
                    <div class="row">
                        <div class="col-md-8 col-sm-12">
                            <div class="form-group">
                                <label>Nombre:</label>
                                <input class="form-control" name="nombreEmpleado" id="idNombreEmpleado" type="text" required>
                            </div>
                        </div>
                        <div class="col-md-4 col-sm-12">
                            <div class="form-group">
                                <label>IdExterno:</label>
                                <input type="text" class="form-control" name="IdExterno" id="idExterno" disabled>
                            </div>
                        </div>
                    </div>
                    <div class="row">

                        <div class="col-md-12 col-sm-12">
                            <div class="form-group">
                                <label>N° Serie:</label>
                                <input type="text" class="form-control" name="nroSerie" id="idNroSerie" required>
                            </div>
                        </div>

                    </div>
                    <div class="row">
                        <div class="col-md-6 col-sm-12">
                            <div class="form-group">
                                <label>Cargar Imagen</label>
                                <input type="file" class="form-control" name="file" id="idArchivoImagen" required>
                            </div>
                        </div>
                        <div class="col-md-6 col-sm-12">
                            <div class="form-group">
                                <label>&nbsp;</label>
                                <input type="submit" class="form-control btn btn-success" name="file" id="idSubir" value="Subir">
                            </div>
                        </div>
                    </div>


                    <div class="form-group">
                        <button type="submit" class="btn btn-block btn-success" id="btnCrearErogacion">Guardar</button>
                    </div>
                    @*</form>*@
                }
                </div>
            </div>
        </div>
    </div>

Método C# mvc

public ActionResult SubirImagen(HttpPostedFileBase file)
        {
            //Subir Imagen
            string path = Server.MapPath("~/uploads/");
            if (file != null)
            {
                string archivo = (DateTime.Now.ToString("yyyyMMddHHmmss") + " - " + file.FileName).ToLower();

                file.SaveAs(path + Path.GetFileName(file.FileName));

                return RedirectToAction("Index","Home");
            }
            return RedirectToAction("Index", "Home");
        }

introducir la descripción de la imagen aquí

1 respuesta 1

0

Al button de subir sacarle el type="submit" y ponerle type="button" y luego con javascript o jquery capturar el click del boton de subir y enviar el ajax.

En el controller podrias devolver un JsonResult

Suerte

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.