Razor 中處理迭代（for 迴圈）並動態生成 HTML 的不同方式。具體來說，它顯示了如何在迴圈內嵌入 C# 變數，並轉譯到 HTML 結果中。

第一段程式碼：

cshtml
複製程式碼
@{
    string[] xa = { "one", "two", "three" };

    for (int i = 0; i < xa.Length; i++)
    {
        <RamdomString>@xa[i]</RamdomString>
    }
}

重點討論：

  1. 迴圈結構：使用 for 迴圈來遍歷陣列 xa，並依次處理每個值。
  2. 動態 HTML 標籤：使用 <RamdomString> 這個標籤包裹變數 @xa[i]，Razor 會在每個迴圈執行時動態生成對應的 HTML 標籤。這裡假設 <RamdomString> 是一個自訂標籤（但其實這個標籤在 HTML 中不存在）。
  3. 嵌入 C# 變數：@xa[i] 的值會被動態插入 <RamdomString> 標籤中，這代表每次迴圈執行時會插入陣列中的一個值。

輸出範例：

html
複製程式碼
<RamdomString>one</RamdomString>
<RamdomString>two</RamdomString>
<RamdomString>three</RamdomString>

第二段程式碼：

cshtml
複製程式碼
@{
    string[] xb = { "one", "two", "three" };

    for (int i = 0; i < xb.Length; i++)
    {
        @:2:@xb[i]
    }
}

重點討論：

  1. 文字與變數插入：這裡使用 @: 來直接插入文字，@: 是 Razor 中用來在程式碼區塊中插入純 HTML 或純文字的方法。因此，@:2: 會在每次迴圈執行時插入數字 2，而 @xb[i] 則插入對應陣列的值。
  2. 結合文字與變數：每次迴圈的輸出都會是數字 2，後接陣列中的一個值。

輸出範例：

html
複製程式碼
2:one
2:two
2:three

兩段程式碼的比較與討論：

  1. 動態標籤與純文字輸出：第一段示範了如何使用自定標籤來動態包裹內容，產生 HTML 標籤。而第二段則是純文字輸出，沒有使用標籤，只是單純組合數字與變數。
  2. @ 與 @: 的差異：第一段中，@xa[i] 是將 C# 變數插入到 HTML 結構中，而第二段的 @: 是用來插入純文字（數字 2）並緊接變數。

image.png