Monday, 16 May 2016

how to get and display table data from database using angular in MVC application

Leave a Comment
Hi every one in this post i would like to explain about How to get and display table data from database using angular JS.Till now we learned about how to get data from database using angular.Now we are going to learn How work with tabular data in this tutorial.The final data is displayed in table like in below image.

Note: I have explained basics of angular js please refer previous posts to understand the basics if you do not know basics. 
displaying table data from database using angularjs

In this application we are going to use ng-repeat directive to iterate the table records.ngRepeat repeats the HTML elements.We use it to iterate collection values.

Step 1: Create a Data table in Database

1.Right click server explorer --> expand Database --> Right click on tables --> Click Add new table.
2.Create a table with  following columns if you want you can add more columns.
3.Here i created following table.

creating new table in visual studio

Step 2: Add ADO.NET Entity Data Model

1.Right click on Models --> Add --> New Item -->Select ADO.NET Entity Data Model(Under Data) --> name it -->Add --> select Add from Database (In Entity Data Model wizard) --> Next
2.Select Database --> give name for web.config.
3.Choose your Database objects(tables) and click finish.

Step 3: Add New Action Method to get User Data from Database and send in the form of JsonResult

1.This Action Method fetch data from database and returns that data in Json format to angular Controller for processing.
2.Add getUsers() Action in HomeController.
public JsonResult getUsers()
        {
            List userlist = new List();
            using (DatabaseEntities db = new DatabaseEntities()) {
                userlist = db.Users.OrderBy(a=>a.FullName).ToList();
            }
            return new JsonResult { Data=userlist,JsonRequestBehavior=JsonRequestBehavior.AllowGet};
        }

Step 4: Add new js file to create angular Controller and Factory method

1.Create angular module in  Module.js file.
(function () {
    var myApp = angular.module("myApp",[]);
})();
2.Now add another script file to add angular Controller and Factory method to call data from server 3.Right click on Scripts folder --> add LoginController.js
4.Replace code with following code .
angular.module("myapplication").controller("TableController", function ($scope, UserService) {
    $scope.User = null;
    UserService.getUsers().then(function (d) {
        $scope.User = d.data; 
    },function(){
        alert("error occured try again");
    });
})
.factory("UserService", function ($http) {
    var fact = {};
    fact.getUsers = function () {
        return $http.get('/Home/getUsers');
    }
    return fact;
});
    
5.Factory: Here ,the factory method fetch data from server using $http call.

Step 6: Add View to display Login Form

1.Right click on Index action --> Add View --> add
2.Replace Index.cshtml view code with following code.

@{
    ViewBag.Title = "Display table using Angular JS";
}
<div class="panel panel-info">
    <div class="panel-heading">
        Displaying DB data using Angular in MVC5
    </div>
    <div ng-controller="TableController">
        <table class="table table-bordered table-responsive">
            <thead>
                <tr>
                    <th>
                        Full Name
                    </th>
                    <th>
                        Email
                    </th>
                    <th>
                        DOB
                    </th>
                    <th>
                        Phone
                    </th>
                    <th>
                        Address
                    </th>
                    <th>
                        Designation
                    </th>
                </tr>
            </thead>
            <tbody>
                <tr ng-repeat="i in User">
                    <td>{{i.FullName}}</td>
                    <td>{{i.Email}}</td>
                    <td>{{i.DOB.slice(6,-2)|date:'dd-MM-yyyy'}}</td>
                    <td>{{i.Phone}}</td>
                    <td>{{i.Address}}</td>
                    <td>{{i.Designation}}</td>
                </tr>
            </tbody>
        </table>
    </div>
    <div class="panel-footer">
        copyrighted by Mitechdev.com
    </div>
</div>
@section scripts{

<script src="~/Scripts/TableDisplayController.js"></script>

}

3.Add script reference at the end of Index.cshtml page.
4.Here in above code i used slice() function and also applied angular filter to filter the DOB column.

Filters: Filters are used to change, modify or formats the data to display to user.There are some predefined filter that angular provides Lowercase filter,Currency filter,OrderBy filter etc. are predefined filters in angular js.We can develop our own filters also based on requirement.

Syntax: {{expression | filter expression}} 
Ex: {{student.fullName() | uppercase}} // here we changing case to upper.

Download  source code for this tutorial Download

Conclusion:
I hope this tutorial is understandable for every reader.If you recommend any modifications to this site please specify in form of comments to improve the quality of this post.
For daily updates please follow this site.


0 comments:

Post a Comment