ASP.NET Web API教程(三) 增删改

   上一篇中已经介绍了如何获取数据，这一篇就直接分享增删改。

第一步增加方法
Bll中增加

public UserInfo Add(UserInfo user)
        {
            var tempId = Data.OrderByDescending(j => j.Id).First().Id + 1;
            user.Id = tempId;
            Data.Add(user);
            return user;
        }

        public UserInfo Update(UserInfo user)
        {
            var tempUser = Data.Where(j => j.Id == user.Id).Single();
            tempUser.Age = user.Age;
            tempUser.Name = user.Name;
            return tempUser;
        }

        public bool TryGet(int id, out UserInfo user)
        {
            try
            {
                user = Data.Where(j => j.Id == id).Single();
                return true;
            }
            catch (Exception)
            {
                user = null;
                return false;
            }
        }

        public void Delete(int id)
        {
            Data.Remove(Data.Where(j => j.Id == id).Single());
        }

以上为增删改方法

第二步 增加Controller中方法

// add
        public HttpResponseMessage Post(UserInfo userInfo)
        {
            userInfo = bll.Add(userInfo);
            var response = Request.CreateResponse<UserInfo>(HttpStatusCode.Created, userInfo);
            response.Headers.Location = new Uri(Request.RequestUri, "/api/userinfo/" + userInfo.Id.ToString());
            return response;
        }


        //post update
        public HttpResponseMessage Update(int id,UserInfo userInfo)
        {
            userInfo = bll.Update(userInfo);
            var response = Request.CreateResponse<UserInfo>(HttpStatusCode.OK, userInfo);
            response.Headers.Location = new Uri(Request.RequestUri, "/api/userinfo/" + userInfo.Id.ToString());
            return response;
        }

        // DELETE 
        public UserInfo Delete(int id)
        {
            UserInfo user;
            if (!bll.TryGet(id, out user))
                throw new HttpResponseException(new HttpResponseMessage(HttpStatusCode.NotFound));
            bll.Delete(id);
            return user;

        }

第三步准备页面新建页面
首先引入js

<script src="Scripts/jquery-1.7.1.min.js" type="text/javascript"></script>
<script src="Scripts/knockout-2.1.0.js" type="text/javascript"></script>

增加操作代码

<a class="delete" data-bind="attr: { 'data-userinfo-id': Id }" href="#">删除</a>
                <a class="update" data-bind="attr: { 'data-userinfo-id': Id,'data-userinfo-name': Name,'data-userinfo-age': Age }" href="#">修改</a>

添加或修改Form

<form id="newUserInfoForm">
        <fieldset>
            <legend>新建</legend>
            <input type="hidden" value="0" name="id" id="id" />
            <label for="text">名称</label>
            <input id="name" name="name" type="text" value="" />
            <label for="text">年龄</label>
            <input id="age" name="age" type="text" value="" />
            <button type="submit">Submit</button>
        </fieldset>
        </form>

完善js功能

<script type="text/javascript">
            viewModel = {
                userinfos: ko.observableArray([])
            };

            ko.applyBindings(viewModel);
            $.get('/api/userInfo', function (data) {
                // 从API中
                // 得到返回的数据，更新 Knockout 模型并且绑定到页面UI模板中                         
                viewModel.userinfos(data);
            });

            $('#newUserInfoForm').submit(function () {
                var form = $(this);
                var userinfo = { Id: $("#id").val(), Name: $('#name').val(), Age: $('#age').val() };
                var json = JSON.stringify(userinfo);
                if ($("#id").val() == "0") {
                    $.ajax({
                        url: '/api/userinfo',
                        cache: false,
                        type: 'POST',
                        data: json,
                        contentType: 'application/json; charset=utf-8',
                        statusCode: {
                            201 /*Created*/: function (data) {
                                viewModel.userinfos.push(data);
                            }
                        }
                    });
                } else {
                    $.ajax({
                        url: '/api/userinfo/' + $("#id").val(),
                        cache: false,
                        type: 'POST',
                        data: json,
                        contentType: 'application/json; charset=utf-8',
                        statusCode: {
                            200 /*Update*/: function (data) {
                                viewModel.userinfos.remove(function (userinfo) {
                                    return userinfo.Id == data.Id;
                                });
                                viewModel.userinfos.push(data);

                            }
                        }
                    });
                }
                return false;
            });
            $("a.update").live('click', function () {
                $("#id").val($(this).data('userinfo-id'));
                $("#name").val($(this).data('userinfo-name'));
                $("#age").val($(this).data('userinfo-age'));
            });
            $("a.delete").live('click', function () {
                var id = $(this).data('userinfo-id');

                $.ajax({
                    url: "/api/userinfo/" + id,
                    type: 'DELETE',
                    cache: false,
                    statusCode: {
                        200: function (data) {
                            viewModel.userinfos.remove(function (userinfo) {
                                return userinfo.Id == data.Id;
                            });
                        }
                    }
                });

                return false;
            });
        </script>

接下来就是激动人心的时候了，测试功能。

以下为本章的源码:/Files/risk/web api3/MvcApplication1.rar