Ajax Call returns status 0 in mvc

Question

I am looking to post the data from my view to controller using ajax. But when i tried with the below code, ajax call always fires error with status code 0 and not passing the data to controller.

How can i modify my code to pass the data to controller. Any help appreciated thanks in advance.

Submit Button Code

 <input class="btn btn-success" type="submit" value="Submit" onclick="GetData();" />                                                                                                                                              

Ajax Call

   function GetData() {
        $.ajax({           
        url: '@Url.Action("CaptureUserData","Home")',
        data: {
            IdentityNo: "1", FullName: "test",Dob:"12", Gender: "m", 
            PhoneNo: "000", PhoneNo1: "000",
            Email: "ooo", Category: "000", Password: "000"
        }, 
        method: 'post',
        dataType: 'json',
        async: false,
        success: function (response) {
            alert('Success');
        },
        error: function (xhr, status, error) {                
            alert(xhr.status);
        }
    });
}

Controller

  [HttpPost]
    public ActionResult CaptureUserData(string IdentityNo, string FullName, 
    string Dob,string Gender, string PhoneNo, string PhoneNo1,                                            string Email, string Category, string Password                                          )
    {

        return Json(new { IdentityNo = IdentityNo });
    }

Answer 1

 function GetData() {

     var frmdata = getJsonData();

       var json = $.toJSON(frmdata);

        $.ajax({           
        url: '@Url.Action("CaptureUserData","Home")',
        data: json,
        method: 'post',
        dataType: 'json',
        async: false,
        contentType: 'application/json;charset=utf-8',
        success: function (response) {
            alert('Success');
        },
        error: function (xhr, status, error) {                
            alert(xhr.status);
        }
    });
}


function getJsonData() {
   return {
            IdentityNo: "1", FullName: "test", Gender: "m", PhoneNo: "000", 
            PhoneNo1: "000",
            Email: "ooo", Category: "000", Password: "000"
        };
}

<input type=”button” name=”btnSubmit″ id=”btnSubmit″ value=”Submit” onClick=”GetData()”>

Also confirm that you are making request from a same domain

Answer 2

well first of all you need to specify if you want to post data with Json or not, and then you must specify if you want to return the data with Json or not.

Example ( Post data without json stracture and return json result): Your controller must look like:

[HttpPost]
    public JsonResult CaptureUserData(string IdentityNo, string FullName, 
    string Dob,string Gender, string PhoneNo, string PhoneNo1,                                            string Email, string Category, string Password                                          )
    {
        return Json(IdentityNo);
    }

As you see the return type must be JsonResult and not ActionResult.

The ajax call must looke like this :

function GetData() {
        $.ajax({           
        url: '@Url.Action("CaptureUserData","Home")',
        data: {
            IdentityNo: "1", FullName: "test",Dob:"12", Gender: "m", 
            PhoneNo: "000", PhoneNo1: "000",
            Email: "ooo", Category: "000", Password: "000"
        }, 
        method: 'post',
        contentType: 'application/x-www-form-urlencoded; charset=UTF-8',
        success: function (response) {
            alert('Success');
        },
        error: function (xhr, status, error) {                
            alert(xhr.status);
        }
    });
}

The contentype as you must be 'application/x-www-form-urlencoded; charset=UTF-8' which is default.