Here
in this article I am going to explain how to sort and search the data in grid
and also highlight the searched matched text using Angularjs in MVC
application.
Description:
I
am displaying the data in table using ng-repeat. I want to sort and search the
data in grid also highlight the searched text results.
Implementation:
I
have created a table Employee and inserted dummy record into it. I am using database
first approach.
Model:
public partial class Employee
{
public int Id { get; set; }
public string Name { get; set; }
public Nullable<int> Phone { get; set; }
public Nullable<int> Salary { get; set; }
public string Department { get; set; }
public string ImagePath { get; set; }
public string EmailId { get; set; }
}
Add
Controller
Add
empty Controller. Create json method to fetch the records from database. Here
is code of Controller:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using MVC_Project.Models;
namespace MVC_Project.Controllers
{
public class AngularController : Controller
{
//
// GET: /Angular/
DemoEntities1 db = new DemoEntities1();
public ActionResult Index()
{
return
View();
}
public JsonResult GetEmployees()
{
var emp =
db.Employees.ToList();
return
Json(emp, JsonRequestBehavior.AllowGet);
}
}
}
Add View
Now
add view for Index action. Write the code on view as given below:
Complete
Code of Inedx.Cshtml
@{
ViewBag.Title = "MVC-AngualarJs
Tutorial";
}
<style>
table tr td th {
text-align: center;
border:none;
}
.ng-binding {
padding: 40px;
}
a {
text-decoration: none;
color: #2196F3;
}
/*tr:nth-child(odd)
{
background: #b8d1f3;
}
Define the background color for all the EVEN background rows
tr:nth-child(even) {
background: #dae5f4;
}
.match {
background: #24D0F9;
}*/
.highlighttext {
background: #F44336;
color: #fff;
}
</style>
<fieldset
style="width:90%">
<legend>MVC-AngualarJs Search(Filter)
and Highlight Searched text Tutorial</legend>
<div ng-app="mvcapp" ng-controller="AngularController">
<table>
<tr>
<td>Search :</td>
<td colspan="2"><input type="text" ng-model="empname" placeholder="Search"></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</table>
<table>
<tr>
<th><a href="" ng-click="columnToOrder='id';reverse=!reverse">S.No.</a></th>
<th>
<a href="" ng-click="columnToOrder='Name';reverse=!reverse">Name</a>
</th>
<th>
<a href="" ng-click="columnToOrder='Phone';reverse=!reverse">Phone</a>
</th>
<th>
<a href="" ng-click="columnToOrder='Department';reverse=!reverse">Department</a>
</th>
<th>
<a href="" ng-click="columnToOrder='Salary';reverse=!reverse">Salary</a>
</th>
<th>
<a href="">Image</a>
</th>
<th >
<a href="" ng-click="columnToOrder='EmailId';reverse=!reverse">Email</a>
</th>
</tr>
<tr ng-repeat="emp in employees| filter:empname
|orderBy:columnToOrder:reverse">
<td>{{$index+1}}</td>
<td><span ng-bind-html="emp.Name|highlight:empname"></span></td>
<td>{{emp.Phone }}</td>
<td>{{emp.Department}}</td>
<td>{{emp.Salary }}</td>
<td><img ng-src="{{emp.ImagePath || 'images/image.jpg'}}" alt="" title="{{emp.Name}}" width="150" height="150" /></td>
<td><span ng-bind-html="emp.EmailId ||'email
not available'|highlight:empname"></span></td>
</tr>
</table>
<div ng-show="(employees|filter:empname).length==0" style="color:red;font-weight:bold">No Result Found</div>
</div>
</fieldset>
//Script
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
<script>
var angular = angular.module('mvcapp', []);
angular.controller('AngularController',
['$scope', '$http',function ($scope, $http) {
$http.get('/Angular/GetEmployees').success(function (data) {
$scope.employees = data;
})
}]).filter('highlight', function ($sce) {
return function (text, phrase) {
if (phrase) text =
text.replace(new RegExp('(' + phrase + ')', 'gi'),
'<span
class="highlighttext">$1</span>')
return
$sce.trustAsHtml(text)
}
});
</script>
Now
save the project, build and run. To test it search a record exist in database.
Matched record will be highlight in red color with white text.
What do you think about this article?
If you found this article useful, please share and follow on Facebook, Twitter, Google Plus and other social media websites. To get free updates subscribe to newsletter. Please put your thoughts and feedback in comments section.
EmoticonEmoticon