Добавить серверный скрипт ASP.NET в основном статические файлы .JS / .CSS без потери IntelliSense? - PullRequest
4 голосов
/ 07 августа 2009

Используя VS2008 и ASP.NET 3.5 (или VS 2010 / .NET 4.0?), Как я могу включить немного динамического серверного кода ASP.NET в основном статические файлы JavaScript и CSS?

Я хочу сделать это, чтобы избежать клонирования целых файлов JS или CSS, чтобы варьировать лишь небольшую часть их мультитенантных сайтов. Позже я хочу расширить решение для обработки локализации внутри javascript / CSS, поддержки динамической отладки / трассировки и других интересных вещей, которые вы можете получить, динамически внедряя данные в JavaScript и CSS.

Сложность в том, что я не хочу терять все классные вещи, которые вы получаете со статическими файлами, например:

  • JS / CSS код раскраски и intellisense
  • Поддержка CSS-класса "перейти к определению" в IDE
  • автоматические заголовки кэширования HTTP на основе даты базового файла
  • автоматическое сжатие по IIS

Добротность статических файлов на стороне сервера (например, заголовки / сжатие) может быть подделана с помощью HttpHandler, но сохранение совершенства IDE (intellisense / раскраска / и т.д.) поставило меня в тупик.

Идеальное решение будет соответствовать следующим требованиям:

  1. VS IDE обеспечивает IntelliSense и окрашивание кода в JS / CSS. Отказ от intellisense с кодом сервера - это нормально, поскольку в этих файлах код сервера обычно прост.
  2. «перейти к определению» все еще работает для классов CSS (как и в статических файлах CSS)
  3. отправлять заголовки кэширования HTTP, в зависимости от даты изменения базового файла.
  4. поддерживает сжатие HTTP, как и другие статические файлы
  5. поддержка <% =%> и кодовых блоков
  6. URL-пути (по крайней мере, те, которые видят клиенты HTTP) заканчиваются на .JS или .CSS (не на .ASPX). При желании я могу использовать querystring или PathInfo для параметризации (например, выбор локали), хотя в большинстве случаев я буду использовать для этого vdirs. Кэширование должно варьироваться для разных строк запросов.

Пока лучшее (хакерское) решение, которое я придумал, это:

  • Переключите базовые файлы CSS или JS на файлы .ASPX (например, foo.css.aspx или foo.js.aspx). Вставьте базовый статический контент в элемент STYLE (для CSS) или элемент SCRIPT (для JS). Это включает в себя IntelliSense JS / CSS, а также позволяет встроенные или runat = блоки кода сервера.
  • Напишите HttpHandler, который:
    • просматривает URL-адрес и добавляет .aspx, чтобы узнать, какой правильный ASPX используется для вызова
    • использует System.Net.HttpWebRequest для вызова этого URL
    • удаляет содержащиеся теги STYLE или SCRIPT, оставляя только CSS или JS
    • добавляет соответствующие заголовки (кеширование, тип контента и т. Д.)
    • сжимает ответ, если клиент поддерживает сжатие
  • Отобразить * .CSS и * .JS на мой обработчик.
  • (если IIS6) Убедитесь, что расширения файлов .JS и .CSS сопоставлены с ASP.NET

Я уже использую модифицированную версию модуля HttpCompression Darick_c , которая обрабатывает почти все вышеперечисленное для меня, поэтому модификация его для поддержки вышеуказанного решения не будет слишком сложной.

Но мое решение хакерское. Мне было интересно, если у кого-то есть более легкий подход к этой проблеме, который не теряет совершенство Visual Studio в статических файлах.

Я знаю, что могу также взломать решение только на стороне клиента, где я разделю все JS и CSS на «изменяемые» и «не изменяющиеся» файлы, но есть издержки на производительность и обслуживание для такого решения, которое Я хотел бы избежать. Мне действительно нужно решение на стороне сервера, чтобы я мог поддерживать один файл на сервере, а не файлы N + 1.

Я еще не пробовал VS10 / .NET 4.0, но я открыт для решения Dev10 / .net4, если это лучший способ заставить этот сценарий работать.

Спасибо!

Ответы [ 2 ]

3 голосов
/ 06 ноября 2009

Я справился с подобной проблемой, заставив главную страницу выводить динамически сгенерированный объект JSON в нижнем колонтитуле каждой страницы.

Мне нужно, чтобы диалоговое окно входа в js поддерживало локализацию. Таким образом, используя JSON.NET для сериализации, я создал свойство коллекции открытого ключа / значения главной страницы, к которому страницы могли обращаться, чтобы разместить ключ / значения в порядке, например, ключ фразы / локализованные пары фраз. Затем главная страница отображает динамический объект JSON, который содержит эти значения, чтобы статические файлы js могли ссылаться на эти динамические значения.

Для окна входа в систему js на главной странице установлены локализованные значения. Это имело смысл, потому что главная страница также включает файл login.js.

1 голос
/ 06 ноября 2009

Я благодарю вас за беспокойство по поводу количества http-запросов от клиента и возвращаемой полезной нагрузки. Слишком много людей, которых я знаю и с которыми работаю, упускают из виду эти простые оптимизации. Однако всякий раз, когда я сталкиваюсь с той же проблемой, что и у вас (что на самом деле довольно часто), я обнаруживаю, что обычно либо делаю неправильный поворот, либо пытаюсь решить проблему неверным способом.

Что касается вашего вопроса JS, я думаю, что Фрэнк Швитерман в комментариях выше верен. Я бы искал способы раскрыть динамические части вашего JS через сеттеры. Очень простой пример: если вы хотите, чтобы пользователь отображал настраиваемое приветственное сообщение при входе в систему. В вашем JS-файле вы можете использовать метод setMessage (message). Этот метод затем вызывается страницей, включая скрипт. В результате вы получите что-то вроде:

<body onLoad="setMessage('Welcome' + <%= user.FirstName %>);">

Очевидно, что это можно расширить, передав объекты или методы в статический файл JS, чтобы предоставить вам необходимую функциональность.

Отвечая на вопрос CSS, я думаю, что вы можете извлечь большую пользу из подхода Шона Стюарда из комментариев. Вы можете определить определенные статические части вашего CSS в базовом файле, а затем переопределить части, которые вы хотите изменить в других файлах. В результате вы можете определить внешний вид вашего веб-сайта, по каким файлам вы включаете. Кроме того, поскольку вы не хотите принимать удар по дополнительным http-запросам (имейте в виду, если вы устанавливаете кэширование этих файлов на неделю, месяц и т. Д. Это разовый запрос), вы можете сделать что-то вроде объединения CSS-файлы в один файл во время компиляции или выполнения.

Что-то вроде следующих ссылок может быть полезно, чтобы указать вам правильное направление:

http://geekswithblogs.net/rashid/archive/2007/07/25/Combine-Multiple-JavaScript-and-CSS-Files-and-Remove-Overheads.aspx

http://www.asp.net/learn/3.5-SP1/video-296.aspx?wwwaspnetrdirset=1

http://dimebrain.com/2008/04/resourceful-asp.html

Используя объединение во время выполнения или во время компиляции, вы можете получить лучшее из обоих миров, позволяя логически разделять файлы CSS и JS, а также снижать полезную нагрузку и запросы, связанные со сжатием и объединением файлов.

...