RazorとJavaScriptコードを組み合わせる


172

私はかみそりとjsを混合する方法とかなり混乱しています。これは私が行き詰まっている現在の機能です:

<script type="text/javascript">

        var data = [];

        @foreach (var r in Model.rows)
        {
                data.push([ @r.UnixTime * 1000, @r.Value ]);
        }

私がc#コードを宣言でき<c#></c#>、他のすべてがJSコードである場合-これは私が求めているものです:

<script type="text/javascript">

        var data = [];

        <c#>@foreach (var r in Model.rows) {</c#>
                data.push([ <c#>@r.UnixTime</c#> * 1000, <c#>@r.Value</c#> ]);
        <c#>}</c#>

これを達成するための最良の方法は何ですか?


2
どうやら構文の強調表示は素晴らしく、私の<c#>タグとも混同されています:-P
カイル・ブラント

1
このビューのHTML出力を確認しましたか?それはどのように見え、どのように違うものにしたいですか?
sukru

Conditional Compilation HTMLが表示されないようにエラーをスローします-そのため、これはC#コードの一部であると感じています。
Kyle Brandt

1
JavaScriptエラーのようです:webdeveloper.com/forum/showthread.php?t=99780 。正確なエラーメッセージとは何ですか、またどこで入手できますか?
sukru

2
これは、JSとC#を非常に密接に混合しようとすると、読み取り/保守が困難になるケースだと思います。コンパイラがこのコードを許可しないことをうれしく思います。:)
ジムボラ

回答:


333

使用<text>

<script type="text/javascript">

   var data = [];

   @foreach (var r in Model.rows)
   {
      <text>
            data.push([ @r.UnixTime * 1000, @r.Value ]);
      </text>
   }
</script>

27
Razorは実行時にJavascriptブロックで正常に動作しますが、構文の強調表示があらゆる種類の混乱を招くのが嫌いです。それは私が信じているJavascriptモードで立ち往生しているので、すべてのRazorコードを無効な構文として強調表示します。
Chev 2012

2
このコードがバンドルされている場合はどうですか?JavaScriptファイル内にコードを記述できますか?
ncubica 2013年

2
ある変数が別の変数よりも小さく、かみそりがサイコになるかどうかを確認するまで、完全に機能します。
cbp 2014

1
@ncubicaかみそりをバンドルしたい場合は、概念に問題がある場合よりも。Razorはビュー用であり、JavaScriptではありません。
100r

1
@ncubicaこの投稿は古いですが、あなたの質問に対する解決策は次のとおりです。JSファイルに関数を記述しScripts.Render、それをでレンダリングしてから、<script>タグで関数を呼び出します。必ずしも優雅ではありませんが、ほとんどの(読み取り:単純な)ユースケースで機能します。
シンジャイ

81

コードブロック(例:)の内部では@foreach、マークアップ(またはこの場合はJavaScript)をタグ@:または<text>タグでマークする必要があります。

マークアップコンテキスト内で、コードをコードブロック(@{ ... }または@if、...)で囲む必要があります。


「マークアップにマークを付ける」と言うのはなぜですか。コンテンツが実際にマークアップである場合、これは問題になりません。
Max Toro

1
@Max:マークアップのようには見えませんが、マークアップです。(サーバー側のコードとは対照的に)
SLaksは2010

@:私が探していたものは素晴らしいです!
Muflix 2018年

54

あなたも簡単に使うことができます

<script type="text/javascript">

   var data = [];

   @foreach (var r in Model.rows)
   {
       @:data.push([ @r.UnixTime * 1000, @r.Value ]);
   }
</script>

注意:@


12

これ以上言語を混在させないでください。

<script type="text/javascript">
    var data = @Json.Encode(Model); // !!!! export data !!!!

    for(var prop in data){
      console.log( prop + " "+ data[prop]);
    }

問題が発生した場合も試すことができます

@Html.Raw(Json.Encode(Model));

これはすばらしいことですが、混合する必要がある正当な場合もあります。しかし、これは完全に適合するため、私が使用したソリューションです。
霜降りの素晴らしい2016

3
これ混合言語であることに注意してください。ハーフJavaScript( "var data =")およびハーフRazor / C#( "@ Json.Encode(Model)")であるステートメントがあります。これは侵襲性の低いミキシングですが、生成されたJavaScriptをボディが放出するRazor / C#の "foreach"のミキシングと同じです。:-)
ジョナサン・ギルバート

3
Uncaught SyntaxError: Unexpected token &モデルがこのようなものになるために戻ります[{&quot;Id&quot;:1,&quot;Name&quot;:&quot;Name}]
Weihui Guo

1

javascriptをビューから分離する従来の方法ではありませんが、かみそりを使用してScripts.cshtmlファイルを作成し、そこに混合されたjavascript / razorを配置します。

Index.cshtml

<div id="Result">
</div>

<button id="btnLoad">Click me</button>

@section scripts
{
    @Html.Partial("Scripts")
}

Scripts.cshtml

<script type="text/javascript">
    var url = "@Url.Action("Index", "Home")";

    $(document).ready(function() {
        $("#btnLoad").click(function() {
            $.ajax({
                type: "POST",
                url: url ,
                data: {someParameter: "some value"},
                contentType: "application/json; charset=utf-8",
                dataType: "json",

                success: function(msg) {
                    $("#Result").text(msg.d);
                }
            });
        });
    });
</script>


-1

JSスクリプト内でRazorコードを@ {}で囲み、@のみを使用することに注意してください。

function hideSurveyReminder() {
       @Session["_isSurveyPassed"] = true;
    }

これにより

function hideSurveyReminder() {
       False = true;
    }

ブラウザで=(

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.