How to search (filter) records using Angularjs with ASP.NET MVC 5 - Free Asp.Net,MVC,AngularJs,Jquery,Javascript,Sql Server,WCF,Entity framework snippets and tutorial

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

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


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.



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.

Share this

Share on FacebookTweet on TwitterPlus on Google+


EmoticonEmoticon