Razor と JavaScript コードをシームレスに統合して動的機能を実現するにはどうすればよいですか?

Razor と JavaScript コードの混合

Razor ビューを操作する場合、多くの場合、動的機能のために JavaScript コードを統合する必要があります。ただし、共通の課題の 1 つは、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 ]);
      
   }
</script></code>

要素を使用すると、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 中国語 Web サイトの他の関連記事を参照してください。