ASP.NET MVC 使用Bootstrap | vue js asp net mvc crud
詳細步驟說明ASP.NETMVCFramework如何在設計View的時候,加入Vue.js前端框架,同時結合Razor頁面設計的威力以及享用Vue.js所帶來的雙向綁定以及宣告式渲染,讓表單(form)的設計方式更為活潑多元。同時使用了Bootstrap-Vue框架,讓輕前端解決方案中,不容易設計Vue元件的問題有了替代的解決方式。同時本次的說明是以VisualStudio進行說明,有別於使用VisualStudioCode的說明方式,要讓原本熟悉ASP.NETMVC、VisualStudio的開發人員在熟悉的開發環境中加入Vue.js前端框架。說明ASP.NETMVC當中的Razor其實已足以勝任多數的頁面設計工作,...
詳細步驟說明 ASP.NET MVC Framework 如何在設計 View 的時候,加入 Vue.js 前端框架,同時結合 Razor 頁面設計的威力以及享用 Vue.js 所帶來的雙向綁定以及宣告式渲染,讓表單 (form) 的設計方式更為活潑多元。
同時使用了 Bootstrap-Vue 框架,讓輕前端解決方案中,不容易設計 Vue 元件的問題有了替代的解決方式。同時本次的說明是以 Visual Studio 進行說明,有別於使用 Visual Studio Code 的說明方式,要讓原本熟悉 ASP.NET MVC、Visual Studio 的開發人員在熟悉的開發環境中加入 Vue.js 前端框架。
說明ASP.NET MVC 當中的 Razor 其實已足以勝任多數的頁面設計工作,同時用法也相當直覺,如同古早的 ASP、PHP 直接在整個動態產生出所需的 HTML,並組合為整個網頁。同時搭配 jQuery 使用 DOM 的方式對於網頁元素進行操作,對於事件的處理也。此外 MVC 也有提供了 Unobtrusive Ajax Helper,能夠直接與後端的 Controller 合作,使用 Ajax 非同步地更新網頁中部份元件,語法簡便、使用容易,讓網頁不需要重新整理就能夠更新顯示內容,提升使用者的體驗。
而儘管 ASP.NET MVC 相當美好,隨著應用系統的逐漸複雜,對於前端處理的期待越來越多,藉由前端框架所提供的雙向綁定、宣告式渲染功能,能夠讓前端的互動更為豐富、多元,然而在缺乏專職前端工程的團隊中,要大動作的將專案拆分為前端、後端並不容易,取而代之的是讓開發人員能夠輕量的使用前端框架,讓 JS Script 隨著系統複雜不易維護的問題有了緩解,同時也是為團隊儲備前端的開發能量,日後有新專案的時候再嘗試分離前、後端。
開發步驟建立 ASP.NET MVC 專案建立專案的步驟一如以往,請參考圖片。
完成後首先將專案加入原始檔控制,方案版本控制日後開發過程的變化。
新增頁面為簡化設計的過程,由 Controller 加入一個新的 Action 並回...