如何在网页中无缝组合 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中文网其他相关文章！