Web Api 2中不会触发Ajax成功事件

Question

In my ASP.Net Web Api 2 application I'm using AJAX post to send registration form data to server when submit button was clicked.

function click_form() {
var formData = JSON.stringify({
    Name: $('#regInputName').val(),
    SecondName: $('#regInputLastName').val(),
    Email: $('#regInputEmail').val(),
    Username: $('#regInputUsername').val(),
    Password: $('#regInputPassword').val(),
    Contact: $('#regInputContact').val(),
});

$.ajax({
    url: '/api/Account/registration',
    method: 'POST',
    data: formData,
    contentType: 'application/json;charset=utf-8',
    dataType: 'json',
    cache: false,
    success: function () {
        alert("Success");
    },
    error: function () {
        alter('Error');
    }
});
}

And here is my Web Api Controller where I retund HttpStatusCode.OK if username doesn't exist, and HttpStatusCode.NotFound if username already exist.

[HttpPost]
[Route("api/Account/registration")]
    public HttpResponseMessage registration([FromBody] UserRegModel user)
    {            
        if (!usernames[0].Contains(user.Username))
        {
            User u = new User(){/*....*/}
            /*... updating database ... */

            HttpContext.Current.Session["user"] = u;        
            return new HttpResponseMessage(HttpStatusCode.OK);
        }
        return new HttpResponseMessage(HttpStatusCode.NotFound);
    }

My controller every time return OK or NotFound but Ajax events success and error are never fired.

Does somebody know what is the problem?

Answer 1

Most likely the List/Array of usernames does not contains the posted value. This will result in a 404 status code which is handle by the error callback in the ajax setup.

But, in the error callback you have a typeo where alter() should be alert() and if you change that then most likely the error message will show.

Answer 2

I found few problems -

• Use type: 'POST' instead of method: 'POST'
• If Action method doesn't return any thing, you do not need dataType: 'json' . Otherwise, error function will be called instead of success.

Fix:

<button type="button" onclick="click_form()">Post Form via Ajax</button>
<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script>
    function click_form() {
        var formData = JSON.stringify({
            Name: 'John Doe',
            SecondName: 'Jonny',
            Email: 'johndoe@example.com',
            Username: 'johndoe',
            Password: '123456',
            Contact: 'Jannet Doe'
        });

        $.ajax({
            url: '/api/Account/registration',
            type: 'POST',
            data: formData,
            contentType: 'application/json;charset=utf-8',    
            cache: false,
            success: function (result) {
                console.log(result);
            },
            error: function (result) {
                console.log(result);
            }
        });
    }
</script>

If you use Web API 2, you can use Ok() and NotFound() , and return IHttpActionResult . It is much cleaner and easy to read than old approach.

[HttpPost]
[Route("api/Account/registration")]
public IHttpActionResult Registration([FromBody] UserRegModel user)
{
    if (!usernames[0].Contains(user.Username))
    {
        ...
        return Ok();
    }
    return NotFound();
}

FYI: I tested the above code, and it works fine. So, before you go through complex business logic, try to return Ok() to make sure Ajax works.