[解決済み】RazorをJavaScriptで使用する場合
質問
Razor の構文をビューの JavaScript で使用することは可能ですか?
cshtml
)?
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>
解決方法は?
を使用します。
<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>
更新しました。
Scott Guthrieさんが最近投稿した記事
について
@:
の構文は、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
をより正しく表示します。
明確にするために
@:
は Razor を強制的にテキストモードに戻しますが、たとえ
addMarker
の呼び出しは、C#のコードによく似ています。Razor は次に
@item.Property
の構文で、これらのプロパティの内容を直接出力するように言っています。
アップデート2
ビューコードは、JavaScriptのコードを置くのに適した場所ではないことに留意する必要があります。JavaScript のコードは、静的な
.js
ファイルから必要なデータを取得し、Ajax 呼び出しまたは
data-
属性を使用します。JavaScript のコードをキャッシュすることが可能になるだけでなく、Razor は HTML 用にエンコードするように設計されていますが、JavaScript には対応していないため、エンコードに関する問題も回避することができます。
コードを見る
@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);
});
関連
-
[解決済み】コンソールがUnterminated JSX contentsエラーを投げる【終了しました
-
[解決済み】FirefoxでGoogle Maps V3をリモートで使用すると「googleが定義されていません」と表示される。
-
[解決済み] JavaScriptで "use strict "は何をするのか、その根拠は?
-
[解決済み] JavaScriptで文字列が部分文字列を含むかどうかを確認する方法は?
-
[解決済み] あるJavaScriptファイルを他のJavaScriptファイルにインクルードするにはどうすればよいですか?
-
[解決済み] JavaScriptでオブジェクトをディープクローンする最も効率的な方法は何ですか?
-
[解決済み] JavaScriptでJSONをきれいに印刷する
-
[解決済み】JavaScriptの比較では、どちらの等号演算子(== vs ===)を使うべきですか?
-
[解決済み】JavaScriptで文字列の出現箇所をすべて置換する方法
-
[解決済み】オブジェクトからプロパティを削除する(JavaScript)
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み】node.js TypeError: path must be absolute or specify root to res.sendFile [JSONのパースに失敗しました]。
-
[解決済み】webpack: モジュールが見つかりません。Error: 解決できない(相対パスで)
-
[解決済み】コンソールがUnterminated JSX contentsエラーを投げる【終了しました
-
[解決済み】Uncaught ReferenceError。Reactが定義されていない
-
[解決済み】このオブジェクトの "forEach "はなぜ関数でないのですか?
-
[解決済み】Babel NodeJS ES6: SyntaxError: 予期しないトークンのエクスポート
-
[解決済み】ETIMEDOUTエラーの対処方法は?
-
[解決済み】Uncaught TypeError: 未定義のプロパティ 'msie' を読み取れない - jQuery tools
-
[解決済み】 \u003C とは何ですか?
-
[解決済み】Javascript、[オブジェクトHTMLInputElement]を表示中。]