En mi opinión, tengo una ventana modal, tiene la siguiente forma...
@using (Html.BeginForm("controllerAction", "Controller", FormMethod.Post, new { enctype = "multipart/form-data" })) { <div class="container" id="editRecordForm"> <div class="row"> <div class="col-md-6"> @Html.LabelFor(model => model.Author) @Html.TextBoxFor(model => model.Author, new { @class = "form-control", @style = "height:auto" }) @Html.ValidationMessageFor(model => model.Author) </div> </div> <br/> <div class="row"> <div class="col-md-6"> @Html.LabelFor(model => model.Image) <input type="file" name="file" accept="image/*"> </div> </div> <br /> <input type="submit" value="Submit" class="btn btn-primary"> </div> }este es el JS que contiene la solicitud ajax
<script> var formdata = new FormData($('form').get(0)); $('form').submit(function () { if ($(this).valid()) { $.ajax({ url: this.action, type: this.method, cache: false, data: formdata, success: function (status, data) { console.log(data); } }); } return false; }); </script>El controlador de acción recibe dos parámetros, el modelo y el archivo.
[HttpPost] public async Task<JsonResult> controllerAction(HttpPostedFileBase file, Model model) { var json = new { Success = true, StatusCode = "200", ErrorDesc = "OK", ErrorCode = "", NewId = "" }; //some process return Json(json, JsonRequestBehavior.AllowGet); }El problema es por qué cuando finaliza la acción del controlador, se redirige a la URL del controlador de acción.
http://controller/actiony no se queda en la misma página?
¿Qué estoy haciendo mal?
No está impidiendo la acción predeterminada del formulario.
$('form').submit(function (e) { e.preventDefault(); if ($(this).valid()) { $.ajax({ url: this.action, type: this.method, cache: false, data: formdata, success: function (status, data) { console.log(data); } }); } return false; });El problema fue la mala configuración en la parte javascript-ajax
$('form').submit(function () { var formdata = new FormData($('form').get(0)); if ($(this).valid()) { $.ajax({ url: this.action, type: this.method, cache: false, processData: false, contentType: false, data: formdata, success: function (status, data) { console.log(data); } }); } return false; });gracias a Esteban por la ayuda.