Usando o Razor no JavaScript

É possível ou existe uma solução alternativa para usar a sintaxe Razor no JavaScript que está em uma view ( cshtml)?

Estou tentando adicionar marcadores a um mapa do Google ... Por exemplo, tentei isso, mas estou recebendo muitos erros de compilação:

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

Use o <text>pseudo-elemento, conforme descrito aqui , para forçar o compilador Razor de volta ao modo de conteúdo:

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

Atualizar:

Scott Guthrie postou recentemente sobre a @:sintaxe no Razor, que é um pouco menos desajeitada que a <text>tag, se você tiver apenas uma ou duas linhas de código JavaScript para adicionar. A abordagem a seguir provavelmente seria preferível, porque reduz o tamanho do HTML gerado. (Você pode até mover a função addMarker para um arquivo JavaScript estático em cache para reduzir ainda mais o tamanho):

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

Atualizado o código acima para tornar a chamada addMarkermais correta.

Para esclarecer, as @:forças Razor voltam ao modo de texto, mesmo que a addMarkerchamada pareça muito com o código C #. O Razor pega a @item.Propertysintaxe para dizer que deve exibir diretamente o conteúdo dessas propriedades.

Atualização 2

Vale a pena notar que o código View realmente não é um bom lugar para colocar código JavaScript. O código JavaScript deve ser colocado em um .jsarquivo estático e, em seguida, ele deve obter os dados necessários a partir de uma chamada Ajax ou varrendo data-atributos do HTML. Além de tornar possível o cache do seu código JavaScript, isso também evita problemas com a codificação, já que o Razor foi projetado para codificar para HTML, mas não para JavaScript.

Ver Código

@foreach(var item in Model)
{
    <div data-marker="@Json.Encode(item)"></div>
}

Código JavaScript

$('[data-marker]').each(function() {
    var markerData = $(this).data('marker');
    addMarker(markerData.Latitude, markerData.Longitude,
              markerData.Description, markerData.Title);
});

Acabei de escrever esta função auxiliar. Coloque-o em App_Code/JS.cshtml:

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

Então, no seu exemplo, você pode fazer algo assim:

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

Observe como não coloco aspas. Se o título já contiver aspas, ele não explodirá. Parece lidar com dicionários e objetos anônimos também!

Você está tentando enfiar uma estaca quadrada em um buraco redondo.

O Razor foi concebido como uma linguagem de modelo geradora de HTML. Você pode muito bem conseguir gerar código JavaScript, mas não foi projetado para isso.

Por exemplo: E se Model.Titlecontiver um apóstrofo? Isso quebraria o código JavaScript e o Razor não escapará corretamente por padrão.

Provavelmente seria mais apropriado usar um gerador de String em uma função auxiliar. Provavelmente haverá menos consequências não intencionais dessa abordagem.

Quais erros específicos você está vendo?

Algo assim poderia funcionar melhor:

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

Observe que você precisa da <text>tag mágica após a foreachpara indicar que o Razor deve mudar para o modo de marcação.

Isso funcionará bem, desde que esteja em uma página CSHTML e não em um arquivo JavaScript externo.

O mecanismo de modelo do Razor não se importa com o que está sendo produzido e não diferencia entre <script>ou outras tags.

No entanto, você precisa codificar suas seqüências para evitar ataques XSS .

Eu prefiro "<! -" "->" como um "texto>"

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

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

</script>

Uma coisa a acrescentar - descobri que a sintaxe do Razor hilighter (e provavelmente o compilador) interpreta a posição do suporte de abertura de maneira diferente:

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

Um exemplo simples e direto:

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

Isso cria um script em sua página no local em que você coloca o código acima, que se parece com o seguinte:

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

Agora você tem uma variável JavaScript global denominada, a razorUserNamequal pode acessar e usar no cliente. O mecanismo Razor obviamente extraiu o valor de @User.Identity.Name(variável do lado do servidor) e o colocou no código que escreve na sua tag de script.

A solução a seguir me parece mais precisa do que combinar o JavaScript com o Razor. Verifique isso: https://github.com/brooklynDev/NGon

Você pode adicionar quase todos os dados complexos ao ViewBag.Ngon e acessá-los em JavaScript

No controlador:

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

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

Ele permite que qualquer objeto CLR antigo simples (POCOs) possa ser serializado usando o padrão JavascriptSerializer.

Há também mais uma opção que @: e <text></text>.

Usando o <script>próprio bloco.

Quando você precisa criar grandes pedaços de JavaScript, dependendo do código do Razor, pode fazê-lo assim:

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

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

Prós dessa maneira é que ele não mistura muito JavaScript e Razor, porque misturá-los bastante causará problemas de legibilidade eventualmente. Também grandes blocos de texto também não são muito legíveis.

Nenhuma das soluções anteriores funciona corretamente ... Eu tentei de todas as formas, mas não me deu o resultado esperado ... Finalmente, descobri que existem alguns erros no código ... E o código completo é fornecido abaixo.

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

Finalmente encontrei a solução (* .vbhtml):

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

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