前台代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body ng-app="app" ng-controller="MyCtrl">
<input type="text" placeholder="名字" ng-model="Sname" />
<input type="button" value="提交" ng-click="insert(Sname)" />
<table style="width:100%;background-color:aqua;text-align:center">
<tr style="color:white">
<td>Id</td>
<td>Name</td>
<td>操作</td>
</tr>
<tr style="background-color:white" ng-repeat="item in list">
<td>{{item.id}}</td>
<td>{{item.name}}</td>
<td>
<input type="button" value="删除" ng-click="remove(item.id)" data-id="{{item.id}}" />
<input type="button" value="修改" ng-click="u(item)" />
</td>
</tr>
</table>
<hr />
<input type="text" ng-model="se.name" placeholder="名字" />
<input type="button" value="修改" ng-click="update()" />
<input type="text" ng-model="se.id" hidden="hidden" />
</body>
</html>
<script src="js/angular.min.js"></script> //我的angular.min为本地,可以去官网进行下载适用到本地
<script src="js/All.js"></script>
All.js代码
angular.module("app", [])
.controller("MyCtrl", function ($scope, $http) {
$scope.Sname = ""; //定义一个用来放入数据库的对象
$scope.se = {}; //定义一个用来放入文本框的集合
$http.get("odata/Use").then(function (data) { //查询全部数据
$scope.list = data.data.value;
})
$scope.remove = function (id) { //进入到方法里进行删除
$http.delete("odata/Use(" + id + ")") //给后台一个id进行查询删除
.then(function () {
window.location = location
alert("删除成功")
})
}
$scope.insert = function (s) { //进入到方法里进行添加
$scope.name = { "name": s } //前端带过来一个值,也可以多个,json结构
$http.post("odata/Use", $scope.name) //给后台一个对象
.then(function () {
window.location = location
alert("添加成功")
})
}
$scope.update = function () { //进入到方法里进行修改
$http.put("odata/Use(" + $scope.se.id + ")", $scope.se) //给后台一个id进行查询后,在给后台一个已经修改的对象进行修改
.then(function () {
window.location = location
alert("修改成功!")
})
}
$scope.u = function (st) { //把item的值赋给$scope.se
$scope.se = st;
}
//then为返回方法
})
后台代码(UseController.cs)
public class UseController : ODataController
{
UseContext ue = new UseContext(); //定义一个context进行数据库的操作
[EnableQuery] //返回一个集合
public IQueryable<Use> Get() //获取全部数据
{
return ue.Uses;
}
//增
public async Task<IHttpActionResult> Post(Use u) //从前台带过来一个对象,进行数据库的添加
{
if (!ModelState.IsValid) //验证数据是否正确
return BadRequest(ModelState); //不正确
ue.Uses.Add(u); //正确就添加
await ue.SaveChangesAsync(); //提交
return Created(u);
}
//删
public async Task<IHttpActionResult> Delete([FromODataUri] int key) //从前台带过来一个id
{
var s = await ue.Uses.FindAsync(key); //查询id是否存在
if (s == null) return NotFound(); //不存在
ue.Uses.Remove(s); //存在删除
await ue.SaveChangesAsync(); //提交
return StatusCode(HttpStatusCode.NoContent);
}
//改
public async Task<IHttpActionResult> Put([FromODataUri] int key, Use s) //从前台带过来一个id和一个已经修改过的对象
{
if (!ModelState.IsValid) return BadRequest(ModelState); //验证前台数据是否符合
if (key != s.id) return BadRequest();//判断前台id是否存在
ue.Entry(s).State = EntityState.Modified; //存在添加
try
{
await ue.SaveChangesAsync(); //提交
}
catch (DbUpdateConcurrencyException)
{
if (!ProductExists(key)) return NotFound();
else throw;
}
return Updated(s);
}
private bool ProductExists(int key)
{
return ue.Uses.Any(r => r.id == key); //再次查询id
}
}