webapi 參數傳遞詳解

緣由

常常有朋友遇到webapi參數傳遞問題，本身也碰到過一些坑，在此記錄下正確的姿式，簡單參數傳遞相信沒有人會有問題，容易出現問題的是對象參數和表單參數。

一、WebApi5.2.3有FromBody和無FromBody

 控制器代碼以下：

 public class ValuesController : ApiController
    {
        // POST api/values
        [HttpPost]
        [Route("~/api/Values/Post")]
        public UserModel Post(UserModel value)
        {
            return value;
        }
        [HttpPost]
        [Route("~/api/Values/Put")]
        // PUT api/values/5
        public UserModel Put([FromBody]UserModel value)
        {
            return value;
        }
    }

    public class UserModel
    {
        public string UserName { get; set; }

        public string Password { get; set; }
    }

 

對應的JS請求代碼以下，對於有FromBody的Put請求來講，兩種請求方式都是能夠的：

<script type="text/javascript">

        $(function () {

            $('#btnPost').click(function () {
                $.ajax({
                    url: '/api/Values/Post',
                    data: {
                        UserName: 'Admin',
                        Password: '123456'
                    },
                    method: 'POST',
                    dataType: 'json'
                }).done(function (result) {
                    $('#txtPost').val(JSON.stringify(result));
                })
            })
            $('#btnPostFromBody').click(function () {

                $.ajax({
                    url: '/api/Values/Put',
                    data: {
                        UserName: 'Admin',
                        Password: '123456'
                    },
                    method: 'POST',
                    dataType: 'json'
                }).done(function (result) {
                    $('#txtPostFromBody').val(JSON.stringify(result));
                    })

                $.ajax({
                    url: '/api/Values/Put',
                    data: JSON.stringify({
                        UserName: 'Admin',
                        Password: '123456'
                    }),
                    method: 'POST',
                    dataType: 'json',
                    contentType: 'application/json'
                }).done(function (result) {
                    $('#txtPostFromBody').val(JSON.stringify(result));
                })
            })

        })

 

有圖有真相

 

二、Asp .Net Core 有FromBody和無FromBody

服務端代碼以下：

public class ValuesController : Controller
    {
        // POST api/values
        [HttpPost]
        [Route("~/api/Values/Post")]
        public UserModel Post(UserModel value)
        {
            return value;
        }
        [HttpPost]
        [Route("~/api/Values/Put")]
        // PUT api/values/5
        public UserModel Put([FromBody]UserModel value)
        {
            return value;
        }
    }

    public class UserModel
    {
        public string UserName { get; set; }

        public string Password { get; set; }
    }

js請求代碼有所不一樣，FromBody再也不提供兼容支持 只能採用application/json方式提交：

 $('#btnPost').click(function () {
                $.ajax({
                    url: '/api/Values/Post',
                    data: {
                        UserName: 'Admin',
                        Password: '123456'
                    },
                    method: 'POST',
                    dataType: 'json'
                }).done(function (result) {
                    $('#txtPost').val(JSON.stringify(result));
                })

            })
            $('#btnPostFromBody').click(function () {

                $.ajax({
                    url: '/api/Values/Put',
                    data: JSON.stringify({
                        UserName: 'Admin',
                        Password: '123456'
                    }),
                    method: 'POST',
                    dataType: 'json',
                    contentType: 'application/json'
                }).done(function (result) {
                    $('#txtPostFromBody').val(JSON.stringify(result));
                })

            })

調用結果：

 

三、Asp .Net Core 之From表單

有時候不免有上傳文件的需求，對象存儲這個嘛有的時候客戶不肯意多花錢或者把文件存到別人的服務器上，只能本身存了。爲了少點垃圾文件仍是和表單一塊兒提交吧。

 控制器代碼：

 

js請求代碼,注意紅字：

   $('#btnFromForm').click(function () {
                var data = new FormData();
                data.append('UserName', 'Admin');
                data.append('Password', '123456');
                data.append('Photo', document.getElementById('txtPhoto').files[0]);
                $.ajax({
                    url: '/api/Values/RegisterUser',
                    data: data,
                    method: 'POST',
                    dataType: 'json',
                    contentType: false,
                    processData: false
                }).done(function (result) {
                    $('#txtFromForm').val(JSON.stringify(result));
                })
            })

 

請求結果：

 

最後說一句：接口的參數若是是對象，參數名必定不能與改對象的屬性名相同(不區分大小寫)，不然屬性的值會所有爲null,我猜是微軟認爲有循環依賴了。好比以上例子中，UserModel中含有UserName,Password,Photo屬性，則接口中UserModel參數的名字必定不能是UserName,Password,Photo（不區分大小寫），曾經被這個問題坑了2天。