Mezcla Razor y código Javascript

172

Estoy bastante confundido con cómo mezclar navaja y js. Esta es la función actual con la que estoy atascado:

<script type="text/javascript">

        var data = [];

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

Si pudiera declarar el código C # <c#></c#>y todo lo demás fuera código JS, esto sería lo que busco:

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

¿Cuál es el mejor método para lograr esto?

c# javascript razor

— Kyle Brandt
fuente

2

Aparentemente, el resaltado de sintaxis también es agradable y confuso con mis <c#>etiquetas :-P

— Kyle Brandt

1

¿Comprobó la salida HTML de esta vista? ¿Cómo se ve y cómo quieres que difiera?

— sukru

Lanza un error Conditional Compilation para que no pueda ver el HTML, por lo que creo que se siente parte de esto es el código C #.

— Kyle Brandt

1

Parece un error de JavaScript: webdeveloper.com/forum/showthread.php?t=99780 . ¿Cuál es el mensaje de error exacto y dónde lo obtiene?

— sukru

2

Creo que este es un caso en el que tratar de mezclar JS y C # tan estrechamente sería un dolor de leer / mantener. Me alegra que el compilador no te haya permitido este código. :)

— Jim Bolla

333

Uso <text>:

<script type="text/javascript">

   var data = [];

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

— Max Toro
fuente

27

Razor funciona bien en bloques Javascript cuando se ejecuta, pero odio cómo el resaltado de sintaxis se confunde todo. Resalta todo el código de Razor como sintaxis no válida porque creo que está atascado en modo Javascript.

— Chev

2

¿Qué pasa si este código está en un paquete? ¿puedo escribir código dentro de un archivo javascript?

— ncubica

2

¡Funciona perfectamente hasta que desee verificar si una variable es menor que otra y la afeitadora se vuelve psicópata!

— cbp

1

@ncubica si quieres una navaja de afeitar en paquete, entonces algo está mal en tu concepto. Razor es para vistas, no javascript.

— 100r

1

@ncubica Esta publicación es antigua, pero la solución a su pregunta es: escribir una función en un archivo JS, representarla y Scripts.Renderluego llamar a la función en una <script>etiqueta. No es exactamente elegante, pero funciona para la mayoría de los casos de uso (léase: simple).

— Sinjai

81

Dentro de un bloque de código (por ejemplo, @foreach), debe marcar el marcado (o, en este caso, Javascript) con @:o la <text>etiqueta .

Dentro de los contextos de marcado, debe rodear el código con bloques de código ( @{ ... }o @if, ...)

— SLaks
fuente

¿Por qué dice "marcar el marcado", esto no sería un problema si el contenido fuera, de hecho, marcado.

— Max Toro

1

@Max: Aunque no parece un marcado, es un marcado. (A diferencia del código del lado del servidor)

— SLaks

@:es lo que estaba buscando, genial!

— Muflix

54

también puedes simplemente usar

<script type="text/javascript">

   var data = [];

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

note @:

— Medet Tleukabiluly
fuente

12

Nunca mezcles más idiomas.

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

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

En caso de problemas también puedes probar

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

— Mertuarez
fuente

Esto es genial, pero también, hay instancias legítimas donde necesitamos mezclar. Pero esta es la solución que utilicé ya que encaja perfectamente.

— frostymarvelous

3

Tenga en cuenta que esto está mezclando idiomas. Tiene una declaración que es mitad JavaScript ("var data =") y mitad Razor / C # ("@ Json.Encode (Modelo)"). Es solo una mezcla menos invasiva, pero no es menos mezcla que tener un "foreach" Razor / C # cuyo cuerpo emite JavaScript generado. :-)

— Jonathan Gilbert

3

Devuelve Uncaught SyntaxError: Unexpected token &debido a que el modelo se convierte en algo como esto[{"Id":1,"Name":"Name}]

— Weihui Guo

1

Un método no convencional para separar javascript de la vista, pero aún así usar razor en él es hacer un Scripts.cshtmlarchivo y colocar su javascript / razor mezclado allí.

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>

— Joel Wiklund
fuente

0

puedes usar la <text>etiqueta para ambos códigos cshtml con javascript

— Surendra Kumar Laggisetty
fuente

A la etiqueta "<texto>" le falta la respuesta anterior

— Surendra Kumar Laggisetty

use backticks o ctrl + k después de seleccionar el código para formatearlo

— Suraj Rao

-1

Envuelva su código Razor en @ {} cuando esté dentro del script JS y tenga en cuenta el uso de solo @ A veces no funciona:

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

Esto producirá

function hideSurveyReminder() {
       False = true;
    }

en el navegador = (

— spine4iller
fuente