How to pass parameter from JS to Controller in ASP API - asp.net-web-api

Question

I'm running LINQ queries against a DB model of traffic data.
The html page has a dropdown menu from which I will get a selectedInjury value to modify the query results (it is mocked here). I cannot figure out how to pass the value to the Controller.
Each variation I've tried responds with
Failed to load resource: the server responded with a status of 500 (Internal Server Error)
This is the Javascript I'm trying to get working:
var mockSelectedInjury = "FATAL";
$.getJSON("/api/query1/selectedInjury", mockSelectedInjury)
.done(function (data) {
$.each(data, function (key, crash) {
$('<li>', { text: formatCrashReport(crash) }).appendTo($('#crashTable'));
});
});
This is the method I've written in the controller:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using final.Models;
using System.Net;
using System.Net.Http;
using System.Web.Http;
namespace final.Controllers
{
public class CrashController : ApiController
{
ChicagoTrafficEntities myEntities = new ChicagoTrafficEntities();
[Route("api/query1")]
[HttpGet]
public IHttpActionResult GetQuery(string selectedInjury)
{
List<CrashReport> returnList = new List<CrashReport>();
//get a selection of all the data where injury matches
var records = from report in myEntities.CrashReports
where report.MostSevereInjury == selectedInjury
select new
{
PrimeContributingCause = report.PrimeContributingCause,
};
// add the query items to a list
foreach (var item in records)
{
CrashReport temp = new CrashReport
{
PrimeContributingCause = item.PrimeContributingCause
};
returnList.Add(temp);
}
// create a new query from that set that includes a count of the
// occurrences of the injury per the primeCause.
var foo = returnList.GroupBy(n => n.PrimeContributingCause).
Select(group =>
new
{
PrimeContributingCause = group.Key,
NumberInjuries = group.Count()
}).OrderByDescending(n => n.NumberInjuries);
return ResponseMessage(Request.CreateResponse(HttpStatusCode.OK, Json(foo)));
}
}
}

Answer 1

If your Web API expects a URL that looks like api/query1/FATAL, then you should construct the URL in JavaScript accordingly:
var mockSelectedInjury = "FATAL";
$.getJSON("/api/query1/" + mockSelectedInjury)
.done(function (data) {
// ...
});
Alternative: Using query parameters
If you want to send Query-Parameters (instead of parameters being part of the path), then you construct an object and pass that as the second parameter:
var paramContainer = {'selectedInjury': 'FATAL'};
$.getJSON("/api/query1", paramContainer)
.done(function (data) {
// ...
});
The signature of your API method would look like this:
[Route("api/query1")]
[HttpGet]
public IHttpActionResult GetQuery(string selectedInjury)
{
}