WebApi

1.创建实体类

public class Contact
    {
        public string Id { get; set; }
        public string Name { get; set; }
        public string Phone { get; set; }
        public string Email { get; set; }
        public DateTime LastModified { get; set; }
    }

2.操作实体类接口

public interface IContactRepository
    {
        IEnumerable<Contact> GetAllContacts();//获取全部数据
        Contact GetContact(string id);//根据id获取数据
        List<Contact> AddContact(Contact item);//添加数据
        bool RemoveContact(string id);//删除数据
        List<Contact> UpdateContact(Contact item);   //更新数据
    }

3.创建BLL并实现IContactRepository接口

public class ContactBLL : IContactRepository
    {
        public IEnumerable<Contact> GetAllContacts()
        {
            return ContactDAL.GetAllContactsDAL();
        }

public Models.Contact GetContact(string id)
        {
            return ContactDAL.GetContactDAL(id);
        }

public List<Contact> AddContact(Contact item)
        {
            return ContactDAL.AddContactDAL(item);
        }

public bool RemoveContact(string id)
        {
            return ContactDAL.RemoveContactDAL(id);
        }

public List<Contact> UpdateContact(Contact item)
        {
            return ContactDAL.UpdateContactDAL(item.Id,item);
        }
    }

4.创建DAL操作数据，因为没有写数据库，所以写了一个集合模拟数据库

public class ContactDAL
    {
        static List<Contact> list = new List<Contact>() { 
            new Contact(){Id = "1",Name = "小李",Phone = "13800000",Email = "222@qq.com",LastModified = DateTime.Now},
            new Contact(){Id = "2",Name = "小王",Phone = "13500000",Email = "333@qq.com",LastModified = DateTime.Now}
        };

public static IEnumerable<Contact> GetAllContactsDAL()
        {
            var a = list.Where(u => 1 == 1);
            return a;
        }

public static Contact GetContactDAL(string id)
        {
            var contact = list.Where(u => u.Id == id).FirstOrDefault<Contact>();//使用lamdba

return contact;

}

public static List<Contact> AddContactDAL(Contact item)
        {
            list.Add(item);
            return list;
        }

public static bool RemoveContactDAL(string id)
        {
            var a = from u in list where u.Id == id select u;//使用linq
            bool b = list.Remove(a.FirstOrDefault<Contact>());
            return b;
        }

public static List<Contact> UpdateContactDAL(string id,Contact item)
        {
            //var a = list.Where(u => u.Id == id).FirstOrDefault<Contact>();
            var a = from u in list where u.Id == id select u;
            Contact contact = a.FirstOrDefault<Contact>();
            contact.Name = item.Name;
            return list;
        }

}

5.创建api可以读写的控制器

[AllowCross]//webapi允许跨域访问
    [RoutePrefix("api/contact")]//配置路由
    public class ContactController : ApiController
    {
        private static readonly IContactRepository _contacts = new ContactBLL();

[HttpGet]
        public string GetContact()
        {
            return JsonConvert.SerializeObject(_contacts.GetAllContacts());
            
        }

[HttpGet]
        public Contact GetContact(string id)
        {
            return _contacts.GetContact(id);
            
        }

[HttpPost]
        public List<Contact> AddContact([FromBody]Contact value)
        {
            return _contacts.AddContact(value);
        }

[HttpPost]
        public List<Contact> UpdateContact([FromBody]Contact value)
        {
            return _contacts.UpdateContact(value);
        }

[HttpGet]
        public bool RemoveContact(string id)
        {
            return _contacts.RemoveContact(id);
        }
        
    }

6.路由配置（App_Start中的RouteConfig.cs）

修改：url: "{controller}/{action}/{id}",

7.配置跨域访问（App_Start中的WebApiConfig.cs）

添加改类

public class AllowCrossAttribute : System.Web.Http.Filters.ActionFilterAttribute
    {
        private const string Origin = "Origin";
        /// <summary>
        /// Access-Control-Allow-Origin是HTML5中定义的一种服务器端返回Response header，用来解决资源（比如字体）的跨域权限问题。
        /// </summary>
        private const string AccessControlAllowOrigin = "Access-Control-Allow-Origin";
        /// <summary>
        ///  originHeaderdefault的值可以使 URL 或 *，如果是 URL 则只会允许来自该 URL 的请求，* 则允许任何域的请求
        /// </summary>
        private const string originHeaderdefault = "*";
        /// <summary>
        /// 该方法允许api支持跨域调用
        /// </summary>
        /// <param name="actionExecutedContext"> 初始化 System.Web.Http.Filters.HttpActionExecutedContext 类的新实例。</param>
        public override void OnActionExecuted(HttpActionExecutedContext actionExecutedContext)
        {
            actionExecutedContext.Response.Headers.Add(AccessControlAllowOrigin, originHeaderdefault);
        }
    }

Web端调用

@{
    ViewBag.Title = "请求web api";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<h2>请求web api</h2>

<div>

<input type="button" value="获取全部数据" οnclick="GetContactAll()"/>
    <input type="button" value="根据id获取数据" οnclick="GetContactToId()" />
    <input type="button" value="添加数据" οnclick="AddContact()" />
    <input type="button" value="更新数据" οnclick="UpdateContact()" />
    <input type="button" value="删除数据" οnclick="RemoveContact()" />

</div>

<script>

var path = "http://localhost:32166/api/Contact/";

function GetContactAll() {

$.get(path + "GetContact", "", function (data) {

console.info(data);

},"json")

}

function GetContactToId() {

$.get(path + "GetContact", {id:"1"}, function (data) {

console.info(data);

},"json")

}

function AddContact() {
        
        var contact1 ={
            Id:"3",
            Name: "小楼",
            Phone: "123456",
            Email: "123@qq.com"
        }

var contact2 = {
            Id: "4",
            Name: "小楼",
            Phone: "123456",
            Email: "123@qq.com"
        }

//两种方式

$.post(path + "AddContact", contact1, function (data) {

console.info(data);

}, "json");//第一种

$.ajax({
            type: "post",
            url: path + "AddContact",
            dataType: "json",
            data: contact2,
            async: true,
            success: function (data) {
                console.info(data);
            }
        })//第二种
    }

function UpdateContact() {
        var contact= {
            Id:"1",
            Name: "小楼",
            Phone: "123456",
            Email: "123@qq.com"
        }
        
        $.post(path + "UpdateContact", contact, function (data) {
        
            console.info(data);

},'json')

}

function RemoveContact() {

$.get(path + "RemoveContact", { id: "1" }, function (data) {

console.info(data);

},'json');

}

</script>