Ajax jQuery not always executes action on Controller

Question

I have the Controller method below made in ASP.NET MVC 3 (C#) who returns a PartialView:

public ActionResult InsertEmail(long idPerson)
    {
        PersonEmailViewModel mail = new PersonEmailViewModel();
        mail.email.Person_idPerson = idPerson;
        return PartialView(mail);
    }

The method that I need to execute on submit form is:

[HttpPost]
    public ActionResult InsertNewEmail(PersonEmail mail)
    {
        mail.idPersonEmail = mail.Insert(mail);
        return Json(mail);
    }

My partialView contains this code:

@model PlatformLib_MySql.BLL.Person.PersonEmailViewModel
<form action="" id="frmNewEmail" method="post">
<div>
E-mail: @(Html.TextBoxFor(m => m.email.email))
@(Html.HiddenFor(m => m.email.Person_idPerson))
<input type="submit" value="Insert" id="btnSubmitMailInsert" />
<input type="button" value="Cancel" id="btnCancelMailInsert" />
</div>
</form>

In my JS file I run this code on #btnSubmitMailInsert button:

jQuery("#btnSubmitMailInsert").click(function () {
submitNewEmail();
window.location.reload();
});
function submitNewEmail() {
event.preventDefault();
var mail = {
    email: jQuery("#frmNewEmail #email_email").val(),
    Person_idPerson: jQuery("#frmNewEmail #email_Person_idPerson").val()
};

var request = jQuery.ajax({
    url: '/Person/InsertNewEmail',
    data: mail,
    type: 'POST',
    dataType: 'json',
    cache: false
});

request.done(function (msg) {
    console.log(msg);
});

request.fail(function (msg) {
    console.log(msg);
});
}

My problem is focused on Ajax request. Rarely I can make the "happy way", where on submit click, the event is activated on jQuery, calls the method "submitNewEmail()", that calls an Ajax, executes the method on controller and pass with success. But not so... It always returns with fail, not because error returned by controller method, but simply because ajax doesn't runs properly, doesn't execute the method on controller, even with a breakpoint inserted there (on VS2010). In this JS code posted by me here is an attempt to alternatively solve this problem, unsuccessful. The original code is:

    jQuery.ajax({
    url: '/Person/InsertNewEmail',
    data: mail,
    type: 'POST',
    dataType: 'json',
    cache: false,
    success: function (result) {
        debugger;
        jQuery("#tblEmail").append("<tr><td>Email inserido</td></tr>");
    },
    error: function () {
        debugger;
        alert("Erro ao inserir e-mail.");
    }
});

I left the "console.log(msg)" temporary, just to solve this problem.

Can someone of you tell me what is happening, or to point where is my error?

Answer 1

I found the problem. Everything was right, but some detail damaged the code: window.location.reload();

I made some changes in my code, that looks like it:

    jQuery.ajax({
    url: '/Person/InsertNewEmail',
    data: mail,
    type: 'POST',
    dataType: 'json',
    cache: false
}).done(function (data) {
    // Do something
});

The another way is right too, the only relevant change was:

jQuery("#btnSubmitMailInsert").click(function () {
event.preventDefault();
submitNewEmail();
// window.location.reload // -> Commented for testing and everything worked fine.
});

Thanks for trying to help me. This helped me so much.