Post
Ask Question

AngularJS With MVC Web API - Part 3

I have used the following method in this article:
  • Used MVC Web API.
  • AngularJs Filter.
SQL Script is available in part 1  (link is given above)
 
View page Index.cshtml
  • Here I have used filter for description.
  • I placed filter:search in my ng-repeat and used in description text box ng-model ="search.ProductDescription".
  1. <table class='table table-bordered'>  
  2.             <tr>  
  3.                 <th>Name</th>  
  4.                 <th>Description</th>  
  5.                 <th colspan="2">Action</th>  
  6.             </tr>  
  7.             <tr>  
  8.                 <th>  
  9.                     <label for="description">Filter By Description-> </label>  
  10.                 </th>  
  11.                 <th>  
  12.                     <input type="text" ng-model="search.ProductDescription" placeholder="Enter Description" class="form-control"></th>  
  13.                 <th colspan="2"></th>  
  14.             </tr>  
  15.             <tr ng-repeat="Product in Products | filter:search ">  
  16.                 <td>{{ Product.ProductName}}</td>  
  17.                 <td>{{ Product.ProductDescription}}</td>  
  18.                 <td><span><a href="javascript:void(0);" ng-click="edit(Product);">  
  19.                     <img width="16" height="16" alt="Close" src="Image/Edit.jpg" /></a></span></td>  
  20.                 <td><span><a href="javascript:void(0);" ng-click="delete(Product.Id);">  
  21.                     <img width="16" height="16" alt="Close" src="Image/close.png" /></a></span></td>  
  22.             </tr>  
  23.         </table>  
Controller page (ProductInfoController.cs)
  1. public ActionResult Index()  
  2.        {  
  3.            return View();  
  4.        }  
API Controller page(ProductInfoAPIController.cs)
  •  Here I have written method for getting data from my model.
  1. public class ProductInfoAPIController : ApiController  
  2.     {  
  3.   
  4.         private readonly TestProductEntities db = new TestProductEntities();  
  5.   
  6.         // GET: api/ProductInfoAPI  
  7.         public string GetProductInfos()  
  8.         {  
  9.             var serializer = new JavaScriptSerializer();  
  10.             return (serializer.Serialize(db.ProductInfoes.ToList()));  
  11.         }  
  12.   
  13.     }  
Service.js
  • Below I have declared get service for fetching data.
  • Also my Controller.js and App.js is same as my previous article.
  • I have attached the source code.
  1. app.factory('AngularService', ['$http', function ($http) {  
  2.            return {  
  3.                get: function () {  
  4.                    return $http({  
  5.                        method: 'GET',  
  6.                        headers: {  
  7.                            'Content-Type': 'application/json; charset=utf-8'  
  8.                        },  
  9.                        url: '/api/ProductInfoAPI/GetProductInfos',  
  10.                        data: {}  
  11.                    });  
  12.                },  
  13.    };  
  14. ]);  
Output 

You can also test the output here.
 


Similar Articles