webapi-2 接口參數

1. 實例

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Net.Http;
using System.Web.Http;
using wxweb.Areas.API.Models;

namespace wxweb.Areas.API.Controllers
{
    public class ProductController : ApiController
    {
        Product[] products = new Product[]
      {
            new Product { Id = 1, Name = "Tomato Soup", Category = "Groceries", Price = 1 },
            new Product { Id = 2, Name = "Yo-yo", Category = "Toys", Price = 3.75M },
            new Product { Id = 3, Name = "Hammer", Category = "Hardware", Price = 16.99M }
      };

        Product[] products_post = new Product[]
     {
            new Product { Id = 1, Name = "name01", Category = "Category01", Price = 10 },
            new Product { Id = 2, Name = "name02", Category = "Category02", Price = 20M },
            new Product { Id = 3, Name = "name03", Category = "Category03", Price = 30M }
     };

        /// <summary>
        /// get 無參數傳參
        /// </summary>
        /// <returns></returns>
        [HttpGet]
        public IEnumerable<Product> GetAllProducts()
        {
           return products;
        }

        /// <summary>
        /// get 單參數傳參
        /// </summary>
        /// <param name="id"></param>
        /// <returns></returns>
        [Route("api/Product/GetProductById")]
        [HttpGet]
        public IHttpActionResult GetProductById(string id)
        {
            var product = products.FirstOrDefault((p) => p.Id == Convert.ToInt32(id));
            if (product == null)
            {
                return NotFound();
            }
            return Ok(product);
        }

        /// <summary>
        /// get多參數傳參
        /// </summary>
        /// <param name="id"></param>
        /// <param name="name"></param>
        /// <returns></returns>
        [HttpGet]
        public string para_get_base(string id,string name)
        {
            return "id:"+id+"   name:"+name;
        }

        /// <summary>
        /// get form傳參
        /// </summary>
        /// <param name="p"></param>
        /// <returns></returns>
        [Route("api/Product/para_get_form")]
        [HttpGet]
        public string para_get_form([FromUri]Product p)
        {
            return "p.Name:" + p.Name + "   p.Price:" + p.Price;
        }

        /// <summary>
        /// post 無參數傳參
        /// </summary>
        /// <returns></returns>
        [Route("api/Product/GetProducts")]
        [HttpPost]
        public IEnumerable<Product> GetProducts()
        {
          
            return products_post;
        }

        /// <summary>
        /// post 單個參數傳參
        /// </summary>
        /// <param name="id"></param>
        /// <returns></returns>
        [Route("api/Product/GetProduct")]
        [HttpPost]
        public IHttpActionResult GetProduct([FromBody]string id)
        {
            var product = products_post.FirstOrDefault((p) => p.Id ==Convert.ToInt32( id));
            if (product == null)
            {
                return NotFound();
            }
            return Ok(product);
        }
        /// <summary>
        /// post 多參數傳參
        /// </summary>
        /// <param name="obj"></param>
        /// <returns></returns>
        [Route("api/Product/para_post_base")]
        [HttpPost]
        public string para_post_base(dynamic obj)
        {
            string id = obj["id"].ToString();
            string name = obj["name"].ToString();
            return "id:" + id + "   name:" + name;
        }

        /// <summary>
        /// post form傳參
        /// </summary>
        /// <param name="p"></param>
        /// <returns></returns>
        [Route("api/Product/para_post_form")]
        [HttpPost]
        public string para_post_form(Product p)
        {
            return "p.Name:" + p.Name + "   p.Price:" + p.Price;
        }

        /// <summary>
        /// post base+form傳參
        /// </summary>
        /// <param name="p"></param>
        /// <returns></returns>
        [Route("api/Product/para_post_baseform")]
        [HttpPost]
        public string para_post_baseform(dynamic obj)
        {
            var parapost = Convert.ToString(obj.parapost);
            Product p = Newtonsoft.Json.JsonConvert.DeserializeObject<Product>(Convert.ToString(obj.formdata));
            return "parapost:"+parapost+ "  p.Name:" + p.Name + "   p.Price:" + p.Price;
        }

        /// <summary>
        /// post 數組參數
        /// </summary>
        /// <param name="ids"></param>
        /// <returns></returns>
        [Route("api/Product/post_array")]
        [HttpPost]
        public string post_array(string[] ids)
        {
            string result = "";
            for (int i = 0; i < ids.Length; i++) {
                result += "  :" + ids[i];
            }
            return result;
        }

