No response from web service when a POST is sent from client - asp.net

Question

My web service uses asp.net web api. Currently my api controller doesn't do anything because I want to inspect the post to see what I'm working with here.
You'll notice that I'm posting to localhost. That's because currently I'm only running the service app in the debugger so that I can inspect the post via a Watch.
My problem is that it doesn't seem like my post is going anywhere. The breakpoint that I've set on the Post void never gets hit when I submit the form from the webpage.
Am I misunderstanding how this is supposed to work here?
Controller
public class CashbackController : ApiController
{
// POST api/<controller>
public void Post([FromBody]string value)
{
}
}
Client web page
<form action="http://localhost:49474/api/Cashback" method="post">
<p>
API Key: <input type="text" name="_apikey" /><br />
Receipt No: <input type="text" name="_receipt" /><br />
Purchase Date: <input type="text" name="_date" /><br />
Cashback Total: <input type="text" name="_cashback" />
</p>
</form>
<p><input type="submit" value="Submit" /></p>
<script>
$(document).ready(function() {
alert("JQuery works");
});
$("input[type=submit]").on("click", function () {
$("form").submit();
});
$("form").submit(function () {
$.post($(this).attr("action"), $(this).serialize(), function(data) {
if (!data.IsOK) {
alert("Error: " + data.Error);
}
else
{
alert("Post successful.");
}
return;
});
return false;
});
</script>
EDIT
Inspecting with fiddler, it doesn't look as though my clicking on the submit button is doing anything at all...
Correctly referenced jquery and fiddler caught this:
POST http://localhost:49474/api/Cashback HTTP/1.1
Host: localhost:49474
User-Agent: Mozilla/5.0 (Windows NT 6.1; WOW64; rv:36.0) Gecko/20100101 Firefox/36.0
Accept: /
Accept-Language: en-GB,en;q=0.5
Accept-Encoding: gzip, deflate
DNT: 1
Content-Type: application/x-www-form-urlencoded; charset=UTF-8
Referer: http://localhost/servicepost/
Content-Length: 85
Origin: http://localhost
Connection: keep-alive
Pragma: no-cache
Cache-Control: no-cache
_apikey=abcdefghijklmnopqrstuvwxyz&_receipt=1234567890&_date=2015-03-31&_cashback=100
However, in my controller, value is still null

Answer 1

Mkay so there were a few things wrong here...
First, I hadn't referenced the correct jquery source
NOTE: Only ever use the googleapis link(this one is to jquery 2.1.3.min) or another such link as you see fit. It's just simpler
Secondly, my controller wasn't accepting the correct type. Now this is where I really got confused because the client app isn't going to know what models my api uses.
Turns out it's just a matter of mirroring the model on the client app that posts to the api. So consider the following
public class UserController : ApiController
{
// POST api/<controller>
public void Post([FromBody]User Value)
{
}
}
public class User
{
public int ID { get; set; }
public string Username { get; set; }
public string EmailAddress { get; set; }
}
The form must post a mirror of the model which in this case would look something like this:
<form method="post" action="path-to-service/api/User">
<div>
Username: <input type="text" name="Username" /><br />
Email Address: <input type="text" name="EmailAddress" />
</div>
</form>
The ajax post above will work but will need to be modified to do exactly what you want it to. Typically I just throw in some error handling into at if statement and a redirect into the else.