Display Message When Filtering Records Not Found In AngularJS With ASP.NET MVC

Introduction

 

In most of the Web Applications, we display the records in a grid but sometimes a user wants to search the record based on the attribute value, which means a user wants to search all the records, based on the name. The fact is, if the record is not present in the current page, it needs to display "No records found". To implement it, we are going to use AngularJS filter concept to search the records in ASP.NET MVC.

 

Using Code

 

To implement filter functionality in AngularJS in ASP.NET MVC, below are steps: 

1. Design a table which holds Employee information.
2. Create a model class.
3. Create an action which retrieves the data from an Employee table.
4. In view, design table will render the employee records and search the fields.
5. Send AJAX request to the Server to get the employees records and bind to the scope variable.  

Database Design

 

Let's design a table which keeps information about an employee. The SQL query, given below, is used to create table(tblEmployee) with the required columns ID like FirstName, LastName, Designation, Email and ReportID etc.

CREATE TABLE [dbo].[tblEmployee](
    [Id] [int] IDENTITY(1,1) NOT NULL,
    [FirstName] [varchar](50) NULL,
    [LastName] [varchar](50) NULL,
    [Designation] [varchar](50) NULL,
    [Email] [varchar](50) NULL,
    [Address] [varchar](max) NULL,
    [ReportID] [int] NULL,
    [IsActive] [bit] NULL,
 CONSTRAINT [PK_tblEmployee] PRIMARY KEY CLUSTERED
(
    [Id] ASC
)WITH (PAD_INDEX  = OFF, STATISTICS_NORECOMPUTE  = OFF, IGNORE_DUP_KEY = OFF,
   ALLOW_ROW_LOCKS  = ON, ALLOW_PAGE_LOCKS  = ON) ON [PRIMARY]
) ON [PRIMARY]

Model

 

Add model(Employee.cs) is given below in Model folder with properties ID, first name, last, designation, Email, report ID etc.

public class Employee
{
    public int Id { get; set; }
    public string FirstName { get; set; }
    public string LastName { get; set; }
    public string Designation { get; set; }
    public string Email { get; set; }
    public bool IsActive { get; set; }
}

Controller

 

In Controller, add an action which retrieves the Employee records and returns the data in JSON format. Here, I have used simple ADO.NET to get the data. You can use EntityFramework, if you want.

[HttpGet]
public JsonResult GetEmployees()
{
    List<Employee> empChartList = new List<Employee>();

    string query = "SELECT Id, FirstName + ' ' + ISNULL(LastName, '') AS Name, Designation, Email, ReportID";
    query += " FROM tblEmployee";

    // Get it from Web.config
    string connetionString = "Data Source=Test-PC\\SQLEXPRESS;Initial Catalog=AllTest;Integrated Security=True;";
    using (SqlConnection con = new SqlConnection(connetionString))
    {
        using (SqlCommand cmd = new SqlCommand(query))
        {
            cmd.CommandType = CommandType.Text;
            cmd.Connection = con;
            con.Open();
            using (SqlDataReader dr = cmd.ExecuteReader())
            {
                while (dr.Read())
                {
                    empChartList.Add(new Employee()
                    {
                        Id = dr.GetInt32(0),
                        FirstName = dr.GetString(1),
                        Designation = dr.GetString(2),
                        Email = dr.GetString(3),
                        ReportID = dr.IsDBNull(4) ? 0 : dr.GetInt32(4)
                    });
                }
            }
            con.Close();
        }
    }

    return Json(empChartList, JsonRequestBehavior.AllowGet);
}

View

 

It's time to design the View page to render the employee records and search fields. In the code given below, there is a DIV which helps to display the loading image when an AJAX request is sent to the Server. It contains another DIV, which holds search field and an employee table. In Employee grid table, it uses ng-repeat to loop over the records and creates new rows to display. It also implements AngularJS filter functionality, which means, when a user types name in the textbox, it displays the records with the matching name.

 

There is another DIV with ID notFoundDiv, which helps to display the message "Records not found", when there is no record from the Server or doesn't match with the search criteria. 

