How to pass multiple type of parameters in web api from angularjs?

Question

I am struggling pretty badly in passing parameters to my web api.

There are two case I will list them both.

I want to pass a simple string param like this below

    [HttpGet]
    public string VerifyName(string name)
    {

        return name + "hi";
    }

For which I am creating a url like this in my angularjs controller.

var name = "hello";
            var msg = "";
            $http.get('/api/VisitorWeb/VerifyName', name).success(function (data) {
                 msg = data;
            }).error(function (data) {
                $scope.error = "An error has occured while adding! " + data;
            });

This keeps returning 404. Also

{"Message":"No HTTP resource was found that matches the request URI 'http://localhost:43516/api/VisitorWeb/VerifyName'.","MessageDetail":"No action was found on the controller 'VisitorWeb' that matches the request."}

Similarly when I am trying to pass a object it is giving the same result

My angular function

var loginModel = {
           UserName: $scope.UserName,
            PassWord: $scope.Password
        };

        var msg = "";
        $http.get('/api/VisitorWeb/VerifyLogin', loginModel).success(function (data) {
             msg = data;
        }).error(function (data) {
            $scope.error = "An error has occured while adding! " + data;
        });

Web Api Method

[HttpGet]
    public string VerifyLogin(UserLoginDomainModel loginModel)
    {
        //do some business logic
        return "abc ";
    }

Response is 404.

WebApiConfig

public static void Register(HttpConfiguration config)
        {


config.Formatters.JsonFormatter.SupportedMediaTypes.Add(new   MediaTypeHeaderValue("text/html"));

        config.MapHttpAttributeRoutes();

        config.Routes.MapHttpRoute(
            name: "DefaultApi",
            routeTemplate: "api/{controller}/{action}/{id}",
            defaults: new { id = RouteParameter.Optional }
        );
    }

I am thinking there is some problem with the routing that is basic but some how not able to figure out what it is , Please suggest

First noticed that you not mentioned base url full url of your path it should include localhost as well — Wasiq Muhammad
– Wasiq Muhammad, Commented May 17, 2016 at 17:00
For the first example if you change your controller method to accept and use an id parameter instead of name, you could then modify your angular call to $http.get('/api/VisitorWeb/VerifyName/' + name) and it should work. As others have pointed out, get does not accept objects. — Lex
– Lex, Commented May 17, 2016 at 17:28

Federico Dipuma · Accepted Answer · 2016-05-17 20:10:30Z

This action:

[HttpGet]
public string VerifyName(string name)
{
    return name + "hi";
}

defined without attribute routing is mapped to the standard convention routing into the following URL:

http://yourhost/apiVisitorWeb/VerifyName?name=myNameValue

Because your route template "api/{controller}/{action}/{id}" expects a parameter named id (not name) to be part of the URI.

If you want to keep using your routing as is either use the above URI or change the name of your parameter into id, so you should be able to use this address:

http://yourhost/apiVisitorWeb/VerifyName/myNameValue

The same thing applies to your complex type parameters: in GET actions any complex parameter is expected to be bound from the URI as a collection of query string parameters. Your second action will bind to the following URI:

http://yourhost/apiVisitorWeb/VerifyLogin?UserName=userNameValue&PassWord=myPassword

But this is a bad practice for many reasons (security on the top). I strongly suggest you to turn this kind of action into a POST action, so you can send your model as the body of the request.

adam · Accepted Answer · 2016-05-17 16:49:09Z

-2

Give this a try:

$http({ method: "GET", url: "/api/VisitorWeb/VerifyName", params: { name: name} }).success()

answered May 17, 2016 at 16:49

adam

5221 gold badge6 silver badges17 bronze badges

Collectives™ on Stack Overflow

How to pass multiple type of parameters in web api from angularjs?

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related