加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 综合聚焦 > 服务器 > 安全 > 正文

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

发布时间:2020-12-17 10:36:35 所属栏目:安全 来源:网络整理
导读:写在前面 demo List lstOrders = = = , ); response.Headers.Add( , ); response.Headers.Add( , ); lstOrders = List ( i = ; i ; i++ Product { Dt = DateTime.Now,Id = i + ,Name = + i.ToString(),Price = i + } /spanspan style="color: #008000;"gt;//

写在前面

demo

List lstOrders = = = ,); response.Headers.Add(,); 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;分页</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>

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; 声明执行失败,即服务器返回错误 </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;查询</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>'删除成功'<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>'修改成功'<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>'添加成功'<span style="color: #000000;"&gt;);
                console.log(data._data);
            }
        });
    };

};

});

<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>删除<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>添加<span style="color: #0000ff;"&gt;</</span><span style="color: #800000;"&gt;button</span><span style="color: #0000ff;"&gt;></span></pre>

@ViewBag.Title - My ASP.NET Single Page Application

总结

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读