2010-01-10 5 views
3

Я борюсь с чем-то, что, по моему мнению, должно быть стандартной практикой. У меня есть несколько пользовательских элементов управления, в которых используются некоторые плагины JQuery. Я действительно не хочу ссылаться на дополнительные файлы CSS и JS с моей главной главной страницы, так как это может вызвать дополнительную нагрузку для пользователя при первом запуске сайта (по общему признанию, это будет только один раз), поэтому я просто установил они соединяются в верхнюю часть пользовательского элемента управления. Затем я посмотрел на свой исходный HTML-код, не так ли! Еще хуже для элементов управления, которые повторяются несколько раз на странице.вводят код в masterpage/html head из пользовательского элемента управления

Так что я думал, что есть способ впрыскивать их в Главу страницы, когда они необходимы из User Control. В этом отношении есть ли способ сделать это для нижнего колонтитула для вещей JS?

ответ

8

Чтобы динамически зарегистрировать скрипт (и убедитесь, что дубликаты сливаются) в ASP.NET вы можете позвонить:

Page.ClientScript.RegisterClientScriptInclude(
    "mykey", "~/scripts/jquery-1.3.2.js"); 

и прочитать полную информацию об этом методе на MSDN.

Для добавления CSS динамически вы можете сделать что-то вроде этого:

HtmlLink cssLink = new HtmlLink(); 
cssLink.Href = "path to CSS"; 
cssLink.Attributes["some attr1"] = "some value1"; 
cssLink.Attributes["some attr2"] = "some value2"; 
Page.Header.Controls.Add(cssLink); 

Этот пример инъекционного CSS не будет объединять повторяющиеся записи. Чтобы избежать дублирования, вам придется самостоятельно отслеживать дубликаты. Одно место, где вы можете сохранить список скриптов, которые вы уже зарегистрировали, находится в HttpContext.Items. Придерживайтесь HashSet там, где хранится список всех зарегистрированных скриптов, чтобы вы не регистрировали один и тот же файл CSS дважды (что вообще безопасно, но что-то избегать в любом случае).

+0

Этот подход является разумным, за исключением того, что можно добавить несколько экземпляров одного и того же файла CSS. Например, если один и тот же элемент управления существует более одного раза на одной странице. – RickNZ

+0

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

+0

Любите фрагмент кода относительно HttpContext.Items. Никогда не замечал этого, пока не прочитал свой пост. Спасибо, что поделились Эйлоном! – RichardB

0

Предполагаю, вы используете Asp.NET.

Попробуйте положить содержание заполнитель в в MasterPage ...

<head> 
<asp:ContentPlaceHolder ID="AdditionalPageHeader" /> 
</head> 

Если вы работаете в файле ASPX или ASCX вам нужно только определить элемент управления содержимым ...

<asp:Content ContentPlaceHolderID="AdditionalPageHeader" /> 

Если вы работаете на код-за только тип управления сервером, вы можете можете получить указатель на этот держатель содержания места:

this.Page.Master.FindControl("AdditionalPageHeader") 

... и программно обрабатывайте его содержимое.

+1

Интересное решение. Только одна проблема с ее частью: вы не можете определять элементы управления содержимым в пользовательских элементах управления. Они могут использоваться только на страницах содержимого ASPX. – Eilon

+0

Моя первая мысль заключалась в том, чтобы добавить это в голову, но Эйлон указывает, что я не могу получить доступ к нему из UserControl декларативно. – Jon

0

Для добавления стилей или JavaScript (встроенный или нет) динамическую я написал эти три функции:

Public Function addScript(ByVal path2js As String) As System.Web.UI.Control 
    Dim si As New HtmlGenericControl 
    si.TagName = "script" 
    si.Attributes.Add("type", "text/javascript") 
    si.Attributes.Add("src", path2js) 
    Return si 
    End Function 
    Public Function addScript_inline(ByVal js As String) As System.Web.UI.Control 
    Dim si As New HtmlGenericControl 
    si.TagName = "script" 
    si.Attributes.Add("type", "text/javascript") 
    si.InnerHtml = js 
    Return si 
    End Function 
    Public Function addStyle(ByVal path2css As String) As System.Web.UI.Control 
    Dim css As New HtmlLink 
    css.Href = path2css 
    css.Attributes.Add("rel", "stylesheet") 
    css.Attributes.Add("type", "text/css") 
    css.Attributes.Add("media", "all") 
    Return css 
    End Function 

я называю их в Page_Load на мой MasterPage, как это:

Me.Page.Header.Controls.Add(modGlobal.addScript("script/json/json2.js")) 

или

Me.Page.Header.Controls.Add(modGlobal.addStyle("style/flexigrid/flexigrid.css")) 

С уважением

1

Вы можете использовать ClientScript.RegisterClientScriptInclude() для JavaScript.

Для CSS один трюк состоит в том, чтобы включить их в свою главную страницу, но с Visible="false", чтобы они не отображались в разметке по умолчанию.

Затем в пользовательских элементах управления установите флаг в коллекции Items, начиная с раннего события, например OnLoad(). Например, this.Context.Items["mycss"] = true;

Наконец, на вашей главной странице, начиная с более позднего события, например OnPreRender(), проверьте, установлены ли эти флаги. Если они есть, то установите для свойства Visible значение true для соответствующего CSS.

Это также позволяет использовать элемент управления с главными страницами, которые не используют CSS, поскольку записи элементов можно просто игнорировать. Если у вас много мастер-страниц, которые требуют такого же поведения, вы можете поместить этот код в базовый класс или использовать вложенные мастер-страницы.

1

Я придерживался аналогичного подхода, но я использую CSS непосредственно в пользовательском элементе управления, поэтому мне не нужно импортировать файл CSS. Ниже приведено код полностью из пользовательского элемента управления образцом:

<style id="style1" type="text/css" visible="false" runat="server"> 
    td { font-family: Tahoma; font-size: 8pt; } 
</style> 

В фоновом коде:

protected override void OnLoad(EventArgs e) 
{ 
    base.OnLoad(e); 

    HtmlGenericControl style = new HtmlGenericControl("style"); 
    style.Attributes.Add("type", "text/css"); 
    style.InnerHtml = style1.InnerHtml; 
    Page.Header.Controls.Add(style); 
} 

Вы заметите, что CSS отображаются в главном теге, а не внутри тела тега.

Смежные вопросы