在 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 的目的。
沒有留言:
張貼留言