Asp.net Mvc Web Api 学习（一）

看了很久终于有点眉目了。

首先建一个项目Asp.net MVC4 Web Application下的Web Api项目；

在Controllers文件夹下新建一个类（继承 ApiController）

public class UserController : ApiController
    {
        public IQueryable<User> Get()
        {
            return List.AsQueryable();
        }

        public User Get(string id)
        {
            User user = List.Single<User>(u => u.userNo == id);
            if (user != null)
            {
                return user;
            }
            return user;
        }

        public bool Post(User user)
        {
            if (user != null)
            {
                List.Add(user);
                return true;
            }
            return false;
        }

        public bool Put(User user)
        {
            if (user != null)
            {
                User u = List.Single<User>(mu => mu.userNo == user.userNo);
                List.Remove(u);
                List.Add(user);
                return true;
            }
            return false;
        }

        public bool Delete(string id)
        {
            if (id != null)
            {
                User u = List.Single<User>(mu => mu.userNo == id);
                List.Remove(u);
                return true;
            }
            return false;
        }

        /// <summary>
        /// 测试数据
        /// </summary>
        private static List<User> List = new List<User>();

        public class User
        {
            public string userNo { get; set; }
            public string Name { get; set; }
            public string Pwd { get; set; }
        }
    }

需要注意一下方法名(get ,post,put,delete)和参数名(string id)和Global.asax对应。

客户端代码：

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="MvcApplication5.Views.WebForm1" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <script type="text/javascript" src="Scripts/jquery-1.6.2.min.js"></script>
    <title></title>
    <script type="text/javascript">
        function find() {
            var id = $("#uId").val();
            if (id != "") {
                $.ajax({
                    type: "GET",
                    url: "http://localhost:2930/api/user/" + id,
                    dataType: "json",
                    success: function (data) {
                        if (data != 0) {
                            var str = "编号：" + data.userNo + " 姓名：" + data.Name + "<br/>";
                            $("#user").html(str);
                        }
                        else {
                            $("#user").html("");
                        }
                    }
                })
            }
            else {
                $.ajax({
                    type: "GET",
                    url: "http://localhost:2930/api/user/",
                    dataType: "json",
                    success: function (data) {
                        if (data != 0) {
                            var str = "";
                            $.each(data, function (i) {
                                str += "编号：" + data[i].userNo + " 姓名：" + data[i].Name + "<br/>";
                            })
                            $("#user").html(str);
                        }
                        else {
                            $("#user").html("");
                        }
                    }
                })
            }
        }

        function Add() {
            var no = $("#txtno").val();
            var name = $("#txtname").val();
            $.ajax({
                type: "POST",
                dataType: "json",
                url: "http://localhost:2930/api/user/",
                data: { userNo: no, Name: name,Pwd:"000000" },
                success: function (data) {
                    alert(data.toString());
                },
                error:function(data) {
                    alert(data.toString());
                    alert("出错了");
                }
            })
        }

        function Edit() {
            var no = $("#txtno").val();
            var name = $("#txtname").val();
            $.ajax({
                type: "PUT",
                dataType: "json",
                url: "http://localhost:2930/api/user/",
                data: { userNo: no, Name: name, Pwd: "000000" },
                success: function (data) {
                    alert(data.toString());
                },
                error: function (data) {
                    alert(data.toString());
                    alert("出错了");
                }
            })
        }

        function Del() {
            var id = $("#txtno").val();
            $.ajax({
                type: "Delete",
                dataType: "json",
                url: "http://localhost:2930/api/user/"+id,
                success: function (data) {
                    alert("删除成功");
                },
                error: function (data) {
                    alert(data.toString());
                    alert("出错了");
                }
            })
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <h1>所有用户</h1>
        <ul id='users' />
    </div>
    <div>
        <label>ID:</label>
        <input type="text" id="uId" size="5" />
        <input type="button" value="查找" onclick="find();" />
        <input type="button" value="删除" onclick="Del();" />
        <p id="user" />
    </div>
    <div>
        <label>ID:</label>
        <input type="text" id="txtno" name="txtno" size="5" />
        <label>姓名:</label>
        <input type="text" id="txtname" name="txtname" size="5" />
        <input type="button" value="提交" onclick="Add();" />
        <input type="button" value="修改" onclick="Edit();" />
        <p id="P1" />
    </div>
    </form>
</body>
</html>

好像其他没啥要改的，初步就这样吧。