[Angularjs]asp.net mvc+angularjs+web api单页应用之CRUD操作

前端之家收集整理的这篇文章主要介绍了[Angularjs]asp.net mvc+angularjs+web api单页应用之CRUD操作前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

写在前面

文章整理了angularjs学习目录,有园子里的朋友问我要这方面的demo,周末也没什么事,就在之前的单页应用的demo上面添加了增删改查的操作。代码比较简单,这里只列举比较重要的代码片段。完整的代码将在文章下面提供链接

demo

获取对产品的查询分页增加商品,删除修改等操作。

List lstOrders = = = ,); response.Headers.Add(,); 方法,一般是GET,POST,PUT,DELETE,OPTIONS response.Headers.Add(,); lstOrders = List分页用 ( i = ; i < ; i++ Product { Dt = DateTime.Now,Id = i + ,Name = + i.ToString(),Price = i + } </span><span style="color: #008000;"&gt;//</span><span style="color: #008000;"&gt; GET: api/Order</span>

<span style="color: #000000;"> [HttpGet]
[Route(<span style="color: #800000;">"<span style="color: #800000;">api/product/lists<span style="color: #800000;">"<span style="color: #000000;">)]
<span style="color: #0000ff;">public <span style="color: #0000ff;">async Task Get(<span style="color: #0000ff;">string key,<span style="color: #0000ff;">int<span style="color: #000000;"> page)
{
<span style="color: #0000ff;">return <span style="color: #0000ff;">await Task.Factory.StartNew(() =><span style="color: #000000;">
{
<span style="color: #0000ff;">int pageSize = <span style="color: #800080;">10<span style="color: #000000;">;

  1. </span><span style="color: #0000ff;"&gt;var</span> results = <span style="color: #0000ff;"&gt;string</span>.IsNullOrEmpty(key) ? lstOrders : lstOrders.Where(x =><span style="color: #000000;"&gt; x.Name.Contains(key));
  2. </span><span style="color: #008000;"&gt;//</span><span style="color: #008000;"&gt;<a href="/tag/fenye/" target="_blank" class="keywords">分页</a></span>
  3. <span style="color: #0000ff;"&gt;var</span> pagedResults = results.Skip((page - <span style="color: #800080;"&gt;1</span>) *<span style="color: #000000;"&gt; pageSize).Take(pageSize);
  4. response.StatusCode </span>=<span style="color: #000000;"&gt; HttpStatusCode.OK;
  5. response.Content </span>= <span style="color: #0000ff;"&gt;new</span> StringContent(JsonConvert.SerializeObject(<span style="color: #0000ff;"&gt;new</span> { _code = <span style="color: #800080;"&gt;200</span>,_data =<span style="color: #000000;"&gt; pagedResults }));
  6. </span><span style="color: #0000ff;"&gt;return</span><span style="color: #000000;"&gt; response;
  7. });
  8. }
  9. [HttpPost]
  10. [Route(</span><span style="color: #800000;"&gt;"</span><span style="color: #800000;"&gt;api/product/lists</span><span style="color: #800000;"&gt;"</span><span style="color: #000000;"&gt;)]
  11. </span><span style="color: #0000ff;"&gt;public</span> <span style="color: #0000ff;"&gt;async</span> Task<HttpResponseMessage><span style="color: #000000;"&gt; Post([FromBody] Product order)
  12. {
  13. </span><span style="color: #0000ff;"&gt;return</span> <span style="color: #0000ff;"&gt;await</span> Task.Factory.StartNew(() =><span style="color: #000000;"&gt;
  14. {
  15. </span><span style="color: #008000;"&gt;//</span><span style="color: #008000;"&gt;模拟id</span>
  16. order.Id = <span style="color: #0000ff;"&gt;new</span> Random().Next(<span style="color: #800080;"&gt;101</span>,<span style="color: #800080;"&gt;5000</span><span style="color: #000000;"&gt;);
  17. lstOrders.Add(order);
  18. response.StatusCode </span>=<span style="color: #000000;"&gt; HttpStatusCode.OK;
  19. response.Content </span>= <span style="color: #0000ff;"&gt;new</span> StringContent(JsonConvert.SerializeObject(<span style="color: #0000ff;"&gt;new</span> { _code = <span style="color: #800080;"&gt;200</span>,_data =<span style="color: #000000;"&gt; order }));
  20. </span><span style="color: #0000ff;"&gt;return</span><span style="color: #000000;"&gt; response;
  21. });
  22. }
  23. [HttpPut]
  24. [Route(</span><span style="color: #800000;"&gt;"</span><span style="color: #800000;"&gt;api/product/lists</span><span style="color: #800000;"&gt;"</span><span style="color: #000000;"&gt;)]
  25. </span><span style="color: #008000;"&gt;//</span><span style="color: #008000;"&gt; POST: api/Order</span>
  26. <span style="color: #0000ff;"&gt;public</span> <span style="color: #0000ff;"&gt;async</span> Task<HttpResponseMessage><span style="color: #000000;"&gt; Put([FromBody] Product order)
  27. {
  28. </span><span style="color: #0000ff;"&gt;return</span> <span style="color: #0000ff;"&gt;await</span> Task.Factory.StartNew(() =><span style="color: #000000;"&gt;
  29. {
  30. </span><span style="color: #0000ff;"&gt;var</span> find = lstOrders.Find(o => o.Id ==<span style="color: #000000;"&gt; order.Id);
  31. </span><span style="color: #0000ff;"&gt;if</span> (find != <span style="color: #0000ff;"&gt;null</span><span style="color: #000000;"&gt;)
  32. {
  33. find.Name </span>=<span style="color: #000000;"&gt; order.Name;
  34. find.Price </span>=<span style="color: #000000;"&gt; order.Price;
  35. find.Dt </span>=<span style="color: #000000;"&gt; order.Dt;
  36. response.StatusCode </span>=<span style="color: #000000;"&gt; HttpStatusCode.OK;
  37. response.Content </span>= <span style="color: #0000ff;"&gt;new</span> StringContent(JsonConvert.SerializeObject(<span style="color: #0000ff;"&gt;new</span> { _code = <span style="color: #800080;"&gt;200</span>,_data =<span style="color: #000000;"&gt; find }));
  38. }
  39. </span><span style="color: #0000ff;"&gt;return</span><span style="color: #000000;"&gt; response;
  40. });
  41. }
  42. [HttpDelete]
  43. [Route(</span><span style="color: #800000;"&gt;"</span><span style="color: #800000;"&gt;api/product/lists</span><span style="color: #800000;"&gt;"</span><span style="color: #000000;"&gt;)]
  44. </span><span style="color: #008000;"&gt;//</span><span style="color: #008000;"&gt; DELETE: api/Order/5</span>
  45. <span style="color: #0000ff;"&gt;public</span> <span style="color: #0000ff;"&gt;async</span> Task<HttpResponseMessage> Delete(<span style="color: #0000ff;"&gt;int</span><span style="color: #000000;"&gt; id)
  46. {
  47. </span><span style="color: #0000ff;"&gt;return</span> <span style="color: #0000ff;"&gt;await</span> Task.Factory.StartNew(() =><span style="color: #000000;"&gt;
  48. {
  49. Product findOder </span>= lstOrders.Find(o => o.Id ==<span style="color: #000000;"&gt; id);
  50. lstOrders.Remove(findOder);
  51. response.StatusCode </span>=<span style="color: #000000;"&gt; HttpStatusCode.OK;
  52. response.Content </span>= <span style="color: #0000ff;"&gt;new</span> StringContent(JsonConvert.SerializeObject(<span style="color: #0000ff;"&gt;new</span> { _code = <span style="color: #800080;"&gt;200</span>,_data =<span style="color: #000000;"&gt; lstOrders }));
  53. </span><span style="color: #0000ff;"&gt;return</span><span style="color: #000000;"&gt; response;
  54. });
  55. }
  56. }</span></pre>

文件,注册module,服务的注册

app = angular.module('app_store',['ngRoute','StoreService' StoreService = angular.module('StoreService' StoreService.factory('requestService', request ='POST''''Content-Type': 'application/json' postData == "get"= "../api/product/lists?key=" + type + "&page=" += "post"= "../api/product/lists"== "DELETE"= "../api/product/lists?id=" += "put"= "../api/product/lists"= deferred = $q.defer(); 后执行,表示要去监控后面的执行 deferred.reject(data); </span><span style="color: #008000;"&gt;//</span><span style="color: #008000;"&gt; 声明执行失败,即服务器返回<a href="/tag/cuowu/" target="_blank" class="keywords">错误</a> </span>

<span style="color: #000000;"> });
<span style="color: #0000ff;">return deferred.promise; <span style="color: #008000;">//<span style="color: #008000;"> 返回承诺,这里并不是最终数据,而是访问最终数据的API
};

app.config(['$routeProvider','/',{ templateUrl: '../Scripts/Views/orders.html',controller: 'StoreController''/home',{ templateUrl: '../Scripts/Views/orders.html''/add',{ templateUrl: '../Scripts/Views/add-order.html',controller: 'OrderController''/edit/:id',controller: 'OrderController''/error',{ templateUrl: '../Scripts/Views/Error.html',controller: 'ErrorController''/error'

app.controller('StoreController','StoreController' page = 1$scope.productKey </span>= $scope.productKey ? $scope.productKey : ''<span style="color: #000000;"&gt;; $scope.products </span>=<span style="color: #000000;"&gt; []; $scope.query </span>= <span style="color: #0000ff;"&gt;function</span><span style="color: #000000;"&gt; (key,page) { requestService.lists(key,page).then(</span><span style="color: #0000ff;"&gt;function</span><span style="color: #000000;"&gt; (data) { </span><span style="color: #0000ff;"&gt;if</span> (data._code === 200<span style="color: #000000;"&gt;) { </span><span style="color: #0000ff;"&gt;for</span> (<span style="color: #0000ff;"&gt;var</span> i = 0; i < data._data.length; i++<span style="color: #000000;"&gt;) { $scope.products.push(data._data[i]); }; }; }); console.log($scope.products); }; $scope.query(</span>''<span style="color: #000000;"&gt;,page) </span><span style="color: #008000;"&gt;//</span><span style="color: #008000;"&gt;<a href="/tag/chaxun/" target="_blank" class="keywords">查询</a></span> $scope.search = <span style="color: #0000ff;"&gt;function</span><span style="color: #000000;"&gt; () { $scope.products </span>=<span style="color: #000000;"&gt; []; $scope.query($scope.productKey,page) }; $scope.add </span>= <span style="color: #0000ff;"&gt;function</span><span style="color: #000000;"&gt; () { $location.url(</span>'/add'<span style="color: #000000;"&gt;); }; $scope.loadMore </span>= <span style="color: #0000ff;"&gt;function</span><span style="color: #000000;"&gt; () { page</span>++<span style="color: #000000;"&gt;; $scope.query($scope.productKey,page) }; $scope.delte </span>= <span style="color: #0000ff;"&gt;function</span><span style="color: #000000;"&gt; (id) { requestService.product_delete(id).then(</span><span style="color: #0000ff;"&gt;function</span><span style="color: #000000;"&gt; (data) { console.log(data); </span><span style="color: #0000ff;"&gt;if</span> (data._code == 200<span style="color: #000000;"&gt;) { console.log(</span>'<a href="/tag/shanchu/" target="_blank" class="keywords">删除</a>成功'<span style="color: #000000;"&gt;); console.log(data._data); } }); }; $scope.edit </span>= <span style="color: #0000ff;"&gt;function</span><span style="color: #000000;"&gt; (id) { $location.url(</span>'/edit/' +<span style="color: #000000;"&gt; id); };

});

app.controller('OrderController',requestService) {
console.log('OrderController'<span style="color: #000000;">);
$scope.product =<span style="color: #000000;"> {
Id: ''<span style="color: #000000;">,Name: ''<span style="color: #000000;">,Price: 0<span style="color: #000000;">
};
<span style="color: #0000ff;">var id =<span style="color: #000000;"> $routeParams.id;
$scope.btn = id ? '确定' : '添加'<span style="color: #000000;">;

  1. $scope.add </span>= <span style="color: #0000ff;"&gt;function</span><span style="color: #000000;"&gt; () {
  2. </span><span style="color: #0000ff;"&gt;if</span><span style="color: #000000;"&gt; (id) {
  3. $scope.product.Id </span>=<span style="color: #000000;"&gt; id;
  4. requestService.product_put($scope.product).then(</span><span style="color: #0000ff;"&gt;function</span><span style="color: #000000;"&gt; (data) {
  5. console.log(data);
  6. </span><span style="color: #0000ff;"&gt;if</span> (data._code == 200<span style="color: #000000;"&gt;) {
  7. console.log(</span>'<a href="/tag/xiugai/" target="_blank" class="keywords">修改</a>成功'<span style="color: #000000;"&gt;);
  8. console.log(data._data);
  9. }
  10. });
  11. } </span><span style="color: #0000ff;"&gt;else</span><span style="color: #000000;"&gt; {
  12. requestService.product_add($scope.product).then(</span><span style="color: #0000ff;"&gt;function</span><span style="color: #000000;"&gt; (data) {
  13. console.log(data);
  14. </span><span style="color: #0000ff;"&gt;if</span> (data._code == 200<span style="color: #000000;"&gt;) {
  15. console.log(</span>'<a href="/tag/tianjia/" target="_blank" class="keywords">添加</a>成功'<span style="color: #000000;"&gt;);
  16. console.log(data._data);
  17. }
  18. });
  19. };
  20. };

});

required

<span style="color: #0000ff;"><<span style="color: #800000;">input <span style="color: #ff0000;">type<span style="color: #0000ff;">="text"<span style="color: #ff0000;">
name<span style="color: #0000ff;">="name"<span style="color: #ff0000;"> class<span style="color: #0000ff;">="form-control"<span style="color: #ff0000;"> placeholder<span style="color: #0000ff;">="单价"<span style="color: #ff0000;"> ng-model<span style="color: #0000ff;">="product.Price"<span style="color: #ff0000;"> required <span style="color: #0000ff;">/>
<span style="color: #0000ff;"><<span style="color: #800000;">button <span style="color: #ff0000;">class<span style="color: #0000ff;">="btn btn-primary btn-block"<span style="color: #ff0000;"> ng-click<span style="color: #0000ff;">="add()"<span style="color: #0000ff;">>{{btn}}<span style="color: #0000ff;"></<span style="color: #800000;">button<span style="color: #0000ff;">>

搜索商品"
  1. <span style="color: #0000ff;"&gt;<</span><span style="color: #800000;"&gt;dt </span><span style="color: #ff0000;"&gt;class</span><span style="color: #0000ff;"&gt;="address_user"</span><span style="color: #0000ff;"&gt;><</span><span style="color: #800000;"&gt;img </span><span style="color: #ff0000;"&gt;class</span><span style="color: #0000ff;"&gt;="address_user"</span><span style="color: #ff0000;"&gt; src</span><span style="color: #0000ff;"&gt;="/Content/Images/main.png"</span> <span style="color: #0000ff;"&gt;/></</span><span style="color: #800000;"&gt;dt</span><span style="color: #0000ff;"&gt;></span>
  2. <span style="color: #0000ff;"&gt;<</span><span style="color: #800000;"&gt;dd </span><span style="color: #ff0000;"&gt;class</span><span style="color: #0000ff;"&gt;="address_font"</span><span style="color: #0000ff;"&gt;></span>
  3. <span style="color: #0000ff;"&gt;<</span><span style="color: #800000;"&gt;p </span><span style="color: #ff0000;"&gt;class</span><span style="color: #0000ff;"&gt;="address_font_t"</span><span style="color: #0000ff;"&gt;></span>{{item.Name}}<span style="color: #0000ff;"&gt;</</span><span style="color: #800000;"&gt;p</span><span style="color: #0000ff;"&gt;></span>
  4. <span style="color: #0000ff;"&gt;<</span><span style="color: #800000;"&gt;p</span><span style="color: #0000ff;"&gt;></span>单价:¥{{item.Price}}<span style="color: #0000ff;"&gt;</</span><span style="color: #800000;"&gt;p</span><span style="color: #0000ff;"&gt;></span>
  5. <span style="color: #0000ff;"&gt;<</span><span style="color: #800000;"&gt;a </span><span style="color: #ff0000;"&gt;ng-click</span><span style="color: #0000ff;"&gt;="delte(item.Id)"</span><span style="color: #0000ff;"&gt;></span><a href="/tag/shanchu/" target="_blank" class="keywords">删除</a><span style="color: #0000ff;"&gt;</</span><span style="color: #800000;"&gt;a</span><span style="color: #0000ff;"&gt;></span>
  6. <span style="color: #0000ff;"&gt;<</span><span style="color: #800000;"&gt;a </span><span style="color: #ff0000;"&gt;ng-click</span><span style="color: #0000ff;"&gt;="edit(item.Id)"</span><span style="color: #0000ff;"&gt;></span>编辑<span style="color: #0000ff;"&gt;</</span><span style="color: #800000;"&gt;a</span><span style="color: #0000ff;"&gt;></span>
  7. <span style="color: #0000ff;"&gt;</</span><span style="color: #800000;"&gt;dd</span><span style="color: #0000ff;"&gt;></span>
  8. <span style="color: #0000ff;"&gt;</</span><span style="color: #800000;"&gt;dl</span><span style="color: #0000ff;"&gt;></span>

<span style="color: #0000ff;"></<span style="color: #800000;">div<span style="color: #0000ff;">>

  1. <span style="color: #0000ff;"&gt;<</span><span style="color: #800000;"&gt;button </span><span style="color: #ff0000;"&gt;class</span><span style="color: #0000ff;"&gt;="btn btn-primary btn-block "</span><span style="color: #ff0000;"&gt; ng-click</span><span style="color: #0000ff;"&gt;="loadMore()"</span><span style="color: #0000ff;"&gt;></span>加载更多...<span style="color: #0000ff;"&gt;</</span><span style="color: #800000;"&gt;button</span><span style="color: #0000ff;"&gt;></span>
  2. <span style="color: #0000ff;"&gt;<</span><span style="color: #800000;"&gt;button </span><span style="color: #ff0000;"&gt;class</span><span style="color: #0000ff;"&gt;="btn btn-primary btn-block "</span><span style="color: #ff0000;"&gt; ng-click</span><span style="color: #0000ff;"&gt;="add()"</span> <span style="color: #0000ff;"&gt;></span><a href="/tag/tianjia/" target="_blank" class="keywords">添加</a><span style="color: #0000ff;"&gt;</</span><span style="color: #800000;"&gt;button</span><span style="color: #0000ff;"&gt;></span></pre>

文件中

Meta Meta @ViewBag.Title - My ASP.NET Single Page Application 站点样式 *@

列表页面

添加商品和编辑商品使用同一个视图文件和controller,通过参数id来区别是编辑还是添加商品

删除商品,根据id删除商品,前端根据_code判断是否删除成功,删除商品0,结果如下所示

修改

总结

数据库,数据通过list模拟的,操作数据库的那部分,有兴趣的添加

猜你在找的Angularjs相关文章