AngularJS With MVC Web API - Part 3

Kunal Patel

C#MVC Web API jQuery AngularJSAngularJS With MVC Web API

12 Comments

Join the conversation! Your thoughts help the community grow.

My Previous Articles

I have used the following method in this article:

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

<table class='table table-bordered'>
<tr>
<th>Name</th>
<th>Description</th>
<th colspan="2">Action</th>
</tr>
<tr>
<th>
<label for="description">Filter By Description-> </label>
</th>
<th>
<input type="text" ng-model="search.ProductDescription" placeholder="Enter Description" class="form-control"></th>
<th colspan="2"></th>
</tr>
<tr ng-repeat="Product in Products | filter:search ">
<td>{{ Product.ProductName}}</td>
<td>{{ Product.ProductDescription}}</td>
<td><span><a href="javascript:void(0);" ng-click="edit(Product);">
<img width="16" height="16" alt="Close" src="Image/Edit.jpg" /></a></span></td>
<td><span><a href="javascript:void(0);" ng-click="delete(Product.Id);">
<img width="16" height="16" alt="Close" src="Image/close.png" /></a></span></td>
</tr>
</table>

Controller page (ProductInfoController.cs)

API Controller page(ProductInfoAPIController.cs)

Service.js

Output

You can also test the output here.