Angular

Search Records Using AngularJS In ASP.NET MVC

Introduction

AngularJS is an MVC based framework. Google developed AngularJS. AngularJS is an open source project, which can be used freely, modified and shared by others.

Top features Of AngularJS

Two Way Data-Binding
This means that any changes to the model updates the view and any changes to the view updates the model.

Dependency Injection
AngularJS has a built-in Dependency Injection, which makes application easier to develop, maintain and debug in addition to the test.

Testing
Angular will test any of its code through both unit testing and end-to-end testing.

Model View Controller
Split your application into MVC components. Maintaining these components and connecting them together means setting up Angular.

To Know more details about AngularJS Visit My Site

http://www.c-sharpcorner.com/article/introduction-to-web-services-using-angularjs-in-asp-net-mvc/
 
Steps

Create a mvc application named "SatyaFilter".

 

Create a javascript file named "Script.js".
  1. var app = angular  
  2.        .module("myModule", [])  
  3.        .controller("myController", function ($scope) {  
  4.   
  5.            var Contributions = [  
  6.                { name: "Mvc", Type: "Blog", Views: 55000, Member: "Gold" },  
  7.                { name: "Sql", Type: "Article", Views: 68000, Member: "Platinum" },  
  8.                { name: "Wcf", Type: "Blog", Views: 57000, Member: "Gold" },  
  9.                { name: "Entity", Type: "Article", Views: 53000, Member: "Platinum" },  
  10.                { name: "Css", Type: "Blog", Views: 60000, Member: "Silver" },  
  11.                { name: "AngularJS", Type: "Article", Views: 60000, Member: "Bronze" },  
  12.            ];  
  13.   
  14.            $scope.Contributions = Contributions;  
  15.   
  16.            $scope.search = function (item) {  
  17.                if ($scope.searchText == #ff0000) {  
  18.                    return true;  
  19.                }  
  20.                else {  
  21.                    if (item.Member.toLowerCase()  
  22.                                 .indexOf($scope.searchText.toLowerCase()) != -1 ||  
  23.                        item.name.toLowerCase()  
  24.                                 .indexOf($scope.searchText.toLowerCase()) != -1) {  
  25.                        return true;  
  26.                    }  
  27.                }  
  28.   
  29.                return false;  
  30.            };  
  31.        }); 
