Search records using AngularJS in Asp.net MVC

What is AngularJS ?

Angular Js is a popular Javascript framework for web application development as it gives the flexibility and resources to develop user-friendly, flexible and platform independent web applications.

It extends HTML attributes with directives and binds data to HTML with expressions.The different built-in directives(ng-directives) offer different functionalities such as :

    • ng-app: This directive initializes an AngularJS application
    • ng-module: This directive binds the value of HTML controls (input, select, textarea) to application data.
    • ng-controller: Defines the controller object for an application
    • ng-repeat: Defines a template for each data in a collection.
    • ng-src: Specifies the src attribute for the <img> element.
    • ng-model : Binds the value of HTML controls (input, select, text area) to application data.
    • ng-bind : Binds application data to the HTML view.



Let us start by creating an MVC project in Visual Studio and giving it a suitable name(say AngularJSwithASP).



On creation of the project, create a javascript file say ‘Script.js’ in the scripts folder.

In the script file we will create a module using ‘angular.module’ which will contain the controller (empController). Going further we will filter the records based on name of the employee using ‘scope’ object.

var app = angular
    .module("myModule", [])
    .controller("empController", function ($scope) {
        var Employees = [
            { name: "Name1", Designation: "D1", EmpId: 01, Practice: "Practice1" },
            { name: "Name2", Designation: "D2", EmpId: 02, Practice: "Practice2" },
            { name: "Name3", Designation: "D1", EmpId: 03, Practice: "Practice3" },
            { name: "Name4", Designation: "D3", EmpId: 04, Practice: "Practice1" },
            { name: "Name5", Designation: "D3", EmpId: 05, Practice: "Practice2" },
        $scope.Employees = Employees;
      $scope.search = function (item)
                if (item.Member.toLowerCase().indexOf($scope.searchText.toLowerCase()) != -1 || item.name.toLowerCase().indexOf($scope.searchText.toLowerCase()) != -1)
                    return true;
                return false; 


After this, we will create a controller class file and give it a suitable name(in my case HomeController.cs) and simply return the view in it.


using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace AngularJSwithASP.Controllers
    public class HomeController : Controller
        public ActionResult Index()
            return View();



Proceeding further, we  will create a view file and give it a suitable name(Index.cshtml). This will display the employee info such as employee name, employee designation etc.

    ViewBag.Title = "Angular With Asp.net";


<script src="Scripts/angular.min.js"></script>
<script src="Scripts/Script.js"></script>
<link href="Styles.css" rel="stylesheet" />
<body ng-app="myModule">
    <h2 style="color: Blue; text-align: center; font-style: oblique">Employee Data</h2>
        <div ng-controller="empController">
            <input type="text" placeholder="SEARCH"
                   ng-model="searchText" />
            <br /><br />
            <table align="center" border="1" cellpadding="4" cellspacing="4">
                        <th style="background-color: #bce8f1;color: blue"> EMP ID</th>
                        <th style="background-color: #bce8f1;color: blue">NAME</th>
                        <th style="background-color: #bce8f1;color: blue">DESIGNATION</th>
                        <th style="background-color: #bce8f1;color: blue">PRACTICE</th>
                    <tr ng-repeat="Employee in Employees | filter: search">
                        <td> {{ Employee.EmpId }} </td>
                        <td> {{ Employee.name }} </td>
                        <td> {{ Employee.Designation  }} </td>
                        <td> {{ Employee.Practice  }} </td>


Employee Data :




On searching the employee by name(Name1 in this case), we get the following result.

Finally, we have learned about AngularJS and how it can be used with an ASP.Net mvc application to filter records in a step by step manner.

About The Author