Failed to call action method using Ajax

Question

Here's my JS (jQuery and Ajax) code:

    $('#submitSignUp').click(function () {
    var name = $('#name').val();
    var email = $('#email').val();
    var password = $('#password').val();
    $.ajax({
        url: '@Url.Action("SignUp")',
        type: "POST",
        contentType: 'application/json; charset=utf-8',
        dataType: "json",
        data: JSON.stringify({ name: name, email: email, password: password }),
        success: function () {
            alert("Rgistered.");
        }
    })
})

and this is my action method. (It's in "Home controller"):

        [HttpPost]
    public JsonResult SignUp(string name, string email, string password)
    {
        TodoNet.Models.TodonetModel database = new TodoNet.Models.TodonetModel();
        TodoNet.Models.User oUser = new TodoNet.Models.User()
        {
            FirstName = name,
            LastName = name,
            Email = email,
            Password = password,
            Salt = password,
            IsDeleted = false,
            IsOnline = false,
            PhoneNumber = "09212131212",
            RegisterDate = DateTime.Now,
            LastLoginDate = DateTime.Now
        };
        database.Users.Add(oUser);
        database.SaveChanges();
        return new JsonResult();
    }

but I don't know why it doesn't work. after clicking on the '#signUpSubmit' button, the "alert("Registered.")" will not be shown. What am I doing wrong??

Note: without using Ajax, (by using ordinary send form data to the action method, everything works properly (It means I know that there's nothing wrong with the back-end code)

Answer 1

If the form submitting normally works, then your ajax should be sending form data not json.
Also, prevent the default action of the button click.

$('#submitSignUp').click(function (e) {
    e.preventDefault();
    $.ajax({
        url: '@Url.Action("SignUp")',
        type: "POST",
        dataType: "json",
        data: $("#the_form_id").serialize(),
        success: function () {
            alert("Rgistered.");
        }
    });
});

Answer 2

Try this as your ajax method -

$('#buttonID').on("click",function() {
var data=
{
    var name = $('#name').val();
    var email = $('#email').val();
    var password = $('#password').val();
};
    $.ajax({
        url: '@Url.Action("SignUp","ControllerName")',
        type: "POST",
        contentType: 'application/json; charset=utf-8',
        dataType: "json",
        data: JSON.stringify(data),
        success: function () {
            alert("success");
        }
    });
});

Answer 3

You can also do this way.

On your submitSignUp submit your parameter as following.

 var param = 
 {
    name: $('#name').val(),
    email: $('#email').val(),
    password: $('#password').val()
 };
 $.ajax({
        url: '@Url.Action("SignUp")',
        type: "POST",
        dataType: 'json',
        data: JSON.stringify(param),
        async: false,
        cache: false,
        traditional: true,
        contentType: 'application/json',
        success: function (data) {
            alert(1)
        },
        error: function (XMLHttpRequest, textStatus, errorThrown) {
            //alert(errorThrown);
            return false;
        }
    });

Change your controller:

[HttpPost]
public ActionResult SignUp(string name, string email, string password)
{
  //other implementation
  return Json("", JsonRequestBehavior.AllowGet);
}

Hope this helps!