WebAPI实例

@{
    ViewBag.Title = "About";
}
@*<script src="~/Scripts/jquery-1.7.1.min.js"></script>*@
<script src="~/Scripts/jquery-1.7.2.min.js"></script>
<h2>About</h2>

<script type="text/javascript">

    $(document).ready(function () {

        $("#btnAll").click(function () {
            $.getJSON("/api/contact", function (data) {

                var html = "<ul>";
                $.each(data, function (i, item) {
                    html += "<li>" + item.ID + ":" + item.Name + ":" + item.Sex+"</li>";
                });
                html += "</ul>";

                $("#contactAll").html(html);

            });
        })

        //$("#btnID").click(function () {
        //    var id = $("#txtid").val();
          
        //    $.getJSON("/api/Contact/1", function (data) {
                 
        //        var html = "<ul>";
        //        //$.each(data, function (i, item) {
        //        //$(data).each(function(i,item){
        //         // $.each(data, function (i, item) {
        //        $.each(data, function (i, item) {
        //            html += "<li>"+item.ID+":"+item.Name+":"+item.Sex+"</li>";
        //        });

        //        html += "</ul>";
        //        $("#contactID").html(html);

        //    });
        //});





        //$("#btnID").click(function () {
        //    var id = $("#txtid").val();
        //                  $.getJSON("/api/Contact/"+id, function (data) {  
        //                          var html = "<ul>";  
        //                          $(data).each(function (i, item) {  
        //                                   html += "<li>" + item.ID + ":" + item.Name + ":" + item.Sex + "</li>";  
        //                               });  
        //                            html += "</ul>";  
        //                           $("#contactID").html(html);  
        //                      });  
        //});




        $("#btnID").click(function () {
            var id = $("#txtid").val();
            $.getJSON("/api/Contact/" + id, function (data) {
                var html = "<ul>";
                $(data).each(function (i, item) {
                    html += "<li>" + item.ID + ":" + item.Name + ":" + item.Sex + "</li>";
                });
                html += "</ul>";
                $("#contactID").html(html);
            });
        });

        ////post的时候应该这样传值，传递2个参数，后台用dynamic obj
        //// 当传递一个对象类型的时候也是这样写，后台可以用（Contact obj）

        $("#btnSave").click(function () {
            var contact = { ID: 5, Name: "sxj", Sex: "男", Birthday: "2017-1-1", Age: 30 };
            $.ajax({
                type: "POST",
                data: JSON.stringify(contact),
                contentType:"application/json",
                url: "http://localhost:49533/api/contact/SaveData",
                success: function (data, status) {
                    alert(data);
                }

            });


        });

  
        ////post的时候应该这样传值，传递2个参数，后台用dynamic obj
        //// 当传递一个对象类型的时候也是这样写，后台可以用（Contact obj）
        //$("#btnSave").click(function () {
        //    $.ajax({
        //        type: "POST",
        //        data: JSON.stringify({ id: 1, Name: "yye" }),
        //        contentType:"application/json",
        //        url: "http://localhost:49533/api/contact/SData",
        //        success: function (data,status) {

        //            alert(data);
        //        }

        //    });
        //});

        

        $("#btnTestTwoParams").click(function () {

            $.ajax({
                type: "GET",
                data: { id: 1, Name: "ss" },
                url: "http://localhost:49533/api/contact/GetName",
                success: function (data, status) {
                    alert(data);
                }


            })
        })


    })

</script>
<input id="btnAll" type="button" value="查看所有"/>
<input id="txtid" name="txtid"  type="text"/>
<input id="btnID" type="button"  value="根据ID查询"/>'
<input id="btnSave" type="button"  value="保存数据"/>
<input id="btnTestTwoParams" type="button"  value="测试Get传2个参数"/>
<select id="ddlsex" name="ddlsex">
    <option value="男">男</option>
    <option value="女">女</option>
</select>
<input  id="btnSex" name="btnSex" value="根据性别查询"/>
 <div id="contactAll">  
</div>  
<div id="contactID">  
</div>  
 <div id="contactSex">  
 </div> 

using MvcWebAPI.Models;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Net.Http;
using System.Text;
using System.Web.Http;

namespace MvcWebAPI.Controllers
{
    public class ContactController : ApiController
    {
        Contact[] contacts = new Contact[] { 
            new Contact(){ ID=1,Age=23,Birthday=Convert.ToDateTime("1977-05-30"), Name="情缘", Sex="男"},
            new Contact(){ID=2, Age=55, Birthday=Convert.ToDateTime("1937-05-30"), Name="令狐冲", Sex="男"},
            new Contact(){ ID=3, Age=12, Birthday=Convert.ToDateTime("1987-05-30"), Name="郭靖", Sex="男"},
            new Contact(){ ID=4, Age=18, Birthday=Convert.ToDateTime("1997-05-30"), Name="黄蓉", Sex="女"}
        };


        public IEnumerable<Contact> GetListAll()
        {
            return contacts;


        }

        public string GetName(int id, string name)
        {
            return name;
        }


        public Contact GetContactByID(int id)
        {
            Contact contact = contacts.FirstOrDefault(c => c.ID == id);
            return contact;
        }

        public IEnumerable<Contact> GetListBySex(string sex)
        {
            return contacts.Where(c => c.Sex == sex);
        }

        [HttpPost]
        public string SaveData(Contact obj)
        {
            string ss = obj.Name;
            return ss;
        }

        //[HttpPost]
        //public string SData(dynamic obj)
        //{
        //    string ss = obj.Name;
        //    return ss;
        //}


    }
}

 

public class Contact
{
public int ID { get; set; }
public int Age { get; set; }
public DateTime Birthday { set; get; }
public string Name { set; get; }
public string Sex { set; get; }
}