Warning: file_get_contents(/data/phpspider/zhask/data//catemap/1/angularjs/20.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
使用asp.net webapi中的引导模式/angularjs显示数据_Angularjs_Asp.net Web Api_Bootstrap Modal - Fatal编程技术网

使用asp.net webapi中的引导模式/angularjs显示数据

使用asp.net webapi中的引导模式/angularjs显示数据,angularjs,asp.net-web-api,bootstrap-modal,Angularjs,Asp.net Web Api,Bootstrap Modal,我是新手。我想使用引导模式对asp.net WebAPI中的员工数据执行CRUD操作。我能够使用一个表(ng repeat)显示从webapi到angularJS的数据。在每一行的末尾,我有三个按钮查看、删除和编辑,还有一个按钮在表外添加 我希望,每当用户单击添加、查看、删除和编辑按钮时,都会弹出一个引导模式,我们应该能够执行CRUD操作。 我已经尝试了很多实例,但在如何获取Modal上的数据方面没有成功。请帮忙。 代码如下: WEBAPI: public class Employee

我是新手。我想使用引导模式对asp.net WebAPI中的员工数据执行CRUD操作。我能够使用一个表(ng repeat)显示从webapi到angularJS的数据。在每一行的末尾,我有三个按钮查看、删除和编辑,还有一个按钮在表外添加

我希望,每当用户单击添加、查看、删除和编辑按钮时,都会弹出一个引导模式,我们应该能够执行CRUD操作。 我已经尝试了很多实例,但在如何获取Modal上的数据方面没有成功。请帮忙。 代码如下:

WEBAPI:

     public class EmployeeService
{ SampleDatabaseEntities sampleDBEntities=新的SampleDatabaseEntities()

角度控制器:

angular.module('mainApp')
    .controller('getEmployeeCrl', ['$scope', 'employeeService', function ($scope, employeeService) {

        employeeService.getEmployeesList().then(function (response) {

            $scope.employees = response.data;
        }, function (err) {
            $scope.errMessage = "Something wrong with server. Please try again.";
        })

    }]);
HTML:


项目51

身份证件 名称 工作 租用日期 经理 薪水 委员会 编辑/删除 {{emp.E_ID} {{emp.E_NAME} {{emp.E_JOB} {{emp.HIRE_DATE} {{emp.MANAGER_ID} {{emp.SALARY} {{行政管理委员会}

{{{errMessage}


我如何在CRUD操作中使用引导模式

调用API的角度代码在哪里?您是否在任何地方收到错误?我们需要更多信息对不起..请忽略上面的代码。我在下面发布所有代码:任何人都可以帮我吗?您有什么问题吗
angular.module('mainApp', []).
        factory('employeeService', function ($http) {
            var baseAddress = 'http://localhost:53254/api/employee/';
            //var baseAddress = 'http://localhost:49595/MobileService/api/UserService/';
            var url = "";

            return {
                getEmployeesList: function () {
                    url = baseAddress;
                    return $http.get(url);
                },
                getUser: function (employee) {
                    url = baseAddress + "Get/" + employee.E_id;
                    return $http.get(url);
                },
                addUser: function (employee) {
                    url = baseAddress + "post";
                    return $http.post(url, employee);
                },
                deleteUser: function (employee) {
                    url = baseAddress + "Delete/" + employee.E_Id;
                    return $http.delete(url);
                },
                updateUser: function (employee) {
                    url = baseAddress + "put/" + employee.E_Id;
                    return $http.put(url, employee);
                }
            };
        });
angular.module('mainApp')
    .controller('getEmployeeCrl', ['$scope', 'employeeService', function ($scope, employeeService) {

        employeeService.getEmployeesList().then(function (response) {

            $scope.employees = response.data;
        }, function (err) {
            $scope.errMessage = "Something wrong with server. Please try again.";
        })

    }]);
<!DOCTYPE html>
<html ng-app="mainApp">
<head>
    <title></title>
    <meta charset="utf-8" />
    <script src="../Scripts/angular.js"></script>
    <script src="../mainApp.js"></script>
    <script src="../Utilities/ConstantsFactory.js"></script>
    <script src="../Services/EmployeeService.js"></script>
    <script src="../Controllers/EmployeeController.js"></script>


    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>

<body ng-controller="getEmployeeCrl">
    <div>
        <h2 style="text-align:center; color:darkblue">PROJECT 51</h2>
    </div>
    <div class="container">
        <div style="background-color:dimgray;color:white;padding:20px;">
            <input type="button" value="Go to Employees" class="btn btn-info" />
            <input type="button" value="Go to Clients" class="btn btn-info" style="width:145px" />
            <button class="glyphicon glyphicon-plus btn btn-primary" value="Add" data-toggle="tooltip" data-placement="top" title="Add Data" style="float:right; width:50px"></button>
        </div>
        <br />
        <table class="table table-bordered table table-condensed" ng-hide="!employees">
            <thead style="background-color:palevioletred">
                <tr style="text-decoration:solid;color:darkblue;">
                    <th>Id</th>
                    <th>Name</th>
                    <th>Job</th>
                    <th>Hire Date</th>
                    <th>Manager</th>
                    <th>Salary</th>
                    <th>Commission</th>
                    <th colspan="2">Edit/Delete</th>
                </tr>
            </thead>
            <tbody>
                <tr ng-repeat="emp in employees ">
                    <td>{{emp.E_ID}}</td>
                    <td>{{emp.E_NAME}}</td>
                    <td>{{emp.E_JOB}}</td>
                    <td>{{emp.HIRE_DATE}}</td>
                    <td>{{emp.MANAGER_ID}}</td>
                    <td>{{emp.SALARY}}</td>
                    <td>{{emp.COMMISSION}}</td>
                    <td colspan="2" style="width:170px">
                        <input type="button" ng-model="emp.E_Id"  value="View" class="btn btn-primary" style="width:70px" />
                        <input type="button" value="Edit" class="btn btn-primary" style="width:70px" />
                        <input type="button" value="Delete" class="btn btn-primary" style="width:70px" />
                    </td>

                </tr>

            </tbody>
        </table>
        <p class="alert alert-danger" ng-show="!employees">{{errMessage}} <span class="glyphicon glyphicon-refresh" ng-show="!employees"></span></p>

    </div>
</body>
</html>