        /// <summary>
        /// post 實體數組參數
        /// </summary>
        /// <param name="ids"></param>
        /// <returns></returns>
        [Route("api/Product/post_ojblist")]
        [HttpPost]
        public string post_ojblist(List<Product> plist)
        {
            string result = "";
            for (int i = 0; i < plist.Count; i++)
            {
                result +="    <br/>||"+i+ ":name:" + plist[i].Name+"  price:"+plist[i].Price;
            }
            return result;
        }
    }
}

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

namespace wxweb.Areas.API.Models
{
    public class Product
    {
        public int Id { get; set; }
        public string Name { get; set; }
        public string Category { get; set; }
        public decimal Price { get; set; }
    }
}

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Product App</title>
</head>
<body>

    <div>
        <h2>All Products  from get Method</h2>
        <ul id="products" />
    </div>
    <div>
        <h2>Search by ID from get Method</h2>
        <input type="text" id="prodId" size="5" />
        <input type="button" value="Search" onclick="find();" />
        <p id="product" />
    </div>

    <div style="border-top:1px solid #ccc;">
        <h2>All Products  from post Method</h2>
        <ul id="products_post" />
    </div>
    <div>
        <h2>Search by ID from post Method</h2>
        <input type="text" id="prodId_post" size="5" />
        <input type="button" value="Search" onclick="findpost();" />
        <p id="product_post" />
    </div>

    <div style="border-top:2px solid #ccc;">
        <h3>多參數傳參</h3>
        id:<input type="text" id="get_id" name="=get_id" /><br />
        name:<input type="text" id="get_name" name="=get_name" /><br />
        <input type="button" value="get傳參" onclick="para_get_base()" /><br />
        <span>get方式api調用結果</span> <span id="get_result"></span><br />
        <input type="button" value="post傳參" onclick="para_post_base()" /><br />
        <span>post方式api調用結果</span><span id="get_result_post"></span><br />
    </div>

    <div style="border-top:2px solid #ccc;">
        <h3>實體傳參</h3>
        <form id="form1">
            base:<input type="text" id="parapost"><br />
            Id:<input type="text" id="Id" name="Id" /><br />
            Name:<input type="text" id="Name" name="Name" /><br />
            Category:<input type="text" id="Category" name="Category" /><br />
            Price:<input type="number" id="Price" name="Price" /><br />
        </form>

        <input type="button" value="get form傳參" onclick="para_get_form()" /><br />
        <span>get方式api調用結果</span> <span id="get_result_form"></span><br />
        <input type="button" value="post form傳參" onclick="para_post_form()" /><br />
        <span>post方式api調用結果</span> <span id="get_result_form_post"></span><br />
        <input type="button" value="post base+form傳參" onclick="para_post_baseform()" /><br />
        <span>post base+form方式api調用結果</span> <span id="get_result_baseform_post"></span><br />
    </div>

    <div style="border-top:2px solid #ccc;">
        <h3>數組傳參</h3>

        <input type="button" value="post數組傳參" onclick="post_array()" /><br />
        <span>post方式api調用結果</span><span id="post_array"></span><br />
    </div>

    <div style="border-top:2px solid #ccc;">
        <h3>實體集合</h3>

        <input type="button" value="post實體集合" onclick="post_ojblist()" /><br />
        <span>post方式api調用結果</span><span id="post_ojblist"></span><br />
    </div>


    <div style="margin-bottom:100px;"></div>
    <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.0.3.min.js"></script>
    <script src="../Scripts/jquery.serializeObject.js"></script>
    <script type="text/javascript">


        $(document).ready(function () {

            var uri = '/api/Product';
            var para = '';
            //get方式獲取
            $.get(uri, para,
                function (data) {
                    $.each(data, function (key, item) {
                        $('<li>', { text: formatItem(item) }).appendTo($('#products'));
                    });
                })
            var uripost = '/api/Product/GetProducts';
            //post方式獲取
            $.post(uripost, para,
                function (data) {
                    $.each(data, function (key, item) {
                        $('<li>', { text: formatItem(item) }).appendTo($('#products_post'));
                    });
                })

        });

        function formatItem(item) {
            return item.Name + ': $' + item.Price;
        }
        //使用get方式 單參數查詢
        function find() {
            var uri = '/api/Product/GetProductById';
            var id = $('#prodId').val();
            var para = { 'id': id };
            //var uri = '';
            $.get(uri, para,
                function (data) {
                    $('#product').text(formatItem(data));
                })
        }
        //使用post方式 單參數查詢
        function findpost() {
            var uri = '/api/Product/GetProduct';
            var id = $('#prodId_post').val();
            var para = { '': id };//注意傳遞參數的參數名稱，填''
            //var uri = '';
            $.post(uri, para,
                function (data) {
                    $('#product_post').text(formatItem(data));
                })
        }


        //get方式多參數傳參
        function para_get_base() {
            var uri = '/api/Product';
            var id = $('#get_id').val();
            var name = $('#get_name').val();
            var para = { id: id, name: name };
            $.ajax({
                url: uri,
                type: 'get',
                async: true,
                data: para,
                dataType: 'text',
                success: function (r) {
                    $('#get_result').html(r);
                }, error: function (r) {
                    console.log(r);
                }
            });
        }

        //post方式多參數傳參
        function para_post_base() {
            var uri = '/api/Product/para_post_base';
            var id = $('#get_id').val();
            var name = $('#get_name').val();
            var para = { id: id, name: name };
            para = JSON.stringify(para);//js對象轉化為字符傳遞
            $.ajax({
                url: uri,
                type: 'post',
                async: true,
                data: para,
                dataType: 'text',
                contentType: "application/json",
                success: function (r) {
                    $('#get_result_post').html(r);
                }, error: function (r) {
                    console.log(r);
                }
            });
        }

        //get方式傳遞form參數
        function para_get_form() {
            var uri = '/api/Product/para_get_form';

            //參數方式1，借助serializeObject 將form序列化為json對象
            var para = $('#form1').serializeObject();
            //參數方式2，依次寫出每一個參數值
            var para2 = { Id: $('#Id').val(), Name: $('#Name').val(), Category: $('#Category').val(), Price: $('#Price').val() };//參數方式2，
            $.ajax({
                url: uri,
                type: 'get',
                async: true,
                data: para,
                contentType: "application/json",
                dataType: 'text',
                success: function (r) {
                    $('#get_result_form').html(r);
                }, error: function (r) {
                    alert(r);
                }
            });
        }

        //post方式傳遞form參數
        function para_post_form() {
            var uri = '/api/Product/para_post_form';

            //參數方式1，借助serializeObject 將form序列化為json對象
            var para = $('#form1').serializeObject();
            //參數方式2，依次寫出每一個參數值
            var para2 = { Id: $('#Id').val(), Name: $('#Name').val(), Category: $('#Category').val(), Price: $('#Price').val() };//參數方式2，
            $.ajax({
                url: uri,
                type: 'post',
                async: true,
                data: para,
                dataType: 'text',
                success: function (r) {
                    $('#get_result_form_post').html(r);
                }, error: function (r) {
                    alert(r);
                }
            });
        }

        //post方式傳遞form參數
        function para_post_baseform() {
            var uri = '/api/Product/para_post_baseform';

            //參數方式1，借助serializeObject 將form序列化為json對象
            var formdata = $('#form1').serializeObject();
            var para = JSON.stringify({ parapost: $('#parapost').val(), formdata: formdata })

            $.ajax({
                url: uri,
                type: 'post',
                async: true,
                data: para,
                dataType: 'text',
                contentType: "application/json",
                success: function (r) {
                    $('#get_result_baseform_post').html(r);
                }, error: function (r) {
                    alert(r);
                }
            });
        }


        function post_array() {
            var arr = ["1", "2", "3", "4"];
            var para = JSON.stringify(arr);
            var uri = '/api/Product/post_array';
            $.ajax({
                type: "post",
                url: uri,
                contentType: 'application/json',
                data: para,
                dataType: 'text',
                success: function (data) {
                    $('#post_array').html(data);
                },
                error: function (data) {
                    console.log(data);
                }

            });
        }

        function post_ojblist() {
            var arr = [
                { Id: 1, Name: "Jim", Category: "001", Price:10 },
                { Id: 2, Name: "jack", Category: "002", Price: 20 },
                { Id: 3, Name: "tom", Category: "003", Price: 30 }
            ];
            var para = JSON.stringify(arr);
            var uri = '/api/Product/post_ojblist';
            $.ajax({
                type: "post",
                url: uri,
                contentType: 'application/json',
                data: para,
                dataType: 'text',
                success: function (data, status) {
                    if (status) {
                        $('#post_ojblist').html(data);
                    } else {
                        console.log(data);
                    }
                }, error: function (data) {
                    console.log(data);
                }

            });
        }
    </script>
