kangting

這一篇延續「檢視與 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元素進行格式化空間配置，因此所有的數值將會連成一行接續輸出。

康廷數位

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

沒有留言:

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

沒有留言:

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