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

写在前面

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

demo

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

display: none;" onclick="cnblogs_code_hide('9c2be513-a0c6-4e2b-af99-5978b6e482b4',event)" src="https://www.jb51.cc/res/2019/03-06/23/405b18b4b6584ae338e0f6ecaf736533.gif" alt="">

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: ap<a href="https://www.jb51.cc/tag/IO/" target="_blank" class="keywords">I/O</a>rder</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="https://www.jb51.cc/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: ap<a href="https://www.jb51.cc/tag/IO/" target="_blank" class="keywords">I/O</a>rder</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: ap<a href="https://www.jb51.cc/tag/IO/" target="_blank" class="keywords">I/O</a>rder/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，服务的注册。

display: none;" onclick="cnblogs_code_hide('5c920f98-1429-4ddf-b333-2f8286f34433',event)" src="https://www.jb51.cc/res/2019/03-06/23/405b18b4b6584ae338e0f6ecaf736533.gif" alt="">

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(); 后执行，表示要去监控后面的执行 fig) { deferred.resolve(data); fig) {

    deferred.reject(data);   </span><span style="color: #008000;"&gt;//</span><span style="color: #008000;"&gt; 声明执行失败，即服务器返回<a href="https://www.jb51.cc/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
};

display: none;" onclick="cnblogs_code_hide('6b171809-a2bc-45d4-8d5c-5367673fd300',event)" src="https://www.jb51.cc/res/2019/03-06/23/405b18b4b6584ae338e0f6ecaf736533.gif" alt="">

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'

display: none;" onclick="cnblogs_code_hide('551377b9-357c-4540-8d50-1a0e0c169985',event)" src="https://www.jb51.cc/res/2019/03-06/23/405b18b4b6584ae338e0f6ecaf736533.gif" alt="">

app.controller('StoreController',cope,$http,$location,$routeParams,requestService) { console.log('StoreController' page = 1$s<a href="https://www.jb51.cc/tag/cop/" target="_blank" class="keywords">cop</a>e.productKey </span>= $s<a href="https://www.jb51.cc/tag/cop/" target="_blank" class="keywords">cop</a>e.productKey ? $s<a href="https://www.jb51.cc/tag/cop/" target="_blank" class="keywords">cop</a>e.productKey : ''<span style="color: #000000;"&gt;; $s<a href="https://www.jb51.cc/tag/cop/" target="_blank" class="keywords">cop</a>e.products </span>=<span style="color: #000000;"&gt; []; $s<a href="https://www.jb51.cc/tag/cop/" target="_blank" class="keywords">cop</a>e.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;) { $s<a href="https://www.jb51.cc/tag/cop/" target="_blank" class="keywords">cop</a>e.products.push(data._data[i]); }; }; }); console.log($s<a href="https://www.jb51.cc/tag/cop/" target="_blank" class="keywords">cop</a>e.products); }; $s<a href="https://www.jb51.cc/tag/cop/" target="_blank" class="keywords">cop</a>e.query(</span>''<span style="color: #000000;"&gt;,page) </span><span style="color: #008000;"&gt;//</span><span style="color: #008000;"&gt;<a href="https://www.jb51.cc/tag/chaxun/" target="_blank" class="keywords">查询</a></span> $s<a href="https://www.jb51.cc/tag/cop/" target="_blank" class="keywords">cop</a>e.search = <span style="color: #0000ff;"&gt;function</span><span style="color: #000000;"&gt; () { $s<a href="https://www.jb51.cc/tag/cop/" target="_blank" class="keywords">cop</a>e.products </span>=<span style="color: #000000;"&gt; []; $s<a href="https://www.jb51.cc/tag/cop/" target="_blank" class="keywords">cop</a>e.query($s<a href="https://www.jb51.cc/tag/cop/" target="_blank" class="keywords">cop</a>e.productKey,page) }; $s<a href="https://www.jb51.cc/tag/cop/" target="_blank" class="keywords">cop</a>e.add </span>= <span style="color: #0000ff;"&gt;function</span><span style="color: #000000;"&gt; () { $location.url(</span>'/add'<span style="color: #000000;"&gt;); }; $s<a href="https://www.jb51.cc/tag/cop/" target="_blank" class="keywords">cop</a>e.loadMore </span>= <span style="color: #0000ff;"&gt;function</span><span style="color: #000000;"&gt; () { page</span>++<span style="color: #000000;"&gt;; $s<a href="https://www.jb51.cc/tag/cop/" target="_blank" class="keywords">cop</a>e.query($s<a href="https://www.jb51.cc/tag/cop/" target="_blank" class="keywords">cop</a>e.productKey,page) }; $s<a href="https://www.jb51.cc/tag/cop/" target="_blank" class="keywords">cop</a>e.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="https://www.jb51.cc/tag/shanchu/" target="_blank" class="keywords">删除</a>成功'<span style="color: #000000;"&gt;); console.log(data._data); } }); }; $s<a href="https://www.jb51.cc/tag/cop/" target="_blank" class="keywords">cop</a>e.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;">;

$s<a href="https://www.jb51.cc/tag/cop/" target="_blank" class="keywords">cop</a>e.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) {
        $s<a href="https://www.jb51.cc/tag/cop/" target="_blank" class="keywords">cop</a>e.product.Id </span>=<span style="color: #000000;"&gt; id;
        requestService.product_put($s<a href="https://www.jb51.cc/tag/cop/" target="_blank" class="keywords">cop</a>e.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="https://www.jb51.cc/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($s<a href="https://www.jb51.cc/tag/cop/" target="_blank" class="keywords">cop</a>e.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="https://www.jb51.cc/tag/tianjia/" target="_blank" class="keywords">添加</a>成功'<span style="color: #000000;"&gt;);
                console.log(data._data);
            }
        });
    };

};

});

display: none;" onclick="cnblogs_code_hide('5283f898-3641-48a9-a1c7-c9c64cea23c1',event)" src="https://www.jb51.cc/res/2019/03-06/23/405b18b4b6584ae338e0f6ecaf736533.gif" alt="">

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

display: none;" onclick="cnblogs_code_hide('7cf48c7b-ea9e-49cb-a619-90bb9fdc7661',event)" src="https://www.jb51.cc/res/2019/03-06/23/405b18b4b6584ae338e0f6ecaf736533.gif" alt="">

搜索商品"

    <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="https://www.jb51.cc/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="https://www.jb51.cc/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，结果如下所示

默认pageSize=10，加载第二页，如下图所示：

修改

总结

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