MVC: Sorting Filter in AngularJS using MVC

Introduction

I am here fully explaining how to sorting filtering in AngularJS using MVC application. In my recent article, I have already demonstrated Live Character Count using AngularJS

Technology Used

AngularJS, Bootstrap, MVC, Visual Studio

Main Properties of AngularJS Used

ng-app : This property is set under html body tag.
ng-controller: AngularJS directive to invoke with $scope object.
ng-click: This is fired when click on button.
ng-repeat: This directive pulls item one by one from collection list.

Main Properties of BootStrap Used

wrapper: This is series of columns.
page-wrapper: Used for page layouts for rows and columns.
container: Used for responsive columns
row: it defines each row
col-lg: Differernt width of columns
panel: It is border box box with padding.

Main Resources used under this sample

Style Used:

MVC Controller

Here is defined controller action "StartWithAnularJSBootstrap".

public ActionResult StartWithAnularJSBootstrap()
{
 return View();
}

Json Method GetMyData Used to pull data

[HttpGet]
public JsonResult GetMyData()
{
 var _context = new TestNewEntities();

 var _classlst = (from c in _context.Test_App select c).ToList();

 return Json(_classlst, JsonRequestBehavior.AllowGet);
}

AngularJS Code in Razor View

MVC Razor View has written AngularJS code to get done sorting and filtering using bootstrap.

    

        

            

                

                    

                        

                            

                                

AngularJS Sorting, Filtering Application
Search: 
                            

                                

                                    


                                            

                                                Name
                                            
                                            

                                                Code
                                            
                                        

                                            
{{ item.Firstname }}
                                            
{{ item.lastname }}
                                        

Call to get data from Json Method

Conclusion

I have written all steps how to sorting filter in AngularJS using MVC application and also attached working example of the same.

Video: Sorting Filter in AngularJS using MVC

Suggested Reading

• How to Implement Jquery Datepicker
• Upload Image using jquery MVC
• Jquery Timer Countdown in MVC Application
• Capitalize the First Letter of String Using Jquery

Download Complete Project (visual studio source files)

This sample is working under MVC areas, if you don't much aware about MVC areas then you may go though this live example Organizing an Application using Areas . After complete download the working project then alter web.config according to your machine settings. Database script is under "App_Data" folder of this project.