MVC Ajax prevent redirect to action controller

Question

In my view I have a modal window, it have the next form...

@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>
}

this is the JS that contains the ajax request

<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>

The action controller receives two parameters the model and file

[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);
}

The problem is why when the controller action finish, it redirects to the action controller url

http://controller/action

and it does not stay on the same page?

What Im doing wrong?

Sounds like the submit event is still propagating. Do you see the same behavior with `$('form').submit(function (e) {` and a `e.preventDefault()`? — Tieson T., Mar 31 '17 at 23:35
The code you have shown will not make a redirect. But the code in you ajax method will never post the values correctly because you have not set the correct options - your need `processData: false,` and `contentType: false,` - refer [this answer](http://stackoverflow.com/questions/29293637/how-to-append-whole-set-of-model-to-formdata-and-obtain-it-in-mvc/29293681#29293681) — , Apr 01 '17 at 04:36
And having `var formdata = new FormData($('form').get(0));` before `$('form').submit(function () {` makes no sense - its serializing the initial form controls before you have even edited anything. You have not shown the relevant and/or correct code to help (unless of course javascript has been disabled). — , Apr 01 '17 at 04:40
@StephenMuecke you're right, like you have said, the problem was the bad config in the ajax. and like you said too, the problem wasn't the prevent in the event with the "return false" it's enough. — Mitch3091, Apr 01 '17 at 05:01
And what do you mean _next form_? Does your view have multiple forms? — , Apr 01 '17 at 05:01
yes, I'm using kendo components, kendo windows, and loading partial views into this components (the forms). I know that I need to change the JS part. — Mitch3091, Apr 01 '17 at 05:12

score 2 · Answer 1 · answered Mar 31 '17 at 23:40

2

You are not preventing the default action of the form.

$('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;
});

answered Mar 31 '17 at 23:40

Travis Acton

4,292
2
18
30

OP already has `return false;` which does prevent the default submit – Apr 01 '17 at 04:32

score 1 · Accepted Answer · answered Apr 01 '17 at 05:20

The problem was the bad config on the javascript- ajax part

$('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;
});

thanks to Stephen for the help.

MVC Ajax prevent redirect to action controller

2 Answers2