ASP.NET MVC ビューの JavaScript 内で Razor 構文を使用するにはどうすればよいですか?

ビューの JavaScript 内で Razor 構文を利用する

.cshtml ビューでは、JavaScript コードを埋め込むと、Razor 構文との固有の競合により問題が発生します。 。これを克服するには、回避策はあるのか、それとも Razor 構文を JavaScript 内に直接組み込むことが可能なのかという疑問が生じます。

コンパイル エラーへの対処

使用しようとするとき提供されたコード スニペットに見られるように、JavaScript 内の Razor 構文では、多数のコンパイル エラーが発生する可能性があります。これは、Razor コンパイラがスクリプト タグの外側に特定の構文を想定しているために発生します。

回避策: の使用Pseudo-Element

これらのエラーを解決し、JavaScript で Razor 構文を有効にするには、回避策として を使用します。疑似要素。この要素は、Razor コンパイラーを強制的にコンテンツ モードにし、スクリプト タグ内に Razor 構文を組み込むことができるようにします。

ここでは、 を利用した変更されたコード スニペットを示します。 pseudo-element:

<script type="text/javascript">
    // Some JavaScript code here to display map, etc.
    @foreach (var item in Model) {
        <text>
            // ... Razor syntax for markers
        </text>
    }
</script>

さらに高度なオプション

Scott Guthrie の @: 構文: 最近、Scott Guthrie は @: 構文を導入しました。 Razor は、 のよりクリーンな代替手段を提供します。

JavaScript をビューから分離する: 最終的には、JavaScript コードを別の .js ファイルに配置することを検討することをお勧めします。このアプローチは、キャ​​ッシュによってパフォーマンスを向上させ、Razor と JavaScript 構文を直接混合するときに発生する可能性のあるエンコードの問題を防ぎます。

さらなる回避策: データ属性と JavaScript 解析を使用する

代替案回避策としては、HTML 要素内のデータ属性を使用してマーカー データを保存し、そのデータにアクセスして解析できるようにする必要があります。 JavaScript コード。これにより、懸念事項が明確に分離され、Razor 構文の競合が回避されます。

要約すると、ビューの JavaScript 内で Razor 構文を使用するには、 を使用する必要があります。疑似要素を使用するか、よりクリーンな @: 構文を考慮します。ただし、ベスト プラクティスとして、パフォーマンスを向上させ、エンコードの複雑さを防ぐために、JavaScript コードを別のファイルに保持することをお勧めします。

以上がASP.NET MVC ビューの JavaScript 内で Razor 構文を使用するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。