</body>
</html>

//
// Use internal $.serializeArray to get list of form elements which is
// consistent with $.serialize
//
// From version 2.0.0, $.serializeObject will stop converting [name] values
// to camelCase format. This is *consistent* with other serialize methods:
//
//   - $.serialize
//   - $.serializeArray
//
// If you require camel casing, you can either download version 1.0.4 or map
// them yourself.
//

(function($){
    $.fn.serializeObject = function () {
        "use strict";

        var result = {};
        var extend = function (i, element) {
            var node = result[element.name];

    // If node with same name exists already, need to convert it to an array as it
    // is a multi-value field (i.e., checkboxes)

            if ('undefined' !== typeof node && node !== null) {
                if ($.isArray(node)) {
                    node.push(element.value);
                } else {
                    result[element.name] = [node, element.value];
                }
            } else {
                result[element.name] = element.value;
            }
        };

        $.each(this.serializeArray(), extend);
        return result;
    };
})(jQuery);

 

2. get 請求

    1>：實體作為參數調用時，前台的實體參數無法直接傳遞到后台，需在webapi中對實體參數加上[FromUri]特性說明。

這是因為通過get方式傳遞的參數都是通過Request URL傳遞到后台的，則FromUri 給api說明 參數是從Request URL中獲取到的。

