MVC4 api routing can find one action but not another - ajax

Question

I have the following MVC4 api controller:
public class VisitorController : ApiController
{
private ApplicationDbContext db = new ApplicationDbContext();
public Visitor Get(int id)
{
return db.Visitors.Find(id);
}
public void SaveNotes(int id, string notes)
{
var visitor = db.Visitors.Find(id);
visitor.Notes = notes;
db.SaveChanges();
}
}
the Get works but the SaveNotes doesn't. I can't figure out why, but at run time, SaveNotes can't be found. (For what it's worth, Application Insights can see the attempt to POST to it, and that it gets a 404 error. See: )
Here's how I'm trying to call it: I have a modal dialog, like so:
<div class="modal fade" id="notesModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Notes</h4>
</div>
<div class="modal-body">
<form id="notesForm">
<input type="hidden" name="id" id="notesID"/>
<textarea id="notesTextarea" name="notes"></textarea>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" onclick="saveNotes();">Save</button>
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
</div>
</div>
</div>
</div>
And I have two javascript functions;
function showNotes(id) {
$("#searchingModal").modal("show");
$.ajax("#Url.Action("Get", "API/Visitor")/" + id)
.done(function (data) {
$("#searchingModal").modal("hide");
$("#notesID").val(id);
$("#notesTextarea").val(data.Notes);
$("#notesModal").modal("show");
})
.fail(function (xhr, status, errorThrown) {
$("#searchingModal").modal("hide");
genericError(status, errorThrown);
});
}
function saveNotes() {
//alert("#Url.Action("SaveNotes", "API/Visitor")/");
$.ajax({ url: "#Url.Action("SaveNotes", "API/Visitor")/", data: $("#notesForm").serialize(), method:"POST" })
.done(function () {
$("#notesModal").modal("hide");
})
.fail(function (xhr, status, errorThrown) {
$("#notesModal").modal("hide");
genericError(status, errorThrown);
});
}
The function showNotes works great. I run an ajax request, it calls Get on the visitor controller, a visitor is returned, I populate that textarea with the Notes field, and show the modal. The problem is saveNotes. Every time I click the save button on the modal I get the failure function instead of the done function. The errorThrown is "Not Found". So how is it that only one action can't be found? I've tried putting the [HttpPost] attribute on it. I've tried making the id a nullable int (even though it's already optional in the route config, see:
config.Routes.MapHttpRoute(
name: "DefaultApi",
routeTemplate: "api/{controller}/{action}/{id}",
defaults: new { id = RouteParameter.Optional }
);
). I've tried making savenotes return a string instead of void. I've tried using $.post instead of $.ajax.

Answer 1

When you're getting post data, it must be an object. So make an object like
public class SaveNotesInput
{
public int id { get; set; }
public string notes { get; set;}
}
change your function to accept that class, like so:
public void SaveNotes(SaveNotesInput input)
and it should work.
(couldn't tell you why)
(Credit to Ju66ernaut's comment, I'm just making this an answer for easier searchability)