Web ページ内で Razor と JavaScript コードをシームレスに組み合わせるにはどうすればよいですか?

Web ページでの Razor と JavaScript の組み合わせ

同じ Web ページ内に 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>

プレーン テキスト セクションを使用すると、Razor の構文を利用してサーバーからのデータにアクセスしながら、スクリプト ブロック内に任意の JS コードを含めることができます。これで、コードは意図したとおりに動作し、C# コレクションの値をデータ配列に設定するはずです。

以上がWeb ページ内で Razor と JavaScript コードをシームレスに組み合わせるにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。