如何無縫整合 Razor 和 JavaScript 程式碼以實現動態功能？-js教程-PHP中文網

如何無縫整合 Razor 和 JavaScript 程式碼以實現動態功能？

Susan Sarandon

發布： 2024-10-27 03:53:29

原創

647 人瀏覽過

How to Seamlessly Integrate Razor and JavaScript Code for Dynamic Functionality?

混合 Razor 和 JavaScript 程式碼

使用 Razor 視圖時，通常需要整合 JavaScript 程式碼以實現動態功能。然而，一個常見的挑戰是有效地混合 Razor 和 JavaScript 程式碼。

程式碼範例

考慮以下程式碼片段：

<code class="csharp"><script type="text/javascript">
        var data = [];

        @foreach (var r in Model.rows)
        {
                data.push([ @r.UnixTime * 1000, @r.Value ]);
        }
</script></code>

登入後複製

在此範例中，目標是從 C# 模型動態產生 JavaScript 資料。但是，由於 Razor 解釋程式碼區塊的方式，此程式碼可能無法按預期工作。

解決方案：使用

要實現此目的，我們可以使用 Razor 程式碼區塊中的元素：

<code class="csharp"><script type="text/javascript">
   var data = [];

   @foreach (var r in Model.rows)
   {
      <text>
            data.push([ @r.UnixTime * 1000, @r.Value ]);
      </text>
   }
</script></code>

登入後複製

element允許我們在Razor 區塊中包含文字JavaScript 程式碼。這樣，JavaScript 程式碼將被視為文本，不會被 Razor 執行。

渲染此程式碼時，它將產生以下 JavaScript：

<code class="javascript">var data = [];

data.push([ @r.UnixTime * 1000, @r.Value ]);
data.push([ @r.UnixTime * 1000, @r.Value ]);
...</code>

登入後複製

此解決方案有效地混合了 Razor 和JavaScript 程式碼，讓您從 C# 模型產生動態 JavaScript 資料。

以上是如何無縫整合 Razor 和 JavaScript 程式碼以實現動態功能？的詳細內容。更多資訊請關注PHP中文網其他相關文章！