ASP.NET 實務入門 - 檢視 View 與 Razor 1/3

檢視檔案是副檔名為.cshtml的純文字檔,以HTML網頁為基礎架構,嵌入以 @ 字元開始的Razor語法,撰寫 C# 程式碼,動態建立網頁內容,最後產生結合HTML標籤的前端網頁,回應至瀏覽器進行解譯呈現使用者要求的網頁。

現在重新開啟在「ASP.NET 實務入門 - 建立檢視頁面」的檢視檔案HelloPage.cshtml,其中第一段@ 字元標示並利用大括弧界定其範圍即為Razor 內容:


大括弧中的 Layout = null 表示這個檢視檔案最後不會套用共同版型(版型議題於後續進行討論)。

Razor 基本上就是允許你在 HTML 網頁撰寫C#程式碼,這些程式碼會檢視送出之前執行完畢,合併其它的HTML內容形成新的網頁,透過 Razor 我們因此可以在後端動態產生想要的內容。

Razor 以符號 @ 字元開始作標示與 HTML 網頁內容作區別,有單行與多行的區塊格式,單行 Razor 輸出特定的內容,多行則支援程式邏輯的撰寫。

單行 Razor

如果要在網頁輸出某些特定的內容,例如想要在網頁上顯示此網頁被送出時的伺服器時間,則撰寫單行Rzor,回到 HelloPage.cshtml ,於其中撰寫一行以 @ 開始的Razor語法程式碼:



這是標準的C# 程式碼,其中引用 DateTime 類別的 Now 屬性,取得當下網頁送出時的伺服器時間,先來看執行結果:


這在網頁上呈現出時間,切換至這個網頁的原始碼如右截圖,可以看到檢視檔案中 Razor取得伺服器時間轉換成對應的長時間字串,整合進網頁中目前的位置,在原來的位置輸出成時間字串。

如你所見,單行 Razor 在 @ 後方運算式執行完畢輸出字串結果,於原來的位置轉換成使用者看到的內容。在網頁設計上,我們利用 Razor在網頁上動態產生區塊內容,結合靜態的HTML,建構最後送到瀏覽器的網頁內容。

div 標籤是靜態的 HTML 內容,Razor 敘述轉換出來的時間字串包在設定樣式屬性的 div 元素,因此字型顏色與大小均格式化輸出,得到我們現在看到的網頁輸出結果。

單行的程式碼如果執行之後會輸出某個特定的結果,就能夠以單行Razor進行配置,以下是另外一個例子:

<body>
    <div style="font-size:3em;color:royalblue; ">      
        @Math.PI
    </div>
</body>

這一行透過 Math 類別 PI 屬性取得圓周率輸出於網頁,輸出畫面如下:


要特別注意單行 Razor 語法是一段輸出特定結果的運算,不需要分號作結束,運算式之後的內容,都會被當作網頁的靜態內容直接輸出。嘗試著緊接運算式後方加上一個分號:

<body>
    <div style="font-size:3em;color:royalblue; ">      
        @Math.PI;
    </div>
</body>

來看輸出結果:


這一次 PI 數值的後方顯示了分號,你可以自行嘗試加入其它的內容來測試輸出結果。

多行 Razor

如果要撰寫邏輯程式碼來動態產生網頁的內容,則需採用多行 Razor,一般以大括弧界定其內容:

<body>
    <div style="font-size:3em;color:royalblue; ">
        @{
            string msg = "Hello";
            var hour = DateTime.Now.Hour ;
            if (hour > 4 && hour < 11)
            {
                msg += ", 早安妳好 !";
            }
            else
            {
                msg += ", 日安妳好 !";
            }
        }
        @msg
    </div>
</body>

這是一段典型的多行 Razor,大括弧的區塊範圍中配置C#程式碼 以建構動態內容,先取得目前時間的小時數,然後透過 if 判斷式決定建立的訊息字串。

最後利用單行 Razor 進一步輸出 msg 的字串內容。

載入網頁根據當下的時間,輸出訊息字串,如果是早上四點到十一點之間執行,則輸出「Hello, 早安妳好 !」訊息,反之則是「Hello, 日安妳好 !」。

從上述的實作,你可以發現,相較於單行 Razor,多行 Razor 程式區塊執行一段邏輯運算,最後並沒有特別的輸出。


沒有留言: