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 的目的。



於

沒有留言:

張貼留言

訂閱： 張貼留言 (Atom)