How to search (filter) records using Angularjs with ASP.NET MVC 5 | ASPMANTRA | Asp.Net,MVC,AngularJs,Jquery,Javascript,Sql Server AND WCF 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.



Post a Comment

[blogger]

MKRdezign

Contact Form

Name

Email *

Message *

Powered by Blogger.
Javascript DisablePlease Enable Javascript To See All Widget