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....