使用AngularJS向Web API提交多項(xiàng)復(fù)雜參數(shù)的解決方案

前言

使用AngularJS的 $http 組件向 ASP.NET MVC 的 Web API 交互數(shù)據(jù)還是挺方便的肩袍,一般來說,使用$http向后臺(tái) post 一個(gè)數(shù)據(jù)可以像這樣寫:

$http.post(url, product);

對(duì)應(yīng)的后臺(tái):

public IHttpActionResult PostProduct(Product product)
{
    ....
}

API 的后臺(tái)會(huì)自動(dòng)將(對(duì)象)參數(shù)中的值自動(dòng)對(duì)應(yīng)扒腕,供后續(xù)使用。

遇到的問題

不過今天遇到了一個(gè)稍顯復(fù)雜的場景,后臺(tái)需要接收另外一個(gè)參數(shù)吭净,而原有 Product 對(duì)應(yīng)的類又不能修改,怎么辦呢携取?第一時(shí)間想到的是把接口改為這樣:

public IHttpActionResult PostProduct(Product product, Category category)
{
    ....
}

不過很不幸攒钳,這樣不行,接口被調(diào)用的時(shí)候并沒有值傳過來雷滋!
<br />

對(duì)了不撑,補(bǔ)充一點(diǎn),前端相應(yīng)的要這么修改一下:

$http.post(url, { product: product, category: category });

好了晤斩,問題說明白了焕檬,同樣的場景,在 ViewController 中是可以正常的工作的澳泵,也就是接受多個(gè)參數(shù)实愚,而到了 Web API中就不好使了。

嘗試的方案

其實(shí)這樣的問題場景應(yīng)該很常見兔辅,所以Google一下腊敲,Stackoverflow中有很多解決方案,簡單看了一下维苔,不外乎以下幾種:

  • 使用 JSON 序列化
  • 使用 [FromBody]碰辅、[FromUri] 注解 (參考1參考2
  • 其他

不過以上的方案代碼顯得不那么優(yōu)雅介时,甚至有些ugly了没宾,代碼就不貼了,感興趣可以自行搜索沸柔。

問題根源和解決方案

其實(shí)循衰,回過頭來思考一下,這個(gè)問題產(chǎn)生的原因其實(shí)很簡單:

ASP.NET Web API 遵循的是RESTful Web API 設(shè)計(jì)風(fēng)格褐澎,也就是實(shí)現(xiàn)了 CRUD 語義的接口会钝。從設(shè)計(jì)實(shí)現(xiàn)上來說微軟本身就是這么支持和實(shí)現(xiàn)的。

既然如此工三,那我們就從這點(diǎn)上來考慮顽素。
最基本的用法上咽弦,后臺(tái)接口是能接收復(fù)雜對(duì)象的,那么胁出,將多個(gè)參數(shù)放在一個(gè)對(duì)象里就解決了型型,在不修改原有哪些基礎(chǔ)類的前提下,定義一個(gè) Model 類全蝶,把幾個(gè)需要接受的參數(shù)類扔進(jìn)去就完事兒了闹蒜,代碼風(fēng)格也和原來相近,還是熟悉的味道抑淫。

public class Model
{
    public Product product { get; set; }
    public Category category { get; set; }
}

后臺(tái)代碼:

public IHttpActionResult PostProduct(Model model)
{
    ....
}

好了绷落,問題解決,我認(rèn)為這是一種比較科學(xué)的方案始苇,本身也符合 Web API 的常規(guī)使用習(xí)慣砌烁,代碼寫起來也不啰嗦。
最后的疑問催式,在新版的 ASP.NET MVC 中函喉, Web API 貌似和 ViewController 合并了,那么這個(gè)問題是不是就不存在了呢荣月?但愿如此管呵,要不問題就更復(fù)雜了...

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市哺窄,隨后出現(xiàn)的幾起案子捐下,更是在濱河造成了極大的恐慌,老刑警劉巖萌业,帶你破解...
    沈念sama閱讀 211,948評(píng)論 6 492
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件坷襟,死亡現(xiàn)場離奇詭異,居然都是意外死亡生年,警方通過查閱死者的電腦和手機(jī)婴程,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,371評(píng)論 3 385
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來晶框,“玉大人排抬,你說我怎么就攤上這事懂从∈诙危” “怎么了?”我有些...
    開封第一講書人閱讀 157,490評(píng)論 0 348
  • 文/不壞的土叔 我叫張陵番甩,是天一觀的道長侵贵。 經(jīng)常有香客問我,道長缘薛,這世上最難降的妖魔是什么窍育? 我笑而不...
    開封第一講書人閱讀 56,521評(píng)論 1 284
  • 正文 為了忘掉前任卡睦,我火速辦了婚禮,結(jié)果婚禮上漱抓,老公的妹妹穿的比我還像新娘表锻。我一直安慰自己,他們只是感情好乞娄,可當(dāng)我...
    茶點(diǎn)故事閱讀 65,627評(píng)論 6 386
  • 文/花漫 我一把揭開白布瞬逊。 她就那樣靜靜地躺著,像睡著了一般仪或。 火紅的嫁衣襯著肌膚如雪确镊。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 49,842評(píng)論 1 290
  • 那天范删,我揣著相機(jī)與錄音蕾域,去河邊找鬼。 笑死到旦,一個(gè)胖子當(dāng)著我的面吹牛旨巷,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播厢绝,決...
    沈念sama閱讀 38,997評(píng)論 3 408
  • 文/蒼蘭香墨 我猛地睜開眼契沫,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了昔汉?” 一聲冷哼從身側(cè)響起懈万,我...
    開封第一講書人閱讀 37,741評(píng)論 0 268
  • 序言:老撾萬榮一對(duì)情侶失蹤,失蹤者是張志新(化名)和其女友劉穎靶病,沒想到半個(gè)月后会通,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 44,203評(píng)論 1 303
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡娄周,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,534評(píng)論 2 327
  • 正文 我和宋清朗相戀三年涕侈,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片煤辨。...
    茶點(diǎn)故事閱讀 38,673評(píng)論 1 341
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡裳涛,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出众辨,到底是詐尸還是另有隱情端三,我是刑警寧澤,帶...
    沈念sama閱讀 34,339評(píng)論 4 330
  • 正文 年R本政府宣布鹃彻,位于F島的核電站郊闯,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜团赁,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,955評(píng)論 3 313
  • 文/蒙蒙 一育拨、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧欢摄,春花似錦熬丧、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,770評(píng)論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至唆香,卻和暖如春嫌变,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背躬它。 一陣腳步聲響...
    開封第一講書人閱讀 32,000評(píng)論 1 266
  • 我被黑心中介騙來泰國打工腾啥, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人冯吓。 一個(gè)月前我還...
    沈念sama閱讀 46,394評(píng)論 2 360
  • 正文 我出身青樓倘待,卻偏偏與公主長得像,于是被迫代替她去往敵國和親组贺。 傳聞我的和親對(duì)象是個(gè)殘疾皇子凸舵,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 43,562評(píng)論 2 349

推薦閱讀更多精彩內(nèi)容