using System.Collections.Generic; using System.Web.Http; namespace MvcApplication1.Controllers { public class EquipmentController : ApiController { [HttpPost] public List<Item> Items() { //In reality build this from the datatable return new List<Item> { new Item {Company = "XYZ Inc", Id = "12345", Model = "Teleporter Mk2"}, new Item {Company = "ABC Inc", Id = "23456", Model = "Stun Gun"}, new Item {Company = "Arr Inc", Id = "23456", Model = "Warp Drive"} }; } } public class Item { public string Id { get; set; } public string Company { get; set; } public string Model { get; set; } } }html page:
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" ng-app> <head> <title></title> <script src="scripts/angular.js"></script> <script src="Scripts/jquery-1.8.2.js"></script> </head> <body> <form data-ng-controller="EquipCtrl"> <input id="loadBtn" type="button" value="Load Data" data-ng-click="LoadData()" /> <table> <tr> <th>Id</th> <th>Company</th> <th>Model</th> </tr> <tr ng-repeat="item in EquipmentList" data-ng-click="showrow(item)"> <td>{{item.Id}}</td> <td>{{item.Company}}</td> <td>{{item.Model}}</td> </tr> </table> <p> <input id="Text1" type="text" data-ng-model="currentItem.Id" /> <input id="Text2" type="text" data-ng-model="currentItem.Company" /> <input id="Text3" type="text" data-ng-model="currentItem.Model" /> </p> </form> </body> <script type="text/javascript"> function EquipCtrl($scope, $http) { $scope.currentItem = null; //currently selected item $scope.EquipmentList = []; //list of items //async call to the webapi: $scope.LoadData = function () { $http.post('/api/Equipment/items') .success(function (data, status, headers, config) { $scope.EquipmentList = data; }); }; //Change current item when row is clicked $scope.showrow = function (item) { $scope.currentItem = item; }; } </script> </html>Not pretty since I've not applied any styling. If you want to try it just add the controller to a new MVC/WebApi project Controllers folder. Make sure you have angular.js in the scripts section. Note how the table contents change when editing one of the textboxes....