Uncategorized

Search records using AngularJS in Asp.net MVC

What is AngularJS ?

Angular Js is a popular Javascript framework for web application development as it gives the flexibility and resources to develop user-friendly, flexible and platform independent web applications.

It extends HTML attributes with directives and binds data to HTML with expressions.The different built-in directives(ng-directives) offer different functionalities such as :

    • ng-app: This directive initializes an AngularJS application
    • ng-module: This directive binds the value of HTML controls (input, select, textarea) to application data.
    • ng-controller: Defines the controller object for an application
    • ng-repeat: Defines a template for each data in a collection.
    • ng-src: Specifies the src attribute for the <img> element.
    • ng-model : Binds the value of HTML controls (input, select, text area) to application data.
    • ng-bind : Binds application data to the HTML view.

 

 

Let us start by creating an MVC project in Visual Studio and giving it a suitable name(say AngularJSwithASP).

 

 

On creation of the project, create a javascript file say ‘Script.js’ in the scripts folder.

In the script file we will create a module using ‘angular.module’ which will contain the controller (empController). Going further we will filter the records based on name of the employee using ‘scope’ object.

 

After this, we will create a controller class file and give it a suitable name(in my case HomeController.cs) and simply return the view in it.

 

 

Proceeding further, we  will create a view file and give it a suitable name(Index.cshtml). This will display the employee info such as employee name, employee designation etc.

 

Employee Data :

 

 

SEARCH RESULTS :

On searching the employee by name(Name1 in this case), we get the following result.

Finally, we have learned about AngularJS and how it can be used with an ASP.Net mvc application to filter records in a step by step manner.

About The Author