Sunday, March 26, 2017

AngularJS ASP.NET MVC Editable Grid

Model-------------
public class Employee
    {
        public string FirstName { get; set; }
        public string LastName { get; set; }
        public string Country { get; set;
   }

View......
<link href="../../style/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="../../script/angular.js" type="text/javascript"></script>
<script type="text/javascript">
    var app = angular.module('myApp', []);
    app.controller('HomeCtrl', ['$scope', '$http', function ($scope, $http) {

        $http({
            method: 'POST',
            url: 'Home/GetEmployees'
        })
        .then(function (response) {
            console.log(response);
            $scope.employees = response.data.employees;

            angular.forEach($scope.employees, function (obj) {
                obj["showEdit"] = true;
            });

        }, function (error) {
            console.log(error);
        });

        $scope.toggleEdit = function (emp) {
            emp.showEdit = emp.showEdit ? false : true;
        }
    } ]);
</script>
<div ng-app="myApp" ng-controller="HomeCtrl" class="container">
    <div class="row">
        <div class="bs-example marginTop50" data-example-id="table-within-panel">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h3>Code Handbook</h3></div>
                <div class="panel-body">
                    <p>
                        AngularJS ASP.NET MVC Editable Grid Demo</p>
                </div>
                <table class="table">
                    <thead>
                        <tr>
                            <th>
                                #
                            </th>
                            <th>
                                First Name
                            </th>
                            <th>
                                Last Name
                            </th>
                            <th>
                                Country
                            </th>
                            <th>

                            </th>

                        </tr>
                    </thead>
                    <tbody>
                        <tr ng-repeat="emp in employees">
                            <th scope="row">
                                {{$index+1}}
                            </th>
                            <td>
                                <span ng-show="emp.showEdit">{{emp.FirstName}}</span>
                                <input ng-show="!emp.showEdit" type="text" ng-model="emp.FirstName" class="form-control" >
                            </td>
                            <td>
                                 <span ng-show="emp.showEdit">{{emp.LastName}}</span>
                                 <input ng-show="!emp.showEdit" type="text" ng-model="emp.LastName" class="form-control" >
                            </td>
                            <td> <span ng-show="emp.showEdit">{{emp.Country}}</span>
                                <input ng-show="!emp.showEdit" type="text" ng-model="emp.Country" class="form-control" >
                            </td>
                            <td>
                                <span ng-show="emp.showEdit" ng-click="toggleEdit(emp)" class="glyphicon glyphicon-pencil"></span>
                                <span ng-show="!emp.showEdit" ng-click="toggleEdit(emp)" class="glyphicon glyphicon-ok"></span>
                            </td>
                        </tr>

                    </tbody>
                </table>

            </div>
        </div>
    </div>

</div>
Controller----
public JsonResult GetEmployees()
        {
            List<Employee> empList = new List<Employee>();

            Employee emp = new Employee { FirstName = "James", LastName = "Bond", Country = "Germany" };
            empList.Add(emp);

            emp = new Employee { FirstName = "Roy", LastName = "Agasthyan", Country = "United States" };
            empList.Add(emp);

            return Json(new { employees = empList });
        }