使用 AngularJS 和 ASP.NET MVC 在多个表上进行 CRUD 操作 Part-2

Kranthi Kumar Pothireddy

4.82/5 (12投票s)

2015 年 9 月 16 日

CPOL

2分钟阅读

38914

1427

使用 AngularJS 和 ASP.NET MVC 在多个表上进行 CRUD 操作 Part-2

下载源代码 - 3.7 MB

此演示是我的前一个演示的延续(https://codeproject.org.cn/Articles/1029996/SPA- with-AngularJS-in-NET)。在阅读此演示之前，请先阅读前一个演示。

在上次演示中，我展示了如何从数据库插入和显示数据。在此演示中，我将展示使用 AngularJS 在 SPA 中更新和删除功能。我提供了用于 CRUD 操作的源代码供下载。

上次演示的评论

在我的前一个演示中，我在一个控制器中实现了模型和对服务器的调用。
由于所有代码都在一个控制器中，因此其中一条评论认为这不是一个好习惯，我同意。
我的前一个演示只针对初学者，所以我没有做任何分离，因为它可能会让他们感到困惑。

AngularJS 代码更改

在此演示中，我从头开始完全开发了 AngularJS 代码。
我添加了AddController、DeleteController、EditController、Service和myApp JavaScript 文件。请查看下面的图像。

AngularJS 代码

myApp.js 代码

下面我们只有客户端路由和 Angular 模块，我不会解释这些概念，因为我在之前的演示中已经做过了。所以只需将下面的代码复制到你的 JS 文件中即可。

var app = angular.module('App', ['AngularDemo.EmpAddController',
                       'AngularDemo.AddressController',
                       'AngularDemo.DeleteController'
])
 
app.config(['$routeProvider', '$locationProvider', function ($routeProvider, $locationProvider) {
 
    $routeProvider.when('/', {
        templateUrl: '/Home/AddEmployee',
        controller: 'EmpAddCtrl',
    });
    $routeProvider.when('/Edit', {
        templateUrl: '/Home/EditEmployee',
        controller: 'EditCtrl'
    });
    $routeProvider.when('/Delete', {
        templateUrl: '/Home/DeleteEmployee',
        controller: 'DeleteCtrl'
    });
    $routeProvider.otherwise({
        redirectTo: '/'
    });
    // Specify HTML5 mode (using the History APIs) or HashBang syntax.
    $locationProvider.html5Mode(false).hashPrefix('!');
 
}]);

Service.js 代码

只为应用程序创建一个对象，它是一个单例对象。
服务用于在你的应用程序中共享数据和函数。
在此演示中，所有对服务器的调用都来自“ CRUDService ”。

例如，如果你想删除一行，则从DeleteController.js ($scope.DeleteByID) 进行调用，该调用将调用CRUDService 类中的DeleteEmployee 方法。

app.service("CRUDService", function ($http) {
    this.getAllEmployeeInfo = function () {
        return $http.get('/Home/ShowEmpList');
    };
 
    this.AddEmployee = function (EmployeeViewModel) {
        var ServerData = $http({
            method: "Post",
            url: "/Home/AddEmpDetails",
            data: JSON.stringify({ EmployeeViewModelClient: EmployeeViewModel }),
            dataType: 'json',
            //contentType: 'application/json',
        });
        return ServerData;
    }
 
    this.EditEmployee = function (EmployeeID) {
        var ServerData = $http({
            method: "Post",
            url: "/Home/GetEmployeeById",
            data: JSON.stringify({ EmpID: EmployeeID }),
            dataType: 'json',
            //contentType: 'application/json',
        });
        return ServerData;
    }
 
    this.UpdateEmployee = function (EmployeeViewModel) {
        var ServerData = $http({
            method: "Post",
            url: "/Home/UpdateEmployee",
            data: JSON.stringify({ EmployeeViewModelClient: EmployeeViewModel }),
            dataType: 'json',
            //contentType: 'application/json',
        });
        return ServerData;
    }
 
    this.DeleteEmployee = function (EmployeeID) {
        var ServerData = $http({
            method: "Post",
            url: "/Home/DeleteByID",
            data: JSON.stringify({ EmpID: EmployeeID }),
            dataType: 'json',
            //contentType: 'application/json',
        });
        return ServerData;
    }
});

AngularJS 编辑控制器

创建编辑控制器文件，名称随意，并将以下文件复制到其中。

angular.module('AngularDemo.AddressController', ['ngRoute'])
app.controller('EditCtrl', function ($scope, CRUDService) {
 
    var GetAllData = CRUDService.getAllEmployeeInfo();
    GetAllData.then(function (data) {
        $scope.EmpAddressList = data.data;
    })
 
    $scope.EmpDetailsModel =
     {
         EmpID: '',
         EmpName: '',
         EmpPhone: ''
     };
 
    $scope.EmpAddressModel =
    {
        Address1: '',
        Address2: '',
        Address3: ''
    };
 
    $scope.EmployeeViewModel = {
        empDetailModel: $scope.EmpDetailsModel,
        empAddressModel: $scope.EmpAddressModel
    };
 
    $scope.EditEmployee = function (EmployeeID) {
        var EditedEmployee = CRUDService.EditEmployee(EmployeeID);
        EditedEmployee.then(function (Emp) {
            $scope.EmpDetailsModel.EmpID = Emp.data[0].empDetailModel.EmpID;
            $scope.EmpDetailsModel.EmpName = Emp.data[0].empDetailModel.EmpName;
            $scope.EmpDetailsModel.EmpPhone = Emp.data[0].empDetailModel.EmpPhone;
            $scope.EmpAddressModel.Address1 = Emp.data[0].empAddressModel.Address1
            $scope.EmpAddressModel.Address2 = Emp.data[0].empAddressModel.Address2;
            $scope.EmpAddressModel.Address3 = Emp.data[0].empAddressModel.Address3;
            $scope.$apply();
        })
    };
 
    $scope.UpdateEmployee = function () {
        var UpdatedEmployee = CRUDService.UpdateEmployee($scope.EmployeeViewModel);
        UpdatedEmployee.then(function (Emp) {
            $scope.EmpAddressList = Emp.data;
            $scope.$apply();
        })
    };
);

编辑/更新视图 HTML

<div style="width: 50%; margin: 50px auto;">
 
    <table id="EmployeeDetails">
        <tr>
            <td>
                <strong>Employee Name:</strong>
            </td>
            <td>
                <input type="text" class="form-control" ng-model="EmpDetailsModel.EmpName" placeholder="Employee Name"/>
            </td>
        </tr>
        <tr>
            <td>
                <strong>Employee Phone:</strong>
 
            </td>
            <td>
                <input type="text" class="form-control" ng-model="EmpDetailsModel.EmpPhone" placeholder="Employee Phone" />
            </td>
        </tr>
        <tr>
            <td>
                <strong>Address 1:</strong>
 
            </td>
            <td>
                <input type="text" class="form-control" ng-model="EmpAddressModel.Address1" placeholder="Address 1" />
            </td>
        </tr>
        <tr>
            <td>
                <strong>Address 2:</strong>
 
            </td>
            <td>
                <input type="text" class="form-control" ng-model="EmpAddressModel.Address2" placeholder="Address 2" />
            </td>
        </tr>
 
        <tr>
            <td>
                <strong>Address 3:</strong>
 
            </td>
            <td>
                <input type="text" class="form-control" ng-model="EmpAddressModel.Address3" placeholder="Address 3" />
            </td>
        </tr>
        <br />
        <tr>
            <td>&nbsp;&nbsp;&nbsp;&nbsp;
            </td>
            <td>
                <button type="button" ng-click="UpdateEmployee();" class="btn btn-primary">Update</button>
            </td>
        </tr>
 
    </table>
</div>
 
<hr style="color: black" />
 
<div style="width: 50%; margin: 50px auto;">
    <div class="panel panel-default">
        <!-- Default panel contents -->
        <div class="panel-heading"><b>Employee Details </b></div>
        <div class="table-responsive">
            <table id="EmployeeTable" class="table table-striped table-bordered table-hover table-condensed">
                <thead>
                    <tr>
                        <th>Employee ID</th>
                        <th>Employee Name</th>
                        <th>Employee Phone</th>
                        <th>Employee Address1</th>
                        <th>Employee Address2</th>
                        <th>Employee Address3</th>
                    </tr>
                </thead>
                <tbody>
                    <tr data-ng-repeat="Emp in EmpAddressList">
 
                        <td>{{Emp.empDetailModel.EmpID}}</td>
                        <td>{{Emp.empDetailModel.EmpName}}</td>
                        <td>{{Emp.empDetailModel.EmpPhone}}</td>
                        <td>{{Emp.empAddressModel.Address1}}</td>
                        <td>{{Emp.empAddressModel.Address2}}</td>
                        <td>{{Emp.empAddressModel.Address3}}</td>
                        <td><span ng-click="EditEmployee(Emp.empDetailModel.EmpID)" class="btn btn-primary">Edit</span></td>
                    </tr>
 
                    @*<tr ng-if="states.NewRow">*@
                    <tr ng-if="EmpAddressList.length == 0">
                        <td class="text-center" colspan="4">There are no Employee details to display
                        </td>
                    </tr>
                </tbody>
            </table>
 
        </div>
    </div>
</div>

编辑/更新输出

当用户单击编辑/更新时，它会使用对应于每一行的编辑按钮填充所有记录，上面是它的屏幕截图。当用户单击编辑按钮时，相应的数据将填充到文本框中。

在更改了员工的值并单击更新按钮后，这些值将传递给控制器操作，以下是两个模型EmpDetailsModel和EmpAddressModel的两个屏幕截图，它们带有传递给操作的数据。

更新后的数据库

更新之前，EmpID 177的所有值为 1，更新后，这些值为 5。

AngularJS 删除控制器

angular.module('AngularDemo.DeleteController', ['ngRoute'])
app.controller('DeleteCtrl', function ($scope, CRUDService) {
    $scope.EmpAddressList = {};
 
    var GetAllData = CRUDService.getAllEmployeeInfo();
    GetAllData.then(function (data) {
        $scope.EmpAddressList = data.data;
    })
 
    $scope.DeleteByID = function (EmployeeID) {
        //debugger;
        var DeletedEmployee = CRUDService.DeleteEmployee(EmployeeID);
        DeletedEmployee.then(function (Emp) {
            $scope.EmpAddressList = Emp.data;
        })
    }
});

当用户从菜单中单击删除时，它会使用对应于每一行的删除按钮填充所有记录，下面是它的屏幕截图。

删除视图 HTML

<div style="width: 50%; margin: 50px auto;">
    <div class="panel panel-default">
        <!-- Default panel contents -->
        <div class="panel-heading"><b>Employee Details </b></div>
        <div class="table-responsive">
            <table id="EmployeeTable" class="table table-striped table-bordered table-hover table-condensed">
                <thead>
                    <tr>
                        <th>Employee ID</th>
                        <th>Employee Name</th>
                        <th>Employee Phone</th>
                        <th>Employee Address1</th>
                        <th>Employee Address2</th>
                        <th>Employee Address3</th>
                    </tr>
                </thead>
                <tbody>
                    <tr data-ng-repeat="Emp in EmpAddressList">
                        <td>{{Emp.empDetailModel.EmpID}}</td>
                        <td>{{Emp.empDetailModel.EmpName}}</td>
                        <td>{{Emp.empDetailModel.EmpPhone}}</td>
                        <td>{{Emp.empAddressModel.Address1}}</td>
                        <td>{{Emp.empAddressModel.Address2}}</td>
                        <td>{{Emp.empAddressModel.Address3}}</td>
                        <td><button type="button" ng-click="DeleteByID(Emp.empDetailModel.EmpID)" class="btn btn-primary">Delete</button></td>
                    </tr>
                    <tr ng-if="EmpAddressList.length == 0">
                        <td class="text-center" colspan="4">There are no Employee details to display
                        </td>
                    </tr>
                </tbody>
            </table>
 
        </div>
    </div>
</div>

当用户单击删除按钮时，将删除相应的记录。

删除记录后的数据库

注意： 如果你对此演示有任何疑问或对更好的实现有任何其他建议，请告诉我。