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