☰

JavaScript 内で Razor を使用する 質問する

tag-icon • tag-icon javascript asp.net-mvc razor
JavaScript 内で Razor を使用する 質問する

ビュー ( cshtml) 内の JavaScript 内で Razor 構文を使用することは可能ですか、または回避策はありますか?

Google マップにマーカーを追加しようとしています... たとえば、これを試しましたが、大量のコンパイル エラーが発生します。

<script type="text/javascript">

    // Some JavaScript code here to display map, etc.

    // Now add markers
    @foreach (var item in Model) {

        var markerlatLng = new google.maps.LatLng(@(Model.Latitude), @(Model.Longitude));
        var title = '@(Model.Title)';
        var description = '@(Model.Description)';
        var contentString = '<h3>' + title + '</h3>' + '<p>' + description + '</p>'

        var infowindow = new google.maps.InfoWindow({
            content: contentString
        });

        var marker = new google.maps.Marker({
            position: latLng,
            title: title,
            map: map,
            draggable: false
        });

        google.maps.event.addListener(marker, 'click', function () {
            infowindow.open(map, marker);
        });
    }
</script>

ベストアンサー1

<text>説明したように疑似要素を使用するここ、Razor コンパイラを強制的にコンテンツ モードに戻すには、次のようにします。

<script type="text/javascript">

    // Some JavaScript code here to display map, etc.


    // Now add markers
    @foreach (var item in Model) {
        <text>
            var markerlatLng = new google.maps.LatLng(@(Model.Latitude), @(Model.Longitude));
            var title = '@(Model.Title)';
            var description = '@(Model.Description)';
            var contentString = '<h3>' + title + '</h3>' + '<p>' + description + '</p>'

            var infowindow = new google.maps.InfoWindow({
                content: contentString
            });

            var marker = new google.maps.Marker({
                position: latLng,
                title: title,
                map: map,
                draggable: false
            });

            google.maps.event.addListener(marker, 'click', function () {
                infowindow.open(map, marker);
            });
        </text>
    }
</script>

アップデート：

スコット・ガスリーが最近投稿した@:Razor の構文についてですが、<text>追加する JavaScript コードを 1 行か 2 行だけであれば、タグよりも少し扱いやすくなっています。次のアプローチの方が、生成される HTML のサイズが小さくなるため、おそらく望ましいでしょう。(addMarker 関数を静的なキャッシュされた JavaScript ファイルに移動して、サイズをさらに小さくすることもできます)。

<script type="text/javascript">

    // Some JavaScript code here to display map, etc.
    ...
    // Declare addMarker function
    function addMarker(latitude, longitude, title, description, map)
    {
        var latLng = new google.maps.LatLng(latitude, longitude);
        var contentString = '<h3>' + title + '</h3>' + '<p>' + description + '</p>';

        var infowindow = new google.maps.InfoWindow({
            content: contentString
        });

        var marker = new google.maps.Marker({
            position: latLng,
            title: title,
            map: map,
            draggable: false
        });

        google.maps.event.addListener(marker, 'click', function () {
            infowindow.open(map, marker);
        });
    }

    // Now add markers
    @foreach (var item in Model) {
        @:addMarker(@item.Latitude, @item.Longitude, '@item.Title', '@item.Description', map);
    }
</script>

呼び出しをaddMarkerより正確にするために上記のコードを更新しました。

明確に言うと、呼び出しは C# コードによく似ています@:が、Razor を強制的にテキスト モードに戻します。次に、Razor は構文を取得して、それらのプロパティの内容を直接出力するように指示します。addMarker@item.Property

アップデート2

View コードは、JavaScript コードを配置するのに適した場所ではないことに注意してください。JavaScript コードは静的.jsファイルに配置し、Ajax 呼び出しまたはdata-HTML の属性をスキャンして必要なデータを取得する必要があります。これにより、JavaScript コードをキャッシュできるようになるだけでなく、Razor は JavaScript ではなく HTML をエンコードするように設計されているため、エンコードの問題も回避できます。

コードを表示

@foreach(var item in Model)
{
    <div data-marker="@Json.Encode(item)"></div>
}

JavaScript コード

$('[data-marker]').each(function() {
    var markerData = $(this).data('marker');
    addMarker(markerData.Latitude, markerData.Longitude,
              markerData.Description, markerData.Title);
});

おすすめ記事