如下：

 /// <summary>
        /// get form傳參
        /// </summary>
        /// <param name="p"></param>
        /// <returns></returns>
        [Route("api/Product/para_get_form")]
        [HttpGet]
        public string para_get_form([FromUri]Product p)
        {
            return "p.Name:" + p.Name + "   p.Price:" + p.Price;
        }

 //get方式傳遞form參數
        function para_get_form() {
            var uri = '/api/Product/para_get_form';

            //參數方式1，借助serializeObject 將form序列化為json對象
            var para = $('#form1').serializeObject();
            //參數方式2，依次寫出每一個參數值
            var para2 = { Id: $('#Id').val(), Name: $('#Name').val(), Category: $('#Category').val(), Price: $('#Price').val() };//參數方式2，
            $.ajax({
                url: uri,
                type: 'get',
                async: true,
                data: para,
                contentType: "application/json",
                dataType: 'text',
                success: function (r) {
                    $('#get_result_form').html(r);
                }, error: function (r) {
                    alert(r);
                }
            });
        }

　　2> 如果不想通過[FromUri]特性說明的方式進行傳遞實體，也可以使用把實體先序列化在反序列化的方式傳遞。

$.ajax({
        type: "get",
        url: "http://localhost:27221/api/Charging/GetByModel",
        contentType: "application/json",
        data: { strQuery: JSON.stringify({ ID: "1", NAME: "Jim", CREATETIME: "1988-09-11" }) },
        success: function (data, status) {
            if (status == "success") {
                $("#div_test").html(data);
            }
        }
    });


 [HttpGet]
        public string GetByModel(string strQuery)
        {
            TB_CHARGING oData = Newtonsoft.Json.JsonConvert.DeserializeObject<TB_CHARGING>(strQuery);
            return "ChargingData" + oData.ID;
        }

get 方式總結

 (1)Get參數傳遞的本質是url字符串拼接；

 (2)url字符串長度受限制；

 (3)Get參數傳遞在Http請求頭部傳遞，而不支持Request-Body傳遞；

 (4)Get類型的方法支持參數為基本類型，不支持實體類型；

 (5)Get類型的方法命名，應盡量采用“Get+方法名”的命名方式，且習慣性地在方法前加上[HttpGet特性]；

 (6)實參與形參的匹配，遵循路由規則；

 (7)Get對應DB的Select操作，從這一點來理解，就知道為什么Http不支持實體對象傳遞的合理性了，因為一般情況，我們都是通過簡單的字段查詢信息(對應基本類型)，

如ID號，用戶名等，而不會通過一個實體查詢數據；

3 post 請求

　　1> post 單參數請求

　　我們一般的通過url取參數的機制是鍵值對，即某一個key等於某一個value，而這里的FromBody和我們一般通過url取參數的機制則不同，它的機制是=value，沒有key的概念，並且如果你寫了key(比如你的ajax參數寫的{id:"1"})，后台反而得到的id等於null。

//使用post方式 單參數查詢
        function findpost() {
            var uri = '/api/Product/GetProduct';
            var id = $('#prodId_post').val();
            var para = { '': id };//注意傳遞參數的參數名稱，填''
            //var uri = '';
            $.post(uri, para,
                function (data) {
                    $('#product_post').text(formatItem(data));
                })
        }



