#筆記 Axios 傳資料至MVC controller

3 min readJul 16, 2020

傳資料傳不過去，顯示null真的讓人覺得很煩躁…

一般要將前端資料傳至後端，最常用的方式就屬Ajax莫屬，但最近再用Vue開發，所以就不使用Jquery所封裝的Ajax，而是利用Vue推薦的Axios來達成，但也常常遇到資料抓不到的困擾，所以就為此紀錄一下。

首先要如何使用呢?

引入CDN後，在前端寫事件撰寫:

axios.post('@Url.Action("PostData")',{"id":123}).then(
res=>console.log(res.data))

參數一是URL，參數二是要傳的參數，基本上參數二裡都必須是物件。

Controller

public ActionResult New_GetApplicants(string id) {return Content("你傳的ID是:"+id);}

這種方式比較適合傳參數不多的時機，如果參數一多，比如10個，就要寫10個，這未免太辛苦且容易出錯，所以可以利用MVC的"複雜模型聯繫"，使用方式:

Step1 相關前置設定

將要傳至後端的資料組成JSON，並右鍵複製。

在MVC 的Model裡，建立相對應的物件class，建立方式就是在Model裡，按選擇性貼上:

Step 2 程式部分

post

let obj=
{
ApplicantID:"123",
Name:"Peter",
TaxID:"12345678",
Address:"新北市"
}
axios.post('@Url.Action("PostData")',obj).then(
res=>console.log(res.data))

get

let obj=
{
params:{
        ApplicantID:"123",
        Name:"Peter",
        TaxID:"12345678",
        Address:"新北市"}
}
axios.get('@Url.Action("PostData")',obj).then(
res=>console.log(res.data))

這裡要注意一下，我遇到後端接不到值，會顯示null的困擾。

在參數2的地方，post，裡面直接放一個物件就可以，不用再外面再包一層，而get 外面需要一個params作為key。
物件的值最好全部轉為文字。
若前端obj(JSON)的值建立的時候是undefined，回傳至後端後回直接將該項刪除(key:value)。(比如在前端定義obj有4項，但有其中一項的值取到的值為undefined，就會傳一個只有3項的物件到後端，因為後端的claa還是4項，無法吻合，所以會null，要注意一下)

Controller

public ActionResult PostData(class1 obj) {return Content("你的名字是"+obj.Name..ToString());}

之後有碰到問題，在上來新增好了。

#筆記 Axios 傳資料至MVC controller

Written by Jia