Now that we finished our model and controller let’s see how to get data using the jQuery library from any web page. We create a new page and we page the following code.
@inherits Umbraco.Web.Mvc.UmbracoTemplatePage
@{
Layout = null;
}
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>@Umbraco.Field("title")</title>
<meta name="description" content="@Umbraco.Field("description")">
<meta name="keywords" content="@Umbraco.Field("keywords")">
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$.getJSON('/umbraco/api/ProductsApi/GetAllProducts')
.done(function (data) {
var output = "";
$.each(data, function (key, item) {
output += item.Name + ": €" + item.Price + "<br />";
});
$("#lblList").html(output);
})
.fail(function () {
// Error occured
})
.always(function () {
// Completed
});
$.getJSON('/umbraco/api/ProductsApi/GetProductById', { id : 2 })
.done(function (data) {
var output = data.Name + ": €" + data.Price + "<br />";
$("#lblItem").html(output);
})
.fail(function () {
// Error occured
})
.always(function () {
// Completed
});
var model = {};
model.ID = 3;
model.Name = "Product 4";
model.Price = "42";
$.ajax({
type: "POST",
url: "/umbraco/api/ProductsApi/Update",
data: JSON.stringify(model),
contentType: "application/json; charset=utf-8",
dataType: "json",
statusCode: {
200: function (data) {
var output = "ID returned : " + data.ID + "<br />" +
"Product Exists : " + data.ProductExistsInDatabase;
$("#lblUpdateInfo").html(output);
}
},
error:
function (res) {
// Error occured
}
});
});
</script>
</head>
<body>
<h2>All Products</h2>
<div id="lblList"></div>
<h2>One Product</h2>
<div id="lblItem"></div>
<h2>Update Product</h2>
<div id="lblUpdateInfo"></div>
</body>
</html>The example above just calls the three actions that we created and displays the retrieved data on the page. For the actions which use the GET method we used the jQuery getJSON method which is very simple to use.
For the action which uses the POST method we used the jQuery ajax method which allow use to define more information of how the request is going to occur.
The output of the code above is the following.