<div ng-app="mvcApp" ng-controller="MyController">

    <button ng-click="myFunction()">Click to Load Data!</button>
    <div id="lodingDiv" ng-show="LoadingImg">
        <img src="~/Content/pageloader.gif" class="ajax-loader" />
        LOADING..
    </div>

    <div ng-show="EmpGridVisible">
        <table>
            <tr>
                <td>Search by Name :</td>
                <td colspan="2">
                    <input type="text" ng-model="empName" placeholder="Search">
                </td>
            </tr>
        </table>

        <table ng-show="(employees).length>0">
            <tr>
                <th><a href="" ng-click="columnToOrder='Id';reverse=!reverse">ID</a></th>

                <th>
                    <a href="" ng-click="columnToOrder='FirstName';reverse=!reverse">Name</a>
                </th>
                <th>
                    <a href="" ng-click="columnToOrder='Designation';reverse=!reverse">Designation</a>
                </th>
                <th>
                    <a href="" ng-click="columnToOrder='Email';reverse=!reverse">Email</a>
                </th>
            </tr>
            <tr ng-repeat="emp in employees| filter:{FirstName:empName} |orderBy:columnToOrder:reverse">
                <td>{{emp.Id}}</td>
                <td>{{emp.FirstName }}</td>
                <td>{{emp.Designation }}</td>
                <td>{{emp.Email ||'email not exist' }}</td>
            </tr>
        </table>

        <div id="notFoundDiv" ng-show="(employees|filter:empName).length==0" style="color: red; font-weight: bold">No Records Found</div>

    </div>
</div>

Next, we need to write the code for sending an AJAX request to the Server and get all the employees' data. In the code, given below, first we need to add AngularJS reference in our project. Secondly, we create a module with name as "mvcApp", which is injected to create controller named as "MyController".

 

Inside the controller, it hides LoadingImage, EmpGridVisible in the page load time and it displays, when button click happens to load the employees.

Afterwards, it creates a function myFunction, which calls on the button click to send AJAX to the Server and assign an employee data to employees scope variable.

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>

<script>
    var angular = angular.module('mvcApp', []);

    angular.controller('MyController', function ($scope, $http) {
        $scope.EmpGridVisible = false;
        $scope.LoadingImg = false;

        $scope.myFunction = function () {
            $scope.EmpGridVisible = true;
            $scope.LoadingImg = true;

            // Sending AJAX request to server
            $http.get('/Home/GetEmployees').success(function (data) {
                $scope.employees = data;
                // Hiding loading image
                $scope.LoadingImg = false;
            });
        }
    });
</script>

Add the following style to make records appear in the designed way. It also contains style to display the loading image css, when an AJAX request goes to the Server. 

<style>
    table {
        border-collapse: collapse;
        border-spacing: 0;
        width: 35%;
        display: table;
        text-align: center;
    }

    .ng-binding {
        padding: 8px;
    }

    a {
        text-decoration: none;
        color: white;
    }

    th {
        background: #0270bf;
    }

    /*  Define the background color for all the EVEN background rows  */
    tr:nth-child(even) {
        background: #f1f1f1;
    }

    #mydiv {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 1000;
        background-color: grey;
        opacity: .8;
    }

    .ajax-loader {
        position: absolute;
        left: 50%;
        top: 50%;
        margin-left: -32px; /* -1 * image width / 2 */
        margin-top: -32px; /* -1 * image height / 2 */
        display: block;
    }
</style>

After implementing the code snippets, given above, browse your page and it looks, as shown in Figure 1 as an output. In Figure 1, it has 3 snapshots: 1 to display all the records without searching, 2 to display the records with search by Name "ma", 3 to display "Records not found", when name doesn't match with any any records.

 

Figure 1: Displays records, based on search by name

 

Conclusion

 

Here, we discussed displaying the records through sending an AJAX request, using AngularJS. How we can implement the filter functionality and display a message when a record is not found, is also discussed in this article.