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>

ここで<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より正確にしました。

明確にするために、呼び出しはC＃コードによく似@:ていますが、Razorを強制的にテキストモードに戻しaddMarkerます。次に、Razorは@item.Property構文を取得して、これらのプロパティのコンテンツを直接出力する必要があることを伝えます。

アップデート2

Viewコードは実際にはJavaScriptコードを配置するのに適した場所ではないことに注意してください。JavaScriptコードは静的.jsファイルに配置し、Ajax呼び出しまたはスキャンによって必要なデータを取得する必要がありますdata- HTMLから属性をあります。RazorはJavaScriptではなく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);
});

私はこのヘルパー関数を書いたところです。それを入れてくださいApp_Code/JS.cshtml：

@using System.Web.Script.Serialization
@helper Encode(object obj)
{
    @(new HtmlString(new JavaScriptSerializer().Serialize(obj)));
}

次に、あなたの例では、次のようなことができます：

var title = @JS.Encode(Model.Title);

引用符を付けないことに注意してください。タイトルにすでに引用符が含まれている場合、爆発しません。辞書や匿名オブジェクトもうまく処理するようです！

あなたは丸い穴に四角いペグを詰め込もうとしています。

Razorは、HTMLを生成するテンプレート言語として意図されていました。JavaScriptコードを生成することもできますが、そのために設計されていません。

たとえばModel.Title、アポストロフィが含まれている場合はどうなりますか？それはあなたのJavaScriptコードを壊すでしょう、そしてRazorはデフォルトでそれを正しくエスケープしません。

ヘルパー関数で文字列ジェネレータを使用するほうが適切でしょう。そのアプローチの意図しない結果が少なくなる可能性があります。

どのような具体的なエラーが発生していますか？

このようなものはうまくいくかもしれません：

<script type="text/javascript">

//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>'
    </text>
}
</script>

Razorがマークアップモードに切り替える必要があることを示すには、の<text>後に魔法のタグが必要foreachです。

これは、CSHTMLページにあり、外部JavaScriptファイルではない場合は問題なく機能します。

Razorテンプレートエンジンは、何を出力するかを気にせず、<script>または他のタグを区別しません。

ただし、XSS攻撃を防ぐために文字列をエンコードする必要があります。

「テキスト」のように「<！-」「->」を好む

<script type="text/javascript">
//some javascript here     

@foreach (var item in itens)
{                 
<!--  
   var title = @(item.name)
    ...
-->

</script>

追加すべきことの1つ-Razor構文ハイライター（およびおそらくコンパイラ）が開き角括弧の位置を異なる方法で解釈することがわかりました。

<script type="text/javascript">
    var somevar = new Array();

    @foreach (var item in items)
    {  // <----  placed on a separate line, NOT WORKING, HILIGHTS SYNTAX ERRORS
        <text>
        </text>
    }

    @foreach (var item in items) {  // <----  placed on the same line, WORKING !!!
        <text>
        </text>
    }
</script>

シンプルでわかりやすい例：

<script>
    // This gets the username from the Razor engine and puts it
    // in JavaScript to create a variable I can access from the
    // client side.
    //
    // It's an odd workaraound, but it works.
    @{
        var outScript = "var razorUserName = " + "\"" + @User.Identity.Name + "\"";
    }
    @MvcHtmlString.Create(outScript);
</script>

これにより、ページの上のコードを配置した場所に次のようなスクリプトが作成されます。

<script>
    // This gets the username from the Razor engine and puts it
    // in JavaScript to create a variable I can access from
    // client side.
    //
    // It's an odd workaraound, but it works.

    var razorUserName = "daylight";
</script>

これrazorUserNameで、クライアントでアクセスして使用できるという名前のグローバルJavaScript変数が作成されました。Razorエンジンは明らかに@User.Identity.Name（サーバー側変数）から値を抽出し、それをスクリプトタグに書き込むコードに配置します。

次の解決策は、JavaScriptとRazorを組み合わせるよりも正確に思えます。これをチェックしてください：https： //github.com/brooklynDev/NGon

ほとんどすべての複雑なデータをViewBag.Ngonに追加して、JavaScriptでアクセスできます

コントローラで：

public class HomeController : Controller
{
    public ActionResult Index()
    {
        var person = new Person { FirstName = "John", LastName = "Doe", Age = 30 };
        ViewBag.NGon.Person = person;
        return View();
    }
}

JavaScriptの場合：

<script type="text/javascript">
    $(function () {
        $("#button").click(function () {
            var person = ngon.Person;
            var div = $("#output");
            div.html('');
            div.append("FirstName: " + person.FirstName);
            div.append(", LastName: " + person.LastName);
            div.append(", Age: " + person.Age);
        });
    });
</script>

デフォルトを使用してシリアル化できるプレーンオールドCLRオブジェクト（POCO）を許可しますJavascriptSerializer。

@：と以外にも1つのオプションがあり<text></text>ます。

<script>ブロック自体を使用します。

Razorコードに応じてJavaScriptの大きなチャンクを実行する必要がある場合、次のように実行できます。

@if(Utils.FeatureEnabled("Feature")) {
    <script>
        // If this feature is enabled
    </script>
}

<script>
    // Other JavaScript code
</script>

この方法の長所は、JavaScriptとRazorをあまり混合しないことです。これらを大量に混合すると、最終的に可読性の問題が発生するためです。また、大きなテキストブロックも読みにくいです。

以前のソリューションはどれも正しく機能しません...私はすべての方法を試しましたが、期待した結果が得られませんでした...ついに、コードにエラーがあることがわかりました...そして完全なコードが与えられました未満。

<script type="text/javascript">

    var map = new google.maps.Map(document.getElementById('map'), {
        zoom: 10,
        center: new google.maps.LatLng(23.00, 90.00),
        mapTypeId: google.maps.MapTypeId.ROADMAP
    });

    @foreach (var item in Model)
    {
        <text>
            var markerlatLng = new google.maps.LatLng(@(item.LATITUDE), @(item.LONGITUDE));
            var title = '@(item.EMP_ID)';
            var description = '@(item.TIME)';
            var contentString = '<h3>' + "Employee " +title+ " was here at "+description+ '</h3>' + '<p>'+" "+ '</p>'

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

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

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

私は最終的に解決策を見つけました（* .vbhtml）：

function razorsyntax() {
    /* Double */
    @(MvcHtmlString.Create("var szam =" & mydoublevariable & ";"))
    alert(szam);

    /* String */
    var str = '@stringvariable';
    alert(str);
}