Question

[HttpPost]
        public HttpResponseMessage<Response> Login(string username, string password) { ... }

I wonder for the following WebAPI method. How do I pass the parameters into the method? I assume those isn’t the POST data. Since the method did not response when I sent post data from a web form.

<form action="/api/Authenticate/Login" id="loginForm" method="post">
    <fieldset>
    <legend>Userdata:</legend>
        <label for="username">Username</label>
        <input id="username" name="username" type="text" value="" />
        <label for="password">Password</label>
        <input id="password" name="password" type="password" value="" />
        <button type="submit">Login</button>
    </fieldset>
</form>

Answer 1

Web API methods are not intended to be used as actions of HTML forms because they don’t return HTML usually. They are intended to be consumed from regular ASP.NET MVC controllers. So while you could invoke this method using the POST verb and pass the two arguments as part of the POST request body, depending on what media types you have configured would be XML or JSON. Another possibility is to invoke this method using client side javascript AJAX call. Another thing to take into account is the name of the method which is not standard: Login. If you want to be able to invoke it you will need to modify the default route that was created with your application and include the {action} token into the route.

So:

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

should become:

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

and you will send a POST request to /api/somecontroller/login.

And if you want to stick to conventions you will have the following:

public class LoginController : ApiController
{
    // POST /api/login
    public HttpResponseMessage<Response> Post(string username, string password)
    {
        ...
    }
}

and then:

<form action="/api/login" id="loginForm" method="post">
    <fieldset>
    <legend>Userdata:</legend>
        <label for="username">Username</label>
        <input id="username" name="username" type="text" value="" />
        <label for="password">Password</label>
        <input id="password" name="password" type="password" value="" />
        <button type="submit">Login</button>
    </fieldset>
</form>