在 Razor 語法區塊中，如果想要輸出一般的文字靜態內容，必須以HTML元素包裝以識別輸出，例如以下的程式碼：
迴圈中的 if 判斷式，依據陣列元素 day 的值，分別輸出「假日」與「非假日」的訊息說明。在 Razor 區塊中，如果要輸出一般的靜態文字內容，就必須以程式化的語法，例如包裝於小括弧中雙引號標示的常值，或是以 HTML 元素呈現。
我們另外也可以利用 @: 明確的表示要輸出一般文字的靜態內容，將上述的程式碼修改如下：
其中直接 @: 標示要輸出的字串內容。
如果要輸出多行的靜態內容，可以選擇另外一個 text 元素 text 包裝要輸出的內容，語法如下：
現在調整上述的程式碼作比較：
在 if 區塊中，以兩行 @: 輸出說明訊息，而 else 區塊中，則直接以 text 元素包裝要輸出的多行內容。
如上述的說明，使用 @: 或是 text 元素可以讓我們更明確的辨識 Razor 語法區塊中的靜態內容，而在 text 元素中，也可以再配置 Razor 語法，或是 HTML 元素，例如以下的配置：
其中於 text 元素分別嵌入日期與時間的求值程式碼，同時包含 br 元素。
靜態內容的輸出 另外可以被用在 JavaScript 的設計上，我們繼續往下看。
JavaScript 應用
當檢視的內容是由後端取出動態傳入，同時需進一步經由 JavaScript 進行運算，在這種情形下，就會需要將這些動態內容利用靜態輸出的方式，嵌入 script 元素中，來看以下的程式碼：
一開始的div 元素設定 id 為 booktitle 以方便 JavaScript 進行存取。在 Script 元素中，配置 Razor 區塊，第一行的C# 程式碼宣告一個 title 變數並且指定其字串值，接下來在 text 元素中，將此變數值以 @ title 取出合併成一行純文字的 JavaScript 程式碼，這會在最後輸出以下的 JavaScript 程式碼：
Razor 中的 title 變數值，與 JavaScript 合併成一行，形成合法的 JavaScript 程式碼，如你所見，JavaScript 本身即是純文字內容，因此這裏只要透過 text 將要內容輸出即可達到動態建立 JavaScript 的目的。
@{
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 的目的。
沒有留言:
張貼留言