Работа с Razor в JavaScript для маркеров Google Maps

Быстрый ответ

Если вы хотите вставить код Razor в JavaScript в файлах .cshtml, воспользуйтесь символом @:

// Пример преобразования данных
var data = @Html.Raw(Json.Serialize(Model.Data));

В данном примере демонстрируется, как можно преобразовать данные из Razor в объект JSON, который после этого можно использовать в JavaScript. Этот метод может быть эффективным для синхронизации серверных моделей данных с клиентскими скриптами.

Несколько рекомендаций по лучшим практикам

Прежде чем приступить к интеграции Razor и JavaScript, необходимо учитывать несколько важных аспектов:

Изолирование JavaScript

Чтобы избежать путаницы в коде, всю работу с JavaScript следует поместить в функции, которые можно вызывать из представления Razor:

// Всё происходит в рамках чётко определённой функции
function initialize(data) {
    // Используем переменую data вместо прямого обращения к коду Razor
    // Чистая изолированная функция JavaScript
}

Теперь передайте в эту JavaScript-функцию данные, сформированные при помощи Razor:

<script>
// Вводим в оборот новые данные
initialize(@Html.Raw(Json.Serialize(Model.Data)));
</script>

Подробнее об этом расскажет наш спикер на видео

Хранение данных в DOM с помощью data-атрибутов

Для привязки данных к HTML-элементам удобно использовать data-атрибуты. Это позволит JavaScript обращаться к данным прямо в DOM:

<!-- Элемент, хранящий важные данные -->
<div id="user-info" data-user="@Html.Raw(Json.Serialize(Model.User))"></div>

Выделение статического кода JavaScript

Проводите код, который не делает обращений к переменным Razor, в отдельные файлы .js. Это ускорит загрузку страниц за счёт кэширования и сократит их размер:

// Этот код работает без участия Razor, просто в .js файле

Использование Ajax

Если вам нужно работать с данными, которые могут изменяться динамически, воспользуйтесь AJAX. Этот инструмент поможет поддерживать ваш код в чистоте, отделяя серверные операции:

// Осуществляем запрос к серверу для получения данных
$.getJSON("/api/userdata", function(data) {
    // Производим обработку и вывод информации
});

Визуализация

Сочетание синтаксиса Razor и JavaScript требует искусства и точности, словно хождение по канату:

🚶‍♀️--- [🔥 Синтаксис Razor]--------- [🛸 Код JavaScript]

Иногда это может напоминать минное поле, но грамотно использовав этот подход, вы добьётесь успеха:

🚶‍♀️---[⚓ Осторожность]---[⚛️ Минное поле]---[🎯 Успех]

Всегда кодируйте данные в HTML, чтобы предотвратить сбои в синтаксисе JavaScript:

// Защищайте свой код от ошибок с помощью кодирования!
var safeString = @Html.Raw(Json.Encode(Model.UnsafeString));

Старайтесь избегать использования slim функций, это поможет предотвратить возникновение проблем:

@*
Воздерживаемся от использования функций, чтобы избежать возможных осложнений.
*@

Тонкости использования Razor с JavaScript

Улучшите свои навыки в веб-разработке, используя следующие советы:

Оптимизация кода с помощью @: и <text>

Используйте маркеры @: или элементы <text> для встраивания JavaScript-кода в Razor-файлы. Это позволит переключить Razor в текстовый режим и создать оптимизированный HTML:

@if (someCondition) {
    @: var conditionMet = true;
}

Работа с методами C# с помощью helper'ов

Обращайте внимание на методы @helper, помещая их в App_Code. Это поможет сделать ваш код более читаемым и облегчит его переиспользование:

@helper EncodeForJs(MyModel model) {
    @Html.Raw(Json.Encode(model))
}

Использование итераций в синтаксисе Razor

Для обхода коллекций воспользуйтесь синтаксисом Razor, это приведёт к упрощению кода:

// Проходим по коллекции с использованием Razor
var array = [
    @foreach (var item in Model.Collection) {
        @: '@Html.Raw(item)', 
    }
];

Размещение Razor-кода внутри тегов script

Убедитесь, что код Razor размещён правильно внутри тегов <script> при взаимодействии с JavaScript:

<script>
    @foreach (var item in Model.Collection) {
        <text>
        // Razor и JavaScript работают вместе
        createItem('@Html.Raw(item.Name)', '@Html.Raw(item.Value)');
        </text>
    }
</script>