Question

I’m doing an Ajax request to an MVC3 action and I want to process the JsonResult in the success or error function.
Currently the behaviour is strange: Before hitting my breakpoint in the action it hits the error function.
Can anyone help me please and has a hint?

My view:

<form id="myForm">
    //fields go here...
    <button id="myButton" onclick="myFunction();">ButtonName</button>
</form>

The ajax call:

function myFunction() {    
if ($('#myForm').valid() == false) {
    return;
}
var data = {
    val1: $("#val1").val(),
    val2: $("#val2").val()
};
var url = "/Controller/Action";
$.ajax({
    url: url,
    type: 'POST',
    dataType: 'json',
    cache: false,
    data: data,
    success: function (data, statusCode, xhr) { 
        alert('1');
        if (data && data.Message) {
            alert(data.Message);
            alert('2');
        }
        alert('3');
    },
    error: function (xhr, errorType, exception) { 
        alert('4');
        var errorMessage = exception || xhr.statusText; 

        alert("There was an error: " + errorMessage);
    }
});
return false; 

}

My action:

[HttpPost]
    public ActionResult Action(Class objectName)
    {
        var response = new AjaxResponseViewModel();

            try
            {
                var success = DoSomething(objectName);

                if (success)
                {
                    response.Success = true;
                    response.Message = "Successful!";
                }
                else
                {
                    response.Message = "Error!";
                }
            }
            catch (Exception exception)  
            {  
                response.Success = false;  
                response.Message = exception.Message;   
            }

            return Json(response); 
    }

If you look in the ajax call I get directly the alert #4 and only then the action gets called which is too late. Unfortunately the exception is null. Directly after that the view gets closed.

Answer 1

You are not preventing the default onclick behavior. Can you try the following instead?

onclick="return myFunction()"