No action was found on the controller that matches the request

How to post the data from json, in Angularjs $http.post we get this error. why we get this error only when we try to post the json object rather than query string. When we pass the parameter in query string same action method works as it should be. It's a very simple article so we are going to check everything by opening every nut and shell. We will use Web API 2 route to customize the URL as well.

Let's try first with a get method without any parameter

// GET: api/User
public IEnumerable<string> Get()
{
    return new string[] { "value1", "value2" };
}

It's very simple action which return an enumerable string, let write the code to call it by using jquery

$.ajax({
    url: 'api/user',
    type: 'GET',
    dataType: 'json',            
    success: function (data) {                
       // play with your data;
    },
    error: function (error) {
        alert(error);
    }
}); 

If you are using Angularjs then it is more easy

return $http({
    url: 'api/user',
    method: 'GET',
    type: 'application/json'
}).then(function (data) {
    // play with your data;
});

So far so good, let's create an action which will accept user name and password and mothod type post

[Route("api/user/login")]
[HttpPost]
public User Login(strin email, string password)
{
    var user = db.Users.FirstOrDefault(x => x.Email == email &&
                x.Password == password);
    return user;
}

See how I decorated the url of this action method, it is not necessary but clarity. While calling it we will try to pass a json data to call this action and let's see it succeeds

var credentials = {'email': 'someemail@hotmail.com', 'password': '123456'};
return $http({
    url: 'api/user/login',
    method: 'POST',
    type: 'application/json',
    data: credentials
}).then(function (user) {
    // check the user is null or not and take action
}).error(function (error) {
    alert('invalid');
});

It will always give the error "No action was found on the controller 'user' that matches the request".

So what is wrong in it, every thing in our JavaScript side is correct but when we post the data it expect an action have parameter object which have to have two properties 'email' and 'password' and there is no such action but directly we accepting two parameters of type string.

if we will try with query string everything will work, like this

 url: 'api/user/login?username=someemail@hotmail.com&password=123456'

Which we don't want, even in this case you might accept it but if there is a form with 20 field you don't like it to pass everything in query string. So how to fix it. Let's create a model called Credential

public class Credential
{
    public string username { get; set; }
    public string password { get;set; }
}

And change the parameter in our action to pass this model, now it will look like

[Route("api/user/login")]
[HttpPost]
public User Login(Credential credential)
{
    var user = db.Users.FirstOrDefault(x => x.Email == credential.email &&
                x.Password == credential.password);
    return user;
}

Now call the same method and it will work smooth.

To test any web api method better to use the Chrome Advanced Rest Client it will save your day

Other blogs you may like

Using Ajax for Update a View and then Update Data

this blog has been... By Amin Rahdar   On 26 May 2015  Viewed: 331

Ajax Roundedcornersextender padding and margin problem

Ajax Rounded corners extender is used to give corner to any elements like panel and div etc. Most of the time you will need to give the padding to give some space between the border and content, same is used for margin to give some vertical and horizontal space between different controls, but if... By Alicia Gonzalez   On 15 Jun 2013  Viewed: 840

Ajax AsyncFileUpload control example in asp.net to upload only images

Ajax introduced two new controls AsyncFileUpload and SeaDragon, in this article we will see about Asynchronous file upload control, with its different properties and usage. 1. [AsyncFileUpload][1]: by using this control we can upload a file asynchronously (without postback). The file uploading... By Ali Adravi   On 20 May 2013  Viewed: 6,637

Ajax fill country state and city without postback in asp.net

Country will be filled on page load and once user will select any country we will fill states from that country and again when user will change state we will fill city for that state without postback ( asynchronously) with the help of update panel in asp.net. Create three methods to fetch... By Hamden   On 04 May 2013  Viewed: 6,137

Ajax Modalpopupextender show hide from code behind and by javascript

In this article we will discuss different way of show and hide (open and close) modal popup by using Ajax ModalPopupExtender, how to open/close a modal popup from code behind in asp.net or by using JavaScript, how to use multiple buttons to hide the modal popup in asp.net etc. Suppose we have a... By Jonathan King   On 08 Apr 2013  Viewed: 28,543