AngularJS Filter, Sorting and Animation Using MVC and WCF Rest

This article will explain in detail how to create an AngularJS Filter, Sort and Simple Animation using WCF Rest Service.

1. How to create a WCF Rest service and retrieve data from a database.
2. How to install the AngularJS Package into a MVC application.
3. How to create our AngularJS application to create our own Master Detail Grid.
4. How to use a WCS service in AngularJS to use Filter, Sort and Animation.

Note: The prerequisites are Visual Studio 2013 (if you don't have Visual Studio 2013, you can download it from the Microsoft website).

Here we can see some basics and reference links for Windows Communication Foundation (WCF). WCF is a framework for building service-oriented applications.

Service-oriented application

Using a protocol the service can be shared and used over a network.

For example, let's consider we are now working on a project and we need to create a common database function and those functions need to be used in multiple projects and the projects are in a different place and connected by the internet.

In this case we can create a WCF service and we can write all our common database functions in our WCF service class. We can deploy our WCF in IIS and use the URL in our application to do database functions. In the code part let's see how to create a WCF REST service and use it in our AngularJS application.

If you are interested in reading more about WCF then kindly go through this link.
https://msdn.microsoft.com/en-in/library/dd203052.aspx

AngularJS

We might be be familiar with what the Model, View, View Model (MVVM) and what Model, View and Controller (MVC) are. AngularJS is a JavaScript framework that is purely based on HTML, CSS and JavaScript.

The AngularJS Model View Whatever (MVW) pattern is similar to the MVC and MVVM patterns. In our example I have used Model, View and Service. In the code part let's see how to install and create AngularJS in our MVC application.

Since this article explains how to use Filter, Sort and Simple Animation in AngularJS let's see one by one here.

ng-repeat: First we start with ng-repeat. This can be used to display the array of data one by one within our Table td or within a List, for example let's consider we want to display the data from 1 to 10. Usualy we do a loop and display the value one by one or we add values from 1 to 10 to an array and display using a loop.To use looping and display the data one by one in AngularJs we use ng-repeat.

For example let's see the preceding case to display the data from 1 to 10 in a table so the code will be like this.
The example can be used to display the names one by one from the name Array.
To test this example we need to add our angular.js to our root folder.

The complete code will be like this.

Here we can see that first we have added the angular.js reference.

• Filter

The filters can be added with the ng-repeat using the pipe symbol, for example let's consider the preceding example.
For example we can consider the preceding example where we display the names of the array using the ng-repeat. Now we can add the filter for the preceding example.

Here we can see with ng-repeat we have added the filter and for the filter we have given the TextBox Model id. When the user presses the key on the TextBox the filter will be applied for the loop and display the appropriate value as in the following:
Complete Code

• Sort

The same as for a filter we add the orderBy with field and reverse value in ng-repat using the pipe symbol.
The OrderBy can be added with the ng-repeat using the pipe symbol, for example let's consider the preceding example.
Where we have displayed the names of the array using the ng-repeat. Now we can add the filter for the preceding example.

Here in the first Tr and Td, I display the Table Heading and in the click event I display the order by names in ascending and descending order.
Complete Code

• Animation

For using the Animation in AngularJs we must include “angular-animate.min.js” and in the module we my must pass the parameter “ngAnimate”
The code will look as in this:

Reference links:
http://www.w3schools.com/angular/default.asp
https://docs.angularjs.org/api/ng/filter/filter

These are a few simple examples using HTML. Now let's see in detail how to implement this in our MVC application using a WCF rest service.

Code Part

We will create a ToysDetails table under the Database ToysDB. The following is the script to create a database, table and sample insert query. Run this script in your SQL Server. I have used SQL Server 2012.

The following is a script to create a database, table and a sample to insert data:

The following checks whether a database exists. If the database exists then drop it and create a new database.

The following creates the Table ToysDetails. This table will be used to store the details like Toys Information.

Use the following to insert the sample records into the ToysDetails table.

Open Visual Studio 2013 then select File - New - Project then select WCF Service Application then select your project path and provide a name for your WCF service and click OK.



Once we created our WCF Service we can see “IService.CS” and “Service1.svc” in the Solution Explorer as in the following.



IService.CS: In “IService.CS” we can see 3 Contracts by default.

[ServiceContract]: Describes the Methods or any operations available for the service. Service Contract is an interface and the methods can be declared inside the service interface using the Operation Contract attribute.

[OperationContract]: is similar to the web service [WEBMETHOD]

[DataContract]: describes the data exchange between the client and the service.

[ServiceContract]

The following code will be automatically created for all the IService.CS files. We can change and write our own code here.

In our example we need to get all the Toys details, so I have created a Data Contract “ToyItemDataContract”. Here we can see we have decelerated our entire Table column name as Data Member.