Search Records Using AngularJS In ASP.NET MVC

Satyaprakash Samantaray
May 15, 2017
4.1k
0
2
Blog

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".

var app = angular
.module("myModule", [])
.controller("myController", function ($scope) {
var Contributions = [
{ name: "Mvc", Type: "Blog", Views: 55000, Member: "Gold" },
{ name: "Sql", Type: "Article", Views: 68000, Member: "Platinum" },
{ name: "Wcf", Type: "Blog", Views: 57000, Member: "Gold" },
{ name: "Entity", Type: "Article", Views: 53000, Member: "Platinum" },
{ name: "Css", Type: "Blog", Views: 60000, Member: "Silver" },
{ name: "AngularJS", Type: "Article", Views: 60000, Member: "Bronze" },
];
$scope.Contributions = Contributions;
$scope.search = function (item) {
if ($scope.searchText == #ff0000) {
return true;
}
else {
if (item.Member.toLowerCase()
.indexOf($scope.searchText.toLowerCase()) != -1 ||
item.name.toLowerCase()
.indexOf($scope.searchText.toLowerCase()) != -1) {
return true;
}
}
return false;
};
});

Here we will search or filter records based on Name and Member columns datas.

if (item.Member.toLowerCase()
.indexOf($scope.searchText.toLowerCase()) != -1 ||
item.name.toLowerCase()
.indexOf($scope.searchText.toLowerCase()) != -1) {
return true;

Create a controller class file named "HomeController.cs"

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
namespace SatyaFilter.Controllers
{
public class HomeController : Controller
{
//
// GET: /Home/
public ActionResult Index()
{
return View();
}
}
}

Then finally i created a view file named "Index.cshtml".

@{
ViewBag.Title = "Satyaprakash AngularJS Search";
}
<title>@ViewBag.Title</title>
<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="background-color: Yellow;color: Blue; text-align: center; font-style: oblique">Satyaprakash's Search Datas By AngularJS</h2>
<fieldset>
<legend style="font-family:Arial Black;color:blue">SEARCH BY USING NAME & MEMBER COLUMNS</legend>
<div ng-controller="myController">
<input type="text" placeholder="SEARCH BY NAME & MEMBER"
ng-model="searchText" />
<br /><br />
<table align="center" border="1" cellpadding="4" cellspacing="4">
<thead>
<tr>
<th style="background-color: Yellow;color: blue">Contribution Name</th>
<th style="background-color: Yellow;color: blue">Contribution Type</th>
<th style="background-color: Yellow;color: blue">Contribution Views</th>
<th style="background-color: Yellow;color: blue">Contribution Member</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="Contribution in Contributions | filter: search">
<td> {{ Contribution.name }} </td>
<td> {{ Contribution.Type }} </td>
<td> {{ Contribution.Views }} </td>
<td> {{ Contribution.Member }} </td>
</tr>
</tbody>
</table>
</div>
</fieldset>
<footer>
<p style="background-color: Yellow; font-weight: bold; color:blue; text-align: center; font-style: oblique">© @DateTime.Now.ToLocalTime()</p> @*Add Date Time*@
</footer>
</body>

Here i added the references for call the functionality of angularjs , css and javascript.

<script src="Scripts/angular.min.js"></script>
<script src="Scripts/Script.js"></script>
<link href="Styles.css" rel="stylesheet" />

For text search or filter purpose,

<input type="text" placeholder="SEARCH BY NAME & MEMBER"
ng-model="searchText" />

The table show records with column values,

<table align="center" border="1" cellpadding="4" cellspacing="4">
<thead>
<tr>
<th style="background-color: Yellow;color: blue">Contribution Name</th>
<th style="background-color: Yellow;color: blue">Contribution Type</th>
<th style="background-color: Yellow;color: blue">Contribution Views</th>
<th style="background-color: Yellow;color: blue">Contribution Member</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="Contribution in Contributions | filter: search">
<td> {{ Contribution.name }} </td>
<td> {{ Contribution.Type }} </td>
<td> {{ Contribution.Views }} </td>
<td> {{ Contribution.Member }} </td>
</tr>
</tbody>
</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.