Возможно или есть обходной путь для использования синтаксиса Razor в JavaScript, который находится в вид ( cshtml)?

Я пытаюсь добавить маркеры на карту 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>

Скотт Гатри недавно опубликовал

о синтаксисе в Razor, который немного менее неуклюж, чем тег @:, если у вас просто есть одну или две строки кода JavaScript для добавления. Следующий подход, вероятно, будет предпочтительнее, поскольку он уменьшает размер сгенерированного HTML. (Вы можете даже переместить функцию addMarker в статический кешированный файл JavaScript, чтобы еще больше уменьшить размер): <text> Обновлен код выше, чтобы сделать вызов

<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 Чтобы уточнить,

возвращает Razor в текстовый режим, хотя вызов @: очень похож на код C #. Затем Razor выбирает синтаксис addMarker, чтобы сказать, что он должен напрямую выводить содержимое этих свойств. @item.Property Стоит отметить, что код View действительно не подходит для размещения кода JavaScript. Код JavaScript должен быть помещен в статический файл

update 2

Стоит отметить, что код View действительно не подходит для размещения кода JavaScript. Код JavaScript должен быть помещен в статический файл .js, а затем он должен получить необходимые данные либо из вызова Ajax, либо путем сканирования атрибутов data- из HTML. Помимо возможности кэширования вашего кода JavaScript, это также позволяет избежать проблем с кодированием, поскольку Razor предназначен для кодирования для 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 по умолчанию не сможет его избежать.

Вероятно, было бы более целесообразно использовать генератор String в вспомогательной функции. Вероятно, будет меньше непредвиденных последствий такого подхода.

Какие конкретные ошибки вы видите?

Примерно так может сработать лучше:

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

Обратите внимание, что вам нужно волшебное <text> Вы используете foreach, чтобы указать, что Razor должен переключиться в режим разметки.

Это будет хорошо работать, если оно находится на странице CSHTML, а не во внешнем файле JavaScript.

Механизм шаблонов Razor не заботится о том, что он выводит, и не различает <script> или другие теги.

Однако вам нужно кодировать свои строки, чтобы предотвратить атаки XSS .

Я предпочитаю «& Lt ;! -» «- & Gt ;» как «text & Gt ;» { *} Одна вещь, которую нужно добавить — я обнаружил, что синтаксис Razor hilighter (и, возможно, компилятор) по-разному интерпретирует положение открывающей скобки:

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

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

</script>

Простой и хороший прямой пример:

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

Теперь у вас есть глобальная переменная JavaScript с именем

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

, к которой вы можете обращаться и использовать на клиенте. Ядро Razor, очевидно, извлекло значение из razorUserName (серверная переменная) и поместило его в код, который записывается в тэг скрипта. @User.Identity.Name Следующее решение кажется мне более точным, чем объединение JavaScript с Razor. Проверьте это:

https://github.com/brooklynDev/NGon Вы можете добавить почти любые сложные данные в

ViewBag.Ngon и получить к ним доступ в JavaScript В контроллер:

В JavaScript:

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

он допускает любые

<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 Глядя на вывод

Преимущества этого способа в том, что он не слишком смешивает JavaScript и Razor, потому что их частое смешивание в конечном итоге вызовет проблемы с читабельностью. Также большие текстовые блоки не очень читабельны. <text></text> Глядя на вывод

массивов <script> Ни одно из предыдущих решений не работает правильно … Я перепробовал все способы, но он не дал мне ожидаемого результата … Наконец-то я обнаружил, что в коде есть некоторые ошибки … И полное код приведен ниже.

Попробуйте

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

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

Наконец-то я нашел решение (* .vbhtml):

javascript — Можно ли настроить DatePicker пользовательского интерфейса jQuery для отключения суббот и воскресений (и праздничных дней)? — Переполнение стека

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

Я использую средство выбора даты для выбора дня встречи. Я уже установил диапазон дат только на следующий месяц. Это отлично работает. Я хочу исключить субботы и воскресенья из доступных вариантов …

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

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