Here we will search or filter records based on Name and Member columns datas.
  1. if (item.Member.toLowerCase()  
  2.                                 .indexOf($scope.searchText.toLowerCase()) != -1 ||  
  3.                        item.name.toLowerCase()  
  4.                                 .indexOf($scope.searchText.toLowerCase()) != -1) {  
  5.                        return true; 
 

Create a controller class file named "HomeController.cs"
  1. using System;  
  2. using System.Collections.Generic;  
  3. using System.Linq;  
  4. using System.Web;  
  5. using System.Web.Mvc;  
  6.   
  7. namespace SatyaFilter.Controllers  
  8. {  
  9.     public class HomeController : Controller  
  10.     {  
  11.         //  
  12.         // GET: /Home/  
  13.   
  14.         public ActionResult Index()  
  15.         {  
  16.             return View();  
  17.         }  
  18.   
  19.     }  
  20. } 
 Then finally i created a view file named "Index.cshtml".
  1. @{  
  2.     ViewBag.Title = "Satyaprakash AngularJS Search";  
  3. }  
  4.   
  5. <title>@ViewBag.Title</title>  
  6.   
  7.     <script src="Scripts/angular.min.js"></script>  
  8.     <script src="Scripts/Script.js"></script>  
  9.     <link href="Styles.css" rel="stylesheet" />  
  10. <body ng-app="myModule">  
  11.     <h2 style="background-color: Yellow;color: Blue; text-align: center; font-style: oblique">Satyaprakash's Search Datas By AngularJS</h2>  
  12.     <fieldset>  
  13.         <legend style="font-family:Arial Black;color:blue">SEARCH BY USING NAME & MEMBER COLUMNS</legend>  
  14.         <div ng-controller="myController">  
  15.             <input type="text" placeholder="SEARCH BY NAME & MEMBER"  
  16.                    ng-model="searchText" />  
  17.             <br /><br />  
  18.             <table align="center" border="1" cellpadding="4" cellspacing="4">  
  19.                 <thead>  
  20.                     <tr>  
  21.                         <th style="background-color: Yellow;color: blue">Contribution Name</th>  
  22.                         <th style="background-color: Yellow;color: blue">Contribution Type</th>  
  23.                         <th style="background-color: Yellow;color: blue">Contribution Views</th>  
  24.                         <th style="background-color: Yellow;color: blue">Contribution Member</th>  
  25.                     </tr>  
  26.                 </thead>  
  27.                 <tbody>  
  28.                     <tr ng-repeat="Contribution in Contributions | filter: search">  
  29.                         <td> {{ Contribution.name }} </td>  
  30.                         <td> {{ Contribution.Type }} </td>  
  31.                         <td> {{ Contribution.Views  }} </td>  
  32.                         <td> {{ Contribution.Member  }} </td>  
  33.                     </tr>  
  34.                 </tbody>  
  35.             </table>  
  36.         </div>  
  37.         </fieldset>  
  38.             <footer>  
  39.                 <p style="background-color: Yellow; font-weight: bold; color:blue; text-align: center; font-style: oblique">© @DateTime.Now.ToLocalTime()</p> @*Add Date Time*@  
  40.             </footer>  
  41. </body> 
 Here i added the references for call the functionality of angularjs , css and javascript.
  1. <script src="Scripts/angular.min.js"></script>  
  2.    <script src="Scripts/Script.js"></script>  
  3.    <link href="Styles.css" rel="stylesheet" /> 
 For text search or filter purpose,
  1. <input type="text" placeholder="SEARCH BY NAME & MEMBER"  
  2.                    ng-model="searchText" /> 
The table show records with column values, 
  1. <table align="center" border="1" cellpadding="4" cellspacing="4">  
  2.                 <thead>  
  3.                     <tr>  
  4.                         <th style="background-color: Yellow;color: blue">Contribution Name</th>  
  5.                         <th style="background-color: Yellow;color: blue">Contribution Type</th>  
  6.                         <th style="background-color: Yellow;color: blue">Contribution Views</th>  
  7.                         <th style="background-color: Yellow;color: blue">Contribution Member</th>  
  8.                     </tr>  
  9.                 </thead>  
  10.                 <tbody>  
  11.                     <tr ng-repeat="Contribution in Contributions | filter: search">  
  12.                         <td> {{ Contribution.name }} </td>  
  13.                         <td> {{ Contribution.Type }} </td>  
  14.                         <td> {{ Contribution.Views  }} </td>  
  15.                         <td> {{ Contribution.Member  }} </td>  
  16.                     </tr>  
  17.                 </tbody>  
  18.             </table> 
 
OUTPUT

 
 Then i will filter by Name , Here you can put name with all capital or small,

 
 Then i will filter by Member,

 Then i entered Invalid stuff ,


Summary:

Filter records using AngularJS.
How to add this feature in Asp.net MVC.
Using Single TextBox we can filter records using multiple columns data.
Here button is not required for postback.
Ebook Download
View all
Learn
View all
Get Started

You need to be a premium member to use this feature. To access it, you'll have to upgrade your membership.

Become a sharper developer and jumpstart your career.

Basic

$0

$

. 00

monthly

For Basic members:

  • Standard Profile
  • Access learning courses
  • Access free e-books
  • 1x point
Premium

$20

$

. 00

monthly

For Premium members:

  • Earn 2x reward points
  • Premium profile with Verified check
  • Premium Avatar with status update
  • Learning courses
  • Unlimited Certifications and badges on profile
  • Unlimited Book downloads
  • Access to Premium content
  • Online Training
  • Unlimited PDF conversions and downloads
  • Professional Resume Writing
  • Interview Preparations Guide
  • 25 messages per month
  • 1 "Kodzu" avatar, basic
Elite

$45

$

. 00

monthly

For Elite members:

  • Bundle E-books
  • Access to all Learn Series
  • Unlimited Apply Jobs