How to search (filter) records using Angularjs with ASP.NET MVC 5

In this article I am going to explain How to search OR filter records using Angularjs with ASP.NET MVC 5

In the previous article I have explained 4 Easy steps to Embed Google map towebsite, how to solve the Google Maps API MissingKeyMapError and 4 easy stepsto generate Google Maps geocoding API key.

Description:

To filter the data we use the Filter.  I am displaying the data in using ng-repeat in grid format. We can use filter like ng-repeat="city in cities| filter:{CityName:cname}”

Implementation:

I am using database first approach. I have created a table Tb_City and insert some dummy data into database. Complete code given below.

Model:-

    public partial class Tb_City

    {

        public int Id { get; set; }

        public string CityName { get; set; }

    }

Add Controller:

Add an empty controller to project. Create Json action to get data from database.

Compete code of Controller (AngularController.cs):

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 Getcity()

        {          

             var city = db.Tb_City.ToList();

             return Json(city, JsonRequestBehavior.AllowGet);          

        }       

    }

}

Add View

Add view to Index. Design the view as shown below.

Complete code of View(index.cshtml):

@{

    ViewBag.Title = "MVC-AngualarJs Tutorial";

}

<style>

    table tr td th {

        text-align: center;

    }

    a {

        text-decoration: none;

        color: #2196F3;

    }

</style>

@Html.

<h2>MVC-AngualarJs Tutorial : Filter Example</h2>

<fieldset style="width:30%">

    <legend>AngualarJs Tutorial : Filter Example</legend>

    <div ng-app="mvcapp" ng-controller="AngularController">

       <table>

           <tr>

               <td>Search :</td>

               <td colspan="2"><input type="text" ng-model="cname" 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></th>

               <th class="name">

                   <a href="" ng-click="columnToOrder='CityName';reverse=!reverse">CityName</a>

               </th>

           </tr>

           <tr ng-repeat="city in cities| filter:{CityName:cname} |orderBy:columnToOrder:reverse">

               <td>{{city.Id}}</td>

               <td></td>

               <td>{{city.CityName }}</td>

           </tr>

       </table>

        <div ng-show="(cities|filter:cname).length==0" style="color:red;font-weight:bold">No Result Found</div>

    </div>

</fieldset>

  

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.js"></script>

<script>

    var angular = angular.module('mvcapp', []);

    angular.controller('AngularController', function ($scope, $http) {     

        Getallitem()

        function Getallitem()

        {

            $http.get('/Angular/Getcity').success(function (data) {

                $scope.cities = data;

            });

        }   

    });

</script>

Build and run the application. Search the result. If records exist it will be display to you.