>I still like you :). And I like the simplicity of populating the dropdown using Angular.js. Do you know if Angular.js would have some functions to store data into the localStorage? Or I have to do it "manually"?
>
>Thank you for all your help! (if not for an important football game tonight, I would continue learning WebAPI tonight, but I have a contractual obligation to my team to watch them :)).
Hope they won. Here's a simple example of a WebApi class:
public class MyController : ApiController
{
[HttpGet]
[Route("customers")]
public HttpResponseMessage GetCustomers()
{
List<Customer> customers = new List<Customer>();
customers.Add(new Customer() { Name = "Viv", Id = 123 });
customers.Add(new Customer() { Name = "Dimitry", Id = 345 });
return Request.CreateResponse(HttpStatusCode.OK, customers);
}
}
public class Customer
{
public string Name { get; set; }
public int Id { get; set; }
}You would need to add 'config.MapHttpAttributeRoutes();' in the Register method in WebApiConfig.cs. Navigating to that link (e.g. http://localhost:51123/customers ) should now show you the XML representation returned by the server. If you want Json then also add 'config.Formatters.JsonFormatter.SupportedMediaTypes.Add(new MediaTypeHeaderValue("text/html"));' to WebApiConfig.cs after which you should see the JSON representation being returned.
A simple example of using this api in the browser with angular (expecting Json):
<!DOCTYPE html>
<html ng-app="myApp" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Customers</title>
<script type="text/javascript" src="/Scripts/angular.js"></script>
</head>
<body>
<script type="text/javascript">
var app = angular.module('myApp',[]);
app.controller('customerController', ['$scope', '$http', customerController]);
function customerController($scope, $http) {
$scope.controller = this;
var customers = [];
var selectedCustomer = null;
var controller = this;
$http({
method: 'GET',
url: '/customers'
}).then(function successCallback(response) {
controller.customers = response.data;
//Save to local storage:
localStorage["Customers"] = JSON.stringify(response.data);
// To retrieve later:
// var customers = JSON.parse(localStorage["Customers"]);
controller.selectedCustomer = response.data[0];
}, function errorCallback(response) {
//Handle failure here
});
}
</script>
<ng-form ng-controller="customerController">
<!--Populate the dropdown-->
<select data-ng-model="controller.selectedCustomer" data-ng-options="c.Name for c in controller.customers"></select>
<!--Show Json for selected:-->
Selected Customer: {{controller.selectedCustomer}}
</ng-form>
</body>
</html>
