這一篇延續「檢視與 Razor」 最後的範例中,在多行 Razor 區塊中僅包含邏輯運算程式碼,若是要輸出任何內容,則必須配置HTML標籤、使用單行Razor 或是兩者混合實作,以下是原來的程式碼:
現在於其中配置 HTML 標籤,將其調整如下:
直接將要輸出的內容以 HTML 標籤嵌入,根據判斷式的結果,呈現 if 或是 else 區塊中的標籤元素內容,要注意這 HTML 元素配置會有彈性的問題,如果想要輸出動態內容,將單行 Razor 嵌入於多行區塊中即可,再次改寫內容如下:
這一次代入 @msg 於其中,效果與上述配置靜態HTML元素相同,不過 Razor 是動態程式碼,因此可以支援動態輸出。
單行Razor 運算式的輸出問題
使用單行 Razor 輸出要特別注意,它只允許給定單一值並且即刻輸出內容,來看以下的範例程式碼:
在這段多行的 Razor 語法中,首先宣告變數a並設定其值 1,再宣告另外一個變數 b 並設定其值 999 將兩個變數作加總,儲存至變數 result ,這個 result 是 a 與 b 的運算結果,接下來以三行 Razor 將 a、b 與 result 輸出,載入網頁看到輸出結果如下截圖:

嘗試修改其中的結果,以 a+b 運算式取代 result 輸出,內容如下:
由於 result 是 a+b 這一行運算式的運算結果,第二行將運算式輸出,這會得到以下的輸出內容:
除了 a 的值 1 被輸出,接下來的 + 與 b 均被視為靜態內容直接顯示,原因在前述「檢視與 Razor」 這一篇討論單行 Razor 時已經作了說明,單行 Razor 中,@ 後續的運算式一旦可以完運算取得特定的輸值,就會直接輸出,接下來的內容都會被視為網頁的靜態內容顯示。
如果想要將一段運算式經過運算之後直接以單行 Razor 輸出,可以利用小括弧包裝:
這一次 a+b 運算完成再作輸出,重新載入網頁得到與 result 相同的結果。
單行Razor 運算式與網頁元素的整合
由於單行 Razor最後輸出的結果,會在其配置的位置成為網頁文件中一個特定的靜態值,我們可以利用這個特性作進一步的動態設計,考慮以下的配置:
宣告變數 red_color 並且指定其值為表示紅色的字串「red」,在輸出標籤 p 當中,指定 style 樣式屬性,並且將 coloer 屬性設定為 @red_color ,這在檢視執行的過程中,會將字串「red」代入其中,因此會得到紅色的輸出結果。
從輸出結果與原始碼內容作比較,可以看到 style 中的 color 樣式屬性值為 red。
多行Razor與 C# 語法整合
多行Razor是一段執行完整邏輯的 C# 程式碼,具有相同的程式語法特性,但是要正確的嵌入檢視檔案中,還有一些細節必須瞭解。
變數的有效範圍
首先要注意的是變數的有效範圍,在同一個檢視檔案中,以 @ 標示的Razor區塊,均屬相同範圍的程式碼,因此可以在任何一個區塊的Razor進行存取,例如以下的配置:
一開始宣告數個變數,在 body 元素中,判斷 weekday 變數值,如果是 0 或 6 表示周末假日,以 red_color 變數值 red 輸出為週末假日的紅色訊息,否則為藍色的上班日,由於均是同一個檢視檔案,因此檔案初始完成變數宣告之後,就可以在何位置進行存取。
邏輯區塊
針對如 if 判斷式、迴圈等程式邏輯區塊,若是沒有其它額外的語法,可以利用直接以@標示,將上述的if判斷式修改如下:
這裏一開始並不需要再配置大括弧,效果相同,接下來來看迴圈的範例。
首先宣告一個陣列array1以支援迴圈測試,其中包含四個預先配置的整數。
接下來的for迴圈區塊重複取出array1的陣列值,每一次以取出的值為最大值基準產生亂數,接下來再以此亂數值 n 另外建立一個 for 迴圈,逐一輸出小於 n 的數值序列,利用一個 span 元素包裝輸出,span元素設定style樣式font-size屬性,以 n+10 為字型大小。
由於 foreach 迴圈進入時,均是透過亂數來產生新值,因此於瀏覽器檢視時,每一次的輸出結果均不相同,而每一列的字型大小也不一樣,比較輸出的原始碼可以看到 Razor 設計的效果,同時影響了樣式中的font-size 輸出值。
其中要注意的是foreach 與 for 均是直接以 @ 標示開始,由於每一次 for迴圈開始之前,均配置 p 元素,這會讓檢視以靜態內容格式處理接下來的程式碼,因此必須再以 @ 標示 for ,如果移除 p 元素,可以直接配置如下:
上述的內容因為沒有p元素進行格式化空間配置,因此所有的數值將會連成一行接續輸出。
<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>
現在於其中配置 HTML 標籤,將其調整如下:
<body> <div style="font-size:3em;color:royalblue; "> @{ string msg = "Hello"; var hour = DateTime.Now.Hour; if (hour > 4 && hour < 11) { <P>Hello, 早安妳好 !</P> } else { <P>Hello, 日安妳好 !</P> } } </div> </body>
直接將要輸出的內容以 HTML 標籤嵌入,根據判斷式的結果,呈現 if 或是 else 區塊中的標籤元素內容,要注意這 HTML 元素配置會有彈性的問題,如果想要輸出動態內容,將單行 Razor 嵌入於多行區塊中即可,再次改寫內容如下:
@{ string msg = "Hello"; var hour = DateTime.Now.Hour; if (hour > 4 && hour < 11) { @msg, 早安妳好 ! } else { @msg, 日安妳好 ! } }
這一次代入 @msg 於其中,效果與上述配置靜態HTML元素相同,不過 Razor 是動態程式碼,因此可以支援動態輸出。
單行Razor 運算式的輸出問題
使用單行 Razor 輸出要特別注意,它只允許給定單一值並且即刻輸出內容,來看以下的範例程式碼:
<body> <div> @{ var a = 1; var b = 999; var result = a + b; <p>a = @a</p> <p>b = @b</p> <p>a+b = @result </p> } </div> </body>
在這段多行的 Razor 語法中,首先宣告變數a並設定其值 1,再宣告另外一個變數 b 並設定其值 999 將兩個變數作加總,儲存至變數 result ,這個 result 是 a 與 b 的運算結果,接下來以三行 Razor 將 a、b 與 result 輸出,載入網頁看到輸出結果如下截圖:

嘗試修改其中的結果,以 a+b 運算式取代 result 輸出,內容如下:
<p>a+b = @result </p> <p>a+b = @a+b </p>
由於 result 是 a+b 這一行運算式的運算結果,第二行將運算式輸出,這會得到以下的輸出內容:
a+b = 1000 a+b = 1+b
除了 a 的值 1 被輸出,接下來的 + 與 b 均被視為靜態內容直接顯示,原因在前述「檢視與 Razor」 這一篇討論單行 Razor 時已經作了說明,單行 Razor 中,@ 後續的運算式一旦可以完運算取得特定的輸值,就會直接輸出,接下來的內容都會被視為網頁的靜態內容顯示。
如果想要將一段運算式經過運算之後直接以單行 Razor 輸出,可以利用小括弧包裝:
<p>a+b = @(a+b) </p>
這一次 a+b 運算完成再作輸出,重新載入網頁得到與 result 相同的結果。
單行Razor 運算式與網頁元素的整合
由於單行 Razor最後輸出的結果,會在其配置的位置成為網頁文件中一個特定的靜態值,我們可以利用這個特性作進一步的動態設計,考慮以下的配置:
@{ var red_color = "red"; var a = 1; var b = 999; var result = a + b; <p>a = @a</p> <p>b = @b</p> <p style="color:@red_color">a+b = @result </p> }
宣告變數 red_color 並且指定其值為表示紅色的字串「red」,在輸出標籤 p 當中,指定 style 樣式屬性,並且將 coloer 屬性設定為 @red_color ,這在檢視執行的過程中,會將字串「red」代入其中,因此會得到紅色的輸出結果。
從輸出結果與原始碼內容作比較,可以看到 style 中的 color 樣式屬性值為 red。
多行Razor與 C# 語法整合
多行Razor是一段執行完整邏輯的 C# 程式碼,具有相同的程式語法特性,但是要正確的嵌入檢視檔案中,還有一些細節必須瞭解。
變數的有效範圍
首先要注意的是變數的有效範圍,在同一個檢視檔案中,以 @ 標示的Razor區塊,均屬相同範圍的程式碼,因此可以在任何一個區塊的Razor進行存取,例如以下的配置:
@{ var red_color = "red"; var blue_color = "blue"; DateTime dateValue = new DateTime(2019, 1, 25); var weekday = (int)dateValue.DayOfWeek; } <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width" /> <title>RazorBlock</title> </head> <body> <div> @{ if (weekday == 0 || weekday == 6) { <p style="color:@red_color"> 週末假日 </p> } else { <p style="color:@blue_color"> 上班日 </p> } } </div> </body> </html>
一開始宣告數個變數,在 body 元素中,判斷 weekday 變數值,如果是 0 或 6 表示周末假日,以 red_color 變數值 red 輸出為週末假日的紅色訊息,否則為藍色的上班日,由於均是同一個檢視檔案,因此檔案初始完成變數宣告之後,就可以在何位置進行存取。
邏輯區塊
針對如 if 判斷式、迴圈等程式邏輯區塊,若是沒有其它額外的語法,可以利用直接以@標示,將上述的if判斷式修改如下:
@if (weekday == 0 || weekday == 6) { <p style="color:@red_color"> 週末假日 </p> } else { <p style="color:@blue_color"> 上班日 </p> }
這裏一開始並不需要再配置大括弧,效果相同,接下來來看迴圈的範例。
<body> <div> @{ int[] array1 ={ 16, 12, 18,10 }; } @foreach (var a in array1) { int n = (new Random()).Next(1,a); <p> @for (var i = 0; i < n; i++) { <span style="font-size:@(n+10)px;color:blue;">@i,</span> } </p> } </div> </body>
首先宣告一個陣列array1以支援迴圈測試,其中包含四個預先配置的整數。
接下來的for迴圈區塊重複取出array1的陣列值,每一次以取出的值為最大值基準產生亂數,接下來再以此亂數值 n 另外建立一個 for 迴圈,逐一輸出小於 n 的數值序列,利用一個 span 元素包裝輸出,span元素設定style樣式font-size屬性,以 n+10 為字型大小。
由於 foreach 迴圈進入時,均是透過亂數來產生新值,因此於瀏覽器檢視時,每一次的輸出結果均不相同,而每一列的字型大小也不一樣,比較輸出的原始碼可以看到 Razor 設計的效果,同時影響了樣式中的font-size 輸出值。
其中要注意的是foreach 與 for 均是直接以 @ 標示開始,由於每一次 for迴圈開始之前,均配置 p 元素,這會讓檢視以靜態內容格式處理接下來的程式碼,因此必須再以 @ 標示 for ,如果移除 p 元素,可以直接配置如下:
@{
int[] array1 = { 16, 12, 18, 10 };
}
@foreach (var a in array1)
{
int n = (new Random()).Next(1, a);
for (var i = 0; i < n; i++)
{
@i,
}
}
上述的內容因為沒有p元素進行格式化空間配置,因此所有的數值將會連成一行接續輸出。
沒有留言:
張貼留言