Question

我是bootstrap的新手。我想使用Bootstrap-Modal对来自asp.net WebAPI的员工数据进行CRUD操作。我能够使用表格（ng-repeat）将数据从webapi显示到angularJS。在每一行，最后，我有三个按钮VIEW，DELETE和EDIT，另一个在表ADD之外。

我想，只要用户点击ADD，VIEW，DELETE和EDIT按钮，就会弹出一个引导模式，我们应该能够执行CRUD操作。我已经尝试了很多实例，但没有运气如何获取Modal上的数据。请帮忙。代码如下：

的WebAPI：

     public class EmployeeService

{ SampleDatabaseEntities sampleDBEntities = new SampleDatabaseEntities（）;

//ADD USER
public int saveEmployee(EmployeeTable employeeTable)
{

    sampleDBEntities.EmployeeTables.Add(employeeTable);
    sampleDBEntities.SaveChanges();
    return employeeTable.E_ID;

}

public EmployeeTable getEmployeeById(int id)
{

    return sampleDBEntities.EmployeeTables.Find(id);
}

public List<EmployeeTable> getEmployees()
{
    return sampleDBEntities.EmployeeTables.ToList();
}


public void updateEmployee(int x, EmployeeTable employeeTable)
{
   if (employeeTable.E_ID == x)
    {
        sampleDBEntities.Entry(employeeTable).State = EntityState.Modified;
        sampleDBEntities.SaveChanges();
    }


}

public void deleteEmployee(int id)
{


    var employee = sampleDBEntities.EmployeeTables.Find(id);
    if(employee !=null)
    { 
        sampleDBEntities.Entry(employee).State = EntityState.Deleted;
        sampleDBEntities.SaveChanges();

    }

}

Angular Service：

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.";
        })

    }]);

HTML：

<!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>

如何使用Bootstrap Modal进行CRUD操作

使用来自asp.net webapi

0 个答案: