如何在網頁中無縫組合 Razor 和 JavaScript 程式碼？

在網頁中組合 Razor 和 JavaScript

將 Razor 和 JavaScript 程式碼合併到同一個網頁中可能有點棘手。請考慮以下範例程式碼：

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

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

此程式碼嘗試建立一個名為 data 的 JavaScript 數組，並使用 Razor foreach 循環填充它。然而，它並沒有完全達到我們的期望。

理想的解決方案：

我們預期的結果是能夠寫出如下所示的程式碼：

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

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

此程式碼無縫混合Razor 和JS 程式碼，讓我們能夠輕鬆迭代C# 集合並填入JavaScript 陣列。

解決方案：

為了實現這一點，我們可以使用 純文字 部分。將 替換為和#>帶有 的標籤和文字>標籤，如下所示：

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

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

使用純文字部分允許我們在腳本區塊中包含任意JS 程式碼，同時仍利用Razor 的語法從伺服器存取資料。現在，我們的程式碼應該按預期運行，用 C# 集合中的值填入資料數組。

以上是如何在網頁中無縫組合 Razor 和 JavaScript 程式碼？的詳細內容。更多資訊請關注PHP中文網其他相關文章！