前端傳遞給后端復雜類型 webapi 等

來自URL：https://www.cnblogs.com/kylewell/p/5674564.html

 

前端我需要通過ajax 傳遞如下的一個json對象：

var model = {
                Parameters: [
                    { Name: "A", Value: 1 },
                    { Name: "B", Value: 2 }
                ]
            };                      

所以我的ajax提交代碼如下：

$("#btnGetModel").click(function () {
            //var model = getParamenters();
            var model = {
                Parameters: [
                    { Name: "A", Value: 1 },
                    { Name: "B", Value: 2 }
                ]
            };
            if (model.Parameters.length > 0) {
                $.ajax({
                    url: baseUri + "api/Model/Show",
                    type: "post",
                    dataType: "json",
                    data: model,
                    beforeSend: function (request) {
                        request.setRequestHeader('Authorization', 'Bearer ' + getCookie("token"));
                    }
                }).then(
                    function (d) {
                        if (d.StatusCode == 0) {
                            //SetModel(d.Message);
                            initModel(d.Message);
                        } else {
                            showMsg(d.Message,"msgContainer");
                        }
                    }, function () {
                        showMsg("請求失敗", "msgContainer");
                    }
                );
            } else {
                showMsg("沒有設定正確的參數！", "msgContainer");
            }
        });

這里注意一下傳遞的json對象名稱為model。

然后看一下后端接口：api/Model/Show。不用看具體實現代碼，而要注意傳遞的參數的類型和參數的名稱。

[HttpPost]
        [ActionName("Show")]
        [Authorize]
        public async Task<IHttpActionResult> Generate([FromBody]ModelInfo model)
        {
            Dictionary<string, double> pars = new Dictionary<string, double>();
            if (model.Parameters.Count > 0)
            {
                foreach (Parameter par in model.Parameters)
                {
                    pars.Add(par.Name, par.Value);
                }
            }
            string newFilePath = await modelMaker.Generate(pars);
            if (!string.IsNullOrEmpty(newFilePath))
            {
                return Json(new ResultData { StatusCode = 0, Message = newFilePath });
            }
            else
            {
                return Json(new ResultData { StatusCode = 1, Message = "模型生成失敗！" });
            }
        }

可以看到，傳遞的參數名稱也是model,其實這里是和json對象的名稱是一致的。

接着，繼續看ModelInfo這個類型

public class ModelInfo
    {
        public List<Parameter> Parameters { get; set; }
    }

這個類里面有個Parameter類型集合的屬性，而這個屬性的名稱是Parameters，而這又是跟json對象的Parameters屬性對應。簡單來說，這個屬性就是一個集合，里面又包含了對象。

下面接着看Parameter這個對象：

public class Parameter
    {
        public string Name { get; set; }
        public double Value { get; set; }
    }

這個對象里面的屬性名稱又和json對象數組中的對象的屬性名稱又對應上了。

這樣前端的json類型就能准確傳遞到后端來了。

 

 

總結：前端不管是多復雜的json數據類型，只要在后端按照這個json數據結構來組合類，並將屬性名稱一一對應上，就能准確將前端數據傳遞到后台上。