【公告】網站目前停止所有的課程訂閱服務,原有學員權益不受影響,造成不便還請見諒,我們正在打造更多課程以及圖書,未來將會合併且擴充目前的課程內容,提供全新課程訂閱服務,感謝學員的支持。

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

在 Razor 語法區塊中,如果想要輸出一般的文字靜態內容,必須以HTML元素包裝以識別輸出,例如以下的程式碼:

@{
    string[] weekdays = { "SUN", "MON", "TUE", "WED", "THU", "FRI", "SAT" };
    foreach (var day in weekdays)
    {
        @day
        if (day == "SUN")
        {
            @("假日")
        }
        else
        {
            <span>非假日</span>
        }   
    }
}

迴圈中的 if 判斷式,依據陣列元素 day 的值,分別輸出「假日」與「非假日」的訊息說明。在 Razor 區塊中,如果要輸出一般的靜態文字內容,就必須以程式化的語法,例如包裝於小括弧中雙引號標示的常值,或是以 HTML 元素呈現。

我們另外也可以利用 @: 明確的表示要輸出一般文字的靜態內容,將上述的程式碼修改如下:

@{
    string[] weekdays = { "SUN", "MON", "TUE", "WED", "THU", "FRI", "SAT" };
    foreach (var day in weekdays)
    {
        @day
        if (day == "SUN")
        {
            @:假日
        }
        else
        {
            @:非假日
        }
    }
}

其中直接 @: 標示要輸出的字串內容。

如果要輸出多行的靜態內容,可以選擇另外一個 text 元素 text 包裝要輸出的內容,語法如下:

@{  
    <text>
       // …
       // …
    </text>     
}

現在調整上述的程式碼作比較:

@{
    string[] weekdays = { "SUN", "MON", "TUE", "WED", "THU", "FRI", "SAT" };
    foreach (var day in weekdays)
    {
        @day
        if (day == "SUN")
        {            
            @:假日
            @:不需上班
        }
        else
        {
            <text>
              非假日
              要上班
            </text>
        }
    }
}

在 if 區塊中,以兩行 @: 輸出說明訊息,而 else 區塊中,則直接以 text 元素包裝要輸出的多行內容。

如上述的說明,使用 @: 或是 text 元素可以讓我們更明確的辨識 Razor 語法區塊中的靜態內容,而在 text 元素中,也可以再配置 Razor 語法,或是 HTML 元素,例如以下的配置:

@{
    <text>   
        現在日期 <br/>
        @DateTime.Now.ToShortDateString()<br/>
        現在時間 <br/>
        @DateTime.Now.ToShortTimeString()<br/>
    </text>    
}

其中於 text 元素分別嵌入日期與時間的求值程式碼,同時包含 br 元素。

靜態內容的輸出 另外可以被用在 JavaScript 的設計上,我們繼續往下看。

JavaScript 應用

當檢視的內容是由後端取出動態傳入,同時需進一步經由 JavaScript 進行運算,在這種情形下,就會需要將這些動態內容利用靜態輸出的方式,嵌入 script 元素中,來看以下的程式碼:

<body>
    <div id="booktitle">
    </div>
    <script>
        @{
            var title = "ASP.NET MVC 實務入門";
            <text>
                var title = "@title"; 
            </text>
        }
        document.getElementById("booktitle").textContent = title;
    </script>
</body>

一開始的div 元素設定 id 為 booktitle 以方便 JavaScript 進行存取。在 Script 元素中,配置 Razor 區塊,第一行的C# 程式碼宣告一個 title 變數並且指定其字串值,接下來在 text 元素中,將此變數值以 @ title 取出合併成一行純文字的 JavaScript 程式碼,這會在最後輸出以下的 JavaScript 程式碼:

<script>
    var title = "ASP.NET MVC 實務入門";
    document.getElementById("booktitle").textContent = title  ;
</script>

Razor 中的 title 變數值,與 JavaScript 合併成一行,形成合法的 JavaScript 程式碼,如你所見,JavaScript 本身即是純文字內容,因此這裏只要透過 text 將要內容輸出即可達到動態建立 JavaScript 的目的。



沒有留言: