TypeScript Vue Plugin (Volar) (This is not required to make the Intellisense work, install it if you are using TypeScript. Thanks to meyegui for the feedback!)
Open the Quasar project and create a new file named quasar.d.ts in the src directory.
If you are working with Quasar CLI with Vite, add the following content into the quasar.d.ts file.
/// <reference types="@quasar/app-vite" />
If you are working with Quasar CLI with Webpack, add the following content into the quasar.d.ts file.
/// <reference types="@quasar/app-webpack" />
Restart VS Code and the Intellisense should work fine.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
ASP.NET MVC 框架將應用程式切割為 Model (模型)、View (檢視)以及 Controller (控制器)三個部分,Model 主要用來作資料的存取和業務邏輯的實作,View 的功能為使用者介面的呈現,Controller 則是用來處理 HTTP 的請求及回應。MVC 的核心精神為「關注點分離」(Separation of Concerns),這樣的架構能幫助我們降低程式碼的耦合,讓我們較不會寫出業務邏輯、使用者介面混在一起的義大利麵程式碼(Spaghetti code)。
ASP.NET MVC 使用 Razor 視圖引擎搭配檢視樣板檔案(.cshtml)來動態產生 HTML 網頁回應,Razor 視圖引擎的功能非常強大,可以在樣板中穿插靜態的 HTML 標籤或文字,以及以 Razor 語法、C# 程式語言,所撰寫的使用者介面相關程式邏輯,利如使用「@if」來作條件式渲染,或是使用「@for」、「@foreach」進行迴圈式渲染…等。
Razor 視圖引擎已經被完全地整合在 ASP.NET MVC 框架之中,一般情況下,我們都是在 Controller 的動作方法中,直接呼叫 View() 輔助方法建立並回傳 ViewResult 實體,就能以 Razor 視圖引擎處理樣板,並動態回應 HTML 結果。在這個過程中,我們並不能夠直接存取到 Razor 視圖引擎所動態組成的 HTML 字串。
但有時候我們會希望能夠取得動態組成的 HTML 字串,來作為其他用途,舉例來說,以 HTML 格式寄送 E-mail 時的信件內文。這個情況下,如果沒有樣板引擎的幫助,我們就必須以串接字串的方法,來組成 HTML。
以下的工具函數 RenderViewToString() 能讓我們傳入 ControllerContext 物件、檢視名稱,以及檢視的資料模型物件後,取得 Razor 視圖引擎處理樣板後的 HTML 字串:
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
可以看得出來,為了結合訂單資料和 HTML 標籤,字串串接的方式讓程式碼略顯複雜,在串接的過程中也很容易出錯,而造成最終產出的 HTML 無法被正確解析。
我們可以改用 RenderViewToString() 工具函數來取得 HTML 字串,首先,在專案的 Views/Shared/ 目錄下,新增一個樣板檔案「_OrderEmailTemplate.cshtml」,並以 @model 指示詞指定檢視的資料模型為自訂的訂單類別「Order」,檔案內容如下:
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
更好的解決方法是,直接使用CSS在表頭繪製對角線,這樣我們就可以動態地改變背景及邊框的顏色。繪製的方法是利用linear-gradient()函數來為表頭建立漸層色背景。這個漸層色應包含4個漸層顏色終止點(linear color stop),只要將中間兩個終止點的位置設為非常靠近,就能模擬出線段的呈現。其中,第1、3個終止點用來設定表頭的背景顏色,第2、4個終止點用來設定對角線的線段顏色。
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters