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

這一篇延續檢視與 Razor 最後的範例中,在多行 Razor 區塊中僅包含邏輯運算程式碼,若是要輸出任何內容,則必須配置HTML標籤、使用單行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>

現在於其中配置 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元素進行格式化空間配置,因此所有的數值將會連成一行接續輸出。




沒有留言: