Razor 初探

ASP.NET Core Web 應用開發–使用 MVC 框架 / PART I MVC 入門 / MVC - View 的部份 / Razor 初探

檢視檔案透過 Razor 語法動態建構動態部份的 HTML 內容,檢視檔案亦稱為 Razor 檢視,這在前述建立新的檢視檔案的過程中,可以在如下的對話方塊中看到相關的名稱:

理解 Razor 語法是設計檢視檔案的首要課題,本質上 Razor 是整合 HTML 與 C# 以動態創造網頁內容所需的語法格式,本身並非新的程式語言,只需理解撰寫規則即可順利的將其運用在檢視檔案的設計上。

檢視檔案是以HTML結構為基礎,本質上即是網頁,只是以 Razor支援程式化嵌入動態內容,而界定 Razor 的部份從 @ 開始,有兩種型式,第一種已經在前面的範例的展示過,提供一整段的邏輯程式碼產生動態內容,第二種則是單行 C# 程式碼,結果將直接嵌入HTML中 Razor 配置的位置,以下建立另外一個檢視檔案 RazorDemo.cshtml 進行說明。

其中有兩段Razor 語法,第一段是單行 Razor ,以 @ 標示嵌入 <p> 並以粗體標籤 <b> 標示,這一行 C# 程式碼取得檢視檔案執行當下的伺服器時間,並輸出輸出當天的名稱。

第二段 Razor 則是一組 if 判斷式,如果取得的當下伺服器時間表示的星期六或是星期日,顯示「CLOSED」的圖片,其它五天則顯示「OPEN」的圖片。

      

這個範例同時展示了單行與多行的 Razor 效果,原則上若需要存取的是伺服器資源,便可以透過 Razor 實作,如果只是要取出某個值並作呈現,配置單行 Razor 即可,若是要經過運算產生,例如判斷式或是迴圈,則將要撰寫的段落程式碼,配置於大括弧中,而其中可以根據需求嵌入 HTML 內容。

要特別注意區分單行與多行段落式的 Razor ,前者執行完畢會是一個結果值,並顯示在 @ 標示的位置上。

實務上經常會需要在段落Razor中取得某個結果值並儲存於變數中,需要利用特定標籤呈現的狀況下,會需要再嵌入單行 Razor,此時只需直接以 @ 標示即可,以下調整另外一個版本:

在 Razor 段落中,預先宣告三個字串變數,經過 if 判斷式設定變數的值,然後依序以 @ 非示,輸出變數值於指定的標籤位置。

               

從以上的載圖可以看出不同日期顯示的效果,每一個以 @ 標示的變數,直接輸出於指定的位置,請注意圖片的 src 屬性 <img src="/images/@bimg" /> 其中的 @bimg 亦是直接輸出其表示的變數值,從這裏可以非常清楚的理解單行 Razor 的特性,以 @ 標示的變數事實上直接視為其表示的常值,而單行 Razor 最終轉換成為對應的字串輸出,使用者直接當作預期的結果字串配置即可。

Razor 建立檢視內容的編寫規則,允許透過 C# 程式設計動態決定某個區塊產出的HTML內容,這是對 Razor 必須有的基本理解,開發人員可以根據自己的需求,撰寫需要的 C# 程式,因此具備C# 程式設計能力者只要瞭解上述的 Razor規則就能夠上手。


沒有留言: