Предпочитаемый метод для ссылки на таблицы стилей из UserControl?

Question

В основном мы используем среду ASP.NET на работе. Сейчас я создаю приложение, которое использует «Модули», который является просто UserControl, с его Javascript прямо в элементе управления и элементом ссылки на таблицу стилей для этого элемента управления. Я хочу, чтобы он был модульным, и хотел бы, чтобы стиль этого элемента управления не зависел от разметки / javascript.

Так что мне интересно, каков предпочтительный способ сделать это? Очевидно, что если мне не нужна функциональность «тема», то я мог бы просто использовать теги стилей в верхней части элемента управления. Как я уже сказал, сейчас у меня есть элемент ссылки, и я не думаю, что это неправильно.

Есть ли у кого-нибудь предпочтительные методы, и если да, то что и почему?

---

Я кратко рассмотрел темы ASP.NET, но идея этих элементов управления немного отличается, я думаю.

Это в основном система корзины покупок. Я не хочу вдаваться в подробности, но мы используем действительно аккуратную систему безопасности и не хотим использовать готовую корзину для покупок. Я разрабатываю набор элементов управления, которые могут быть удалены на странице, например, в SiteFinity (которая является системой CMS, которую мы используем) или для любого другого проекта, который у нас может быть. Обычно я собираю их в DLL, чтобы мы получили АКТУАЛЬНЫЕ элементы управления, которые мы можем перетаскивать с панели инструментов, затем я мог бы использовать внутреннее «универсальное» оформление и разрешить любое добавочное оформление, которое может потребоваться, а также предоставить несколько более изящных стилей, хорошо.

Это первый раз, когда я сделал это, или действительно, когда кто-то в нашем магазине сделал это, так что я как бы выясняю это по ходу дела. Я мог бы быть довольно далеким от базы, но надеюсь, что нет.

---

Правильно, идея для этого состоит в том, чтобы иметь "тему", которая на самом деле является просто файлом CSS и шаблоном jQuery. Я назвал их одинаковыми, и у меня есть свойство Theme в usercontrol, чтобы установить его.

Когда эти элементы управления будут завершены, я мог бы реорганизовать javascript в RegisterScriptBlock в коде, но пока они просто в тегах сценария на самом элементе управления.

То, что вызвало этот вопрос, было DebugBar для IE, давая мне предупреждения, что элементы ссылки не допускаются внутри div. Мне все равно, но, подумав об этом, я понятия не имел, как сделать ссылку на файл css без этого. Я очень кратко рассмотрел наличие «пустого» тега ссылки на главном сервере, а затем установил THAT в коде на Page_Load пользовательского элемента управления, но это просто похоже на задницу.

Я мог бы использовать @import, но я думаю, что теги ссылок предпочтительнее, верно?

Answer 1

Я думаю, что вы должны использовать Page.RegisterScriptBlock для регистрации ваших блоков скриптов. В лучшем случае они не должны быть встроены в ascx внутри блоков скрипта. Это не всегда возможно, но теоретически это лучший способ.

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

Answer 2

Похоже, вы катите свой собственный движок тем ... почему бы не использовать Темы ASP.NET?

Если вы решили сделать это самостоятельно, вот код из проекта CssFriendly , который может вас заинтересовать. (Я думаю, что можно публиковать код до тех пор, пока я цитирую, откуда он.) Файлы .css помечаются как встроенный ресурс, и приведенный ниже код используется для включения их по мере необходимости.

string filePath = page.ClientScript.GetWebResourceUrl(type, css);

// if filePath is not empty, embedded CSS exists -- register it
if (!String.IsNullOrEmpty(filePath))
{
    if (!Helpers.HeadContainsLinkHref(page, filePath))
    {
        HtmlLink link = new HtmlLink();
        link.Href = page.ResolveUrl(filePath);
        link.Attributes["type"] = "text/css";
        link.Attributes["rel"] = "stylesheet";
        page.Header.Controls.Add(link);
    }
}

Answer 3

Чтобы быть точным, у меня был бы файл import.css - структурируйте наименования классов в соответствии с вашими элементами управления и импортируйте стили в заголовке документа.

Если у вас есть модуль с именем «30DayPricingCalc», вы можете назвать классы / идентификаторы:

30DayPricingCalc.css

.30daypricingcalc_main_content
{
  ...
}

Также, если вы этого не сделаете, я бы настроил список универсальных стилей многократного использования, чтобы сэкономить вашу комнату. Поскольку элементы допускают несколько классов на объект.

Кроме того, теги ссылок теперь имеют гораздо меньшее значение, чем раньше. мы уже давно не поддерживаем браузеры поколения IE5, а IE6 поддерживает тег @import.

Ура!

Answer 4

Это зависит от того, насколько велико ваше приложение и зависит ли оно от Тем, где-либо еще, ИМХО.

Если вы используете файл .skin или большинство приложений также подключено к теме, вы можете также перейти к этой теме.

Но если вам нужно всего лишь несколько стилей, вам лучше установить таблицу стилей вручную, сохранить внешний CSS-файл (встроенные стили - это PITA и победить одну из основных целей CSS).

В любом случае, не забудьте установить атрибут CssClass для ваших элементов управления.