Mix Razor e código Javascript


172

Estou bastante confuso com a forma de misturar navalha e js. Esta é a função atual com a qual estou preso:

<script type="text/javascript">

        var data = [];

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

Se eu pudesse declarar o código c # com <c#></c#>e tudo o mais fosse código JS - seria o que eu procuraria depois:

<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#>

Qual é o melhor método para conseguir isso?


2
Aparentemente, o destaque de sintaxe é agradável e confundido com minhas <c#>marcas bem :-P
Kyle Brandt

1
Você verificou a saída HTML dessa exibição? Como é a aparência e como você quer que ela seja diferente?
Sukru

Lança um erro, Conditional Compilation então não consigo ver o HTML - então acredito que isso faz parte do código C #.
Kyle Brandt

1
Parece um erro de JavaScript: webdeveloper.com/forum/showthread.php?t=99780 . Qual é a mensagem de erro exata e onde você a recebe?
precisa saber é o seguinte

2
Eu acho que esse é um caso em que tentar misturar JS e C # tão de perto seria uma dor de ler / manter. Fico feliz que o compilador tenha desaprovado esse código. :)
Jim Bolla

Respostas:


333

Use <text>:

<script type="text/javascript">

   var data = [];

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

27
O Razor funciona bem em blocos Javascript quando executado, mas eu odeio como o destaque da sintaxe fica todo confuso. Ele destaca todo o código Razor como sintaxe inválida, porque ele está preso no modo Javascript, acredito.
Chev

2
e se esse código estiver em um pacote? posso escrever código dentro de um arquivo javascript ??
Ncubica 28/01

2
Funciona perfeitamente até que você queira verificar se uma variável é menor que outra e o barbeador fica psicótico!
Cbp

1
@ ncubica se você quiser barbear em pacote, do que algumas coisas erradas em seu conceito. Razor é para visualizações, não para javascript.
100r

1
@ ncubica Esta publicação é antiga, mas a solução para sua pergunta é: Escreva uma função em um arquivo JS, renderize-a Scripts.Rendere chame-a em uma <script>tag. Não é exatamente elegante, mas funciona para a maioria dos casos de uso (leia-se: simples).
Sinjai

81

Dentro de um bloco de código (por exemplo, @foreach), você precisa marcar a marcação (ou, neste caso, Javascript) com @:ou a <text>tag .

Dentro dos contextos de marcação, você precisa cercar o código com blocos de código ( @{ ... }ou @if, ...)


Por que você diz "marcar a marcação", isso não seria um problema se o conteúdo fosse, de fato, marcação.
Max Toro

1
@ Max: Mesmo que não pareça marcação, é marcação. (Ao contrário de código do lado do servidor)
SLaks

@:é o que eu estava procurando, ótimo!
Muflix

54

você também pode simplesmente usar

<script type="text/javascript">

   var data = [];

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

note @:


12

Nunca misture mais idiomas.

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

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

Em caso de problema, você também pode tentar

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

Isso é ótimo, mas também existem instâncias legítimas em que precisamos nos misturar. Mas esta é a solução que usei, pois se encaixava perfeitamente.
Frostymarvelous

3
Observe que isso está misturando idiomas. Você tem uma instrução que é meio JavaScript ("var data =") e meio Razor / C # ("@ Json.Encode (Model)"). É apenas uma mistura menos invasiva, mas não é menos mistura do que ter um Razor / C # "foreach" cujo corpo emite gerado JavaScript. :-)
Jonathan Gilbert

3
Ele retorna Uncaught SyntaxError: Unexpected token &porque o modelo se torna algo como isto[{&quot;Id&quot;:1,&quot;Name&quot;:&quot;Name}]
Weihui Guo

1

Um método não convencional para separar o javascript da visualização, mas ainda assim usar o barbeador, é criar um Scripts.cshtmlarquivo e colocar seu javascript / barbeador misto lá.

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

Coloque seu código Razor em @ {} quando estiver dentro do script JS e esteja ciente de usar apenas @ Às vezes, não funciona:

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

Isso produzirá

function hideSurveyReminder() {
       False = true;
    }

no navegador = (

Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.