MVC Asp.Net Controller returns raw JSON to new window

Question

like my title says, I have a problem where my MVC Controller alwas returns the JsonResult in an new window and don't return it back to the ajax success event.

I also tried to GET the data from the Controller via Ajax or change the contenttype to something like "application/json", but I always get a new window with my raw Json data. In my opinion, the problem has to be something with the controller or the javascript is unable to catch the json data.

It's also not a browser specific problem, I have this in every common browser.

Is there anything I miss or is it just weird?

Controller:

    public JsonResult Update(ChangeUserInformationViewModel model)
    {
        var user = UserManager.FindById(User.Identity.GetUserId());
        user = model.User;
        UserManager.Update(user);
        return Json(new { success = true }, JsonRequestBehavior.AllowGet);
    }

Ajax:

$(document).ready(function () {

$('#save-user-alert').click(function () {
    $("#ChangeUserInformation").submit();
});

$('#save-user-alert').on("submit", function (event) {
    event.preventDefault();
    var url = $(this).attr("action");
    var formData = $(this).serialize();

    $.ajax({
        type: "POST",
        url: url,
        data: formData,
        contentType: "json",
        success: function (resp) {
            if (resp.success) {
                swal("Goo Job!", "Yippii", "success");
            };
        },
        error: function (resp) {
            swal("Failes", "Upps.. something went wrong", "danger");
        }
    });
});

});

Html:

@using (Html.BeginForm("Update", "User", FormMethod.Post, new { id = "ChangeUserInformation" }))
                            {
                                <div class="form-group">
                                    <label for="Username">Username</label>
                                    @Html.TextBoxFor(x => x.User.UserName, new { @class = "form-control", value = Model.User.UserName, id = "Username" })
                                </div>

                                <div class="form-group">
                                    <label for="FirstName">First Name</label>
                                    @Html.TextBoxFor(x => x.User.Firstname, new { @class = "form-control", value = Model.User.Firstname, id = "FirstName" })
                                </div>
                                <div class="form-group">
                                    <label for="LastName">Last Name</label>
                                    @Html.TextBoxFor(x => x.User.LastName, new { @class = "form-control", value = Model.User.LastName, id = "LastName" })
                                </div>
                            }
                            <button class="btn btn-danger waves-effect waves-light btn-sm" id="save-user-alert">Click me</button>

Pleas help me!

Sebastian

Answer 1

I think the problem is that you are using the form Submit for your ajax call.

Change your javascript code into this to remove the submit behavior:

$('#save-user-alert').click(function () {

event.preventDefault();
var url = $(this).attr("action");
var formData = $(this).serialize();

$.ajax({
    type: "POST",
    url: url,
    data: formData,
    contentType: "json",
    success: function (resp) {
        if (resp.success) {
            swal("Goo Job!", "Yippii", "success");
        };
    },
    error: function (resp) {
        swal("Failes", "Upps.. something went wrong", "danger");
    }
 });
});

Answer 2

You are gettting the JSON response in the browser because your code is not doing an ajax post, instead it is doing a normal form submit.

Why is it not doing the ajax submit ?

Because you do not have any code which says to do so. You are binding the submit event to the wrong element. You should bind it to the form, not the button.

$('#ChangeUserInformation').on("submit", function (event) {
     event.preventDefault();
   // do your ajax call
});

Now when user clicks the other button, it will call the submit event on the form and the above submit event handler will be invoked and it will make an an ajax call..