Day18 - 輕前端Vue | vue ajax mvc
先說明一下我用輕前端Vue的目的,不是把整個網站都改用輕前端,而是為了把複雜的js取值、給值的邏輯交由VueModelBinding的機制處理,進而省下語法!在Vue這個部份來說,我還在學習中,所以文章內容不會提到該怎麼寫Vue,但我會使用CompositionAPI另外,debug時,記得持續開啟chromeDevTools,看看console是否會報錯!Case01Controller[1]內的GetAction:PostAction:只要是ajax所指定的Action,該Action的Route都會改為api開頭ajaxAction的部份,因為需要改成json格式,所以從原本的FromForm改成FromBody[HttpPost,Route("api/[controll...
先說明一下
我用輕前端 Vue 的目的,不是把整個網站都改用輕前端,而是為了把複雜的 js 取值、給值的邏輯交由 Vue Model Binding 的機制處理,進而省下語法 !
在 Vue 這個部份來說,我還在學習中,所以文章內容不會提到該怎麼寫 Vue,但我會使用 Composition API
另外,debug 時,記得持續開啟 chrome DevTools,看看 console 是否會報錯 !
Case01Controller[1] 內的
Get Action :
Post Action :
只要是 ajax 所指定的 Action,該 Action 的 Route 都會改為 api 開頭
ajax Action 的部份,因為需要改成 json 格式,所以從原本的 FromForm 改成 FromBody
[HttpPost, Route("api/[controller]/[action]")] public IActionResult PostCase01([FromBody]ViewModel vm) { return Ok(vm); }View[2] :
改用輕前端,等於前後端分離,所以前端欄位名稱都要手動給定 !
我會切開 C# 與 js / vue 的 coding style
Razor 的語法的影響限制
只讓 Razor 的語法只套用至 js variable,不會套用至 js function 或 statement 內 ! 拆分 component 的方式,以輕前端角度來看,如果想套用 Single File Component,會造成每個頁面都會有編譯的成本,所以我改用 Razor Partial View 或是引用 js 檔 !因為 Vue 的 Model Binding 是針對 js object,所以 ajax request content type 全部改為 json 格式