/// <summary>
        /// post 單個參數傳參
        /// </summary>
        /// <param name="id"></param>
        /// <returns></returns>
        [Route("api/Product/GetProduct")]
        [HttpPost]
        public IHttpActionResult GetProduct([FromBody]string id)
        {
            var product = products_post.FirstOrDefault((p) => p.Id ==Convert.ToInt32( id));
            if (product == null)
            {
                return NotFound();
            }
            return Ok(product);
        }

　　2> 多參數請求

post方式是不支持多參數方式請求的，為了傳遞多參數我們可以采用其他的方式。

比如，在后台建立對象實體，然后將整個實體作為對象傳遞，

 //post方式傳遞form參數
        function para_post_form() {
            var uri = '/api/Product/para_post_form';

            //參數方式1，借助serializeObject 將form序列化為json對象
            var para = $('#form1').serializeObject();
            //參數方式2，依次寫出每一個參數值
            var para2 = { Id: $('#Id').val(), Name: $('#Name').val(), Category: $('#Category').val(), Price: $('#Price').val() };//參數方式2，
            $.ajax({
                url: uri,
                type: 'post',
                async: true,
                data: para,
                dataType: 'text',
                success: function (r) {
                    $('#get_result_form_post').html(r);
                }, error: function (r) {
                    alert(r);
                }
            });
        }



  /// <summary>
        /// post form傳參
        /// </summary>
        /// <param name="p"></param>
        /// <returns></returns>
        [Route("api/Product/para_post_form")]
        [HttpPost]
        public string para_post_form(Product p)
        {
            return "p.Name:" + p.Name + "   p.Price:" + p.Price;
        }

　　html頁面中如果使用form序列化的方式，可以調用serializeObject.js的方法得到json對象。

比如，使用dynamic參數，動態的獲取所需要的參數。

 //post方式多參數傳參
        function para_post_base() {
            var uri = '/api/Product/para_post_base';
            var id = $('#get_id').val();
            var name = $('#get_name').val();
            var para = { id: id, name: name };
            para = JSON.stringify(para);//js對象轉化為字符傳遞
            $.ajax({
                url: uri,
                type: 'post',
                async: true,
                data: para,
                dataType: 'text',
                contentType: "application/json",
                success: function (r) {
                    $('#get_result_post').html(r);
                }, error: function (r) {
                    console.log(r);
                }
            });
        }


 /// <summary>
        /// post 多參數傳參
        /// </summary>
        /// <param name="obj"></param>
        /// <returns></returns>
        [Route("api/Product/para_post_base")]
        [HttpPost]
        public string para_post_base(dynamic obj)
        {
            string id = obj["id"].ToString();
            string name = obj["name"].ToString();
            return "id:" + id + "   name:" + name;
        }

post 方式總結

(1)Post參數傳遞本身是在Request-Body內傳遞，而Get參數傳遞本質是url拼接；

(2)Post參數傳遞不是key/value形式，而Get參數是key/value形式；

(3)Post傳遞參數時，無論是單個參數還是對象，均借助[FromBody]特性(當然，某些情況去掉[FromBody]特性也可把值傳遞進去，但為了規范化，盡量加上該特性)；

(4)Post沒長度限制，而Get有長度限制(一般為1024b);

(5)Post相對Get，較安全；

(6)Post操作相當於DB的Insert操作；

 

4 總結

1.雖然HTTP請求方法有20多種，常用的大致為4種，即Get，Post，Put，Delete（當然，像Trace，Head等也常用）；

2.Get，Post，Put，Delete分別對應DB的Select,Insert，Update和Delete操作；

3.WebApi參數類型，大致分為基本數據類類型和對象數據類型(當然你也可以理解為抽象數據類型)；

4.研究WebApi參數傳遞，只需研究Get和Post即可，因為其他http方法參數傳遞基本都是有這兩種組合而成(如Put有Get和Post組合而成)，或者相似（如Delete與Get相似)；

5.對於控制器方法，盡量參照規范格式寫，如在相應控制器方法上加上對應的htt請求(Get對應[HttpGet]，Post對應[HttpPost])，方法名盡量采用“Http請類型+方法名”格式(如Get請求，建議采用Get+MethodName；Post請求對應Post+MethodName);

6.WebApi參數請求，大致分為兩大類型，即Request-url和Request-body;

 

引用：

https://www.cnblogs.com/landeanfen/p/5337072.html#_label3

http://www.cnblogs.com/wangjiming/p/8378108.html