<html xmlns="http://www.w3.org/1999/xhtml">
<title>Product App</title>
<input type="text" id="prodId" size="5" />
<input type="button" value="Search" onclick="find();" />
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.0.3.min.js"></script>
var uri = 'api/Products';
$(document).ready(function () {
$.getJSON(uri + '/getProducts')
// On success, 'data' contains a list of products.
$.each(data, function (key, item) {
// Add a list item for the product.
$('<li>', { text: formatItem(item) }).appendTo($('#products'));
function formatItem(item) {
return item.Name + ': $' + item.Price;
var id = $('#prodId').val();
$.getJSON(uri + '/getSingle/' + id)
$('#product').text(formatItem(data));
.fail(function (jqXHR, textStatus, err) {
$('#product').text('Error: ' + err);