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

Angularjs 前端之家
前端之家收集整理的这篇文章主要介绍了[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;">;

            </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));
            </span><span style="color: #008000;"&gt;//</span><span style="color: #008000;"&gt;<a href="/tag/fenye/" target="_blank" class="keywords">分页</a></span>
            <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);
            response.StatusCode </span>=<span style="color: #000000;"&gt; HttpStatusCode.OK;
            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 }));
            </span><span style="color: #0000ff;"&gt;return</span><span style="color: #000000;"&gt; response;
        });
    }
    [HttpPost]
    [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;)]
    </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)
    {
        </span><span style="color: #0000ff;"&gt;return</span> <span style="color: #0000ff;"&gt;await</span> Task.Factory.StartNew(() =><span style="color: #000000;"&gt;
        {
            </span><span style="color: #008000;"&gt;//</span><span style="color: #008000;"&gt;模拟id</span>
            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;);
            lstOrders.Add(order);
            response.StatusCode </span>=<span style="color: #000000;"&gt; HttpStatusCode.OK;
            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 }));
            </span><span style="color: #0000ff;"&gt;return</span><span style="color: #000000;"&gt; response;
        });
    }
    [HttpPut]
    [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;)]
    </span><span style="color: #008000;"&gt;//</span><span style="color: #008000;"&gt; POST: api/Order</span>
    <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)
    {
        </span><span style="color: #0000ff;"&gt;return</span> <span style="color: #0000ff;"&gt;await</span> Task.Factory.StartNew(() =><span style="color: #000000;"&gt;
        {
            </span><span style="color: #0000ff;"&gt;var</span> find = lstOrders.Find(o => o.Id ==<span style="color: #000000;"&gt; order.Id);
            </span><span style="color: #0000ff;"&gt;if</span> (find != <span style="color: #0000ff;"&gt;null</span><span style="color: #000000;"&gt;)
            {
                find.Name </span>=<span style="color: #000000;"&gt; order.Name;
                find.Price </span>=<span style="color: #000000;"&gt; order.Price;
                find.Dt </span>=<span style="color: #000000;"&gt; order.Dt;
                response.StatusCode </span>=<span style="color: #000000;"&gt; HttpStatusCode.OK;
                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 }));
            }


            </span><span style="color: #0000ff;"&gt;return</span><span style="color: #000000;"&gt; response;
        });
    }

    [HttpDelete]
    [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;)]
    </span><span style="color: #008000;"&gt;//</span><span style="color: #008000;"&gt; DELETE: api/Order/5</span>
    <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)
    {
        </span><span style="color: #0000ff;"&gt;return</span> <span style="color: #0000ff;"&gt;await</span> Task.Factory.StartNew(() =><span style="color: #000000;"&gt;
        {
            Product findOder </span>= lstOrders.Find(o => o.Id ==<span style="color: #000000;"&gt; id);
            lstOrders.Remove(findOder);
            response.StatusCode </span>=<span style="color: #000000;"&gt; HttpStatusCode.OK;
            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 }));
            </span><span style="color: #0000ff;"&gt;return</span><span style="color: #000000;"&gt; response;
        });


    }
}</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;">;

$scope.add </span>= <span style="color: #0000ff;"&gt;function</span><span style="color: #000000;"&gt; () {
    </span><span style="color: #0000ff;"&gt;if</span><span style="color: #000000;"&gt; (id) {
        $scope.product.Id </span>=<span style="color: #000000;"&gt; id;
        requestService.product_put($scope.product).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/xiugai/" target="_blank" class="keywords">修改</a>成功'<span style="color: #000000;"&gt;);
                console.log(data._data);
            }
        });
    } </span><span style="color: #0000ff;"&gt;else</span><span style="color: #000000;"&gt; {
        requestService.product_add($scope.product).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/tianjia/" target="_blank" class="keywords">添加</a>成功'<span style="color: #000000;"&gt;);
                console.log(data._data);
            }
        });
    };

};

});

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;">>

搜索商品" 
    <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>
    <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>
        <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>
        <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>
        <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>
        <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>
    <span style="color: #0000ff;"&gt;</</span><span style="color: #800000;"&gt;dd</span><span style="color: #0000ff;"&gt;></span>
<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;">>

<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>
<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相关文章

AngularJS 简介
AngularJS 是一个JavaScript 框架。它可通过 注：建议把脚本放在 元素的底部。这会提高网页...
angluarjs中页面初始化的时候会出现语法{{}}在页面中问题
angluarjs中页面初始化的时候会出现语法{{}}在页面中问题，也即是页面闪烁问题。出现这个的...
AngularJS 指令
AngularJS 通过被称为指令的新属性来扩展 HTML。AngularJS 指令AngularJS 指令是扩展的 HT...
AngularJS 表达式
AngularJS 使用表达式把数据绑定到 HTML。AngularJS 表达式AngularJS 表达式写在双大括号内...
AngularJS 表格
ng-repeat 指令可以完美的显示表格。在表格中显示数据 {{ x.Name }} {{ x.Country }} 使用...
AngularJS 控制器
AngularJS 控制器控制AngularJS 应用程序的数据。AngularJS 控制器是常规的JavaScript 对象...
AngularJS Filters
过滤器可以使用一个管道字符（|）添加到表达式和指令中。AngularJS 过滤器AngularJS 过滤器...
KeyPress 和KeyDown 、KeUp之间的区别
keyup适用于文本框的数据输入和同步，以及数据的获取；keydown 与 keypress更适用于通过键...
angularjs -- 页面模板清除
angularJs模板缓存的清除，包括传统的 HTML标签设置清除缓存，以及angularJs的一些配置清除...
angularjs -- 监听angularJs列表数据是否渲染完毕
前端在做数据渲染的时候经常会遇到在数据渲染完毕后执行某些操作，这几天就一直遇到在列表...
HTMLHTML5JavaScriptCSSjQueryBootstrapAngularjsTypeScriptVueDojoJsonElectronNode.jsextjsExpress XMLES6AjaxFlashUnityReactFlexAnt DesignWeb前端微信小程序微信公众号
关闭广告单独headers封装代码提示错误整数正则非0开头跳页出页码antd table提示URL未注册公众号支付vue hash模式iSlider车牌键盘循环图片echarts 双折左右布局DllPlugin对象创建打字游戏圈选两栏云函数蒙版ES2020橱窗无缝滚动轮播色块碰撞组件销毁文档操作