Улучшенный элемент Javascript на главных страницах ASP.NET
Я столкнулся с небольшой проблемой, и я немного покопался, но изо всех сил пытаюсь придумать окончательный ответ / исправление.
По сути, у меня есть некоторый javascript (созданный третьей стороной), который делает некоторые вещи для элементов страницы, чтобы они выглядели красиво. Код отлично работает на отдельных страницах (т.е. без мастера), однако, когда я пытаюсь применить эффекты к странице содержимого в мастере, он не работает.
Короче говоря, у меня есть главная страница, которая содержит основную ссылку на скрипт. Все страницы будут использовать скрипт, но переданные ему параметры будут отличаться для страниц с содержанием.
Справочник по сценарию главной страницы
<script src = "scripts.js" language = "javascript" type = "text/javascript" />
Одна страница
<script>
MakePretty("elementID");
</script>
Как видите, мне нужна ссылка на каждой странице (следовательно, она находится в мастере), но фактические элементы, которые я хочу «MakePretty», будут меняться в зависимости от содержимого.
Контентные страницы
Теперь, из-за того, что на странице содержимого нет элемента <head>, я использовал следующий код, чтобы добавить его к элементу <head> главных страниц:
HtmlGenericControl ctl = new HtmlGenericControl("script");
ctl.Attributes.Add("language", "javascript");
ctl.InnerHtml = @"MakePretty(""elementID"")";
Master.Page.Header.Controls.Add(ctl);
Теперь это не работает. Однако, если я заменю что-то простое, например alert("HI!"), все будет работать нормально. Итак, код добавляется нормально, просто кажется, что он не всегда выполняется в зависимости от того, что он делает ...
Теперь, покопавшись, я узнал, что событие Load страницы содержимого возникает перед главными страницами, что может иметь эффект, однако я думал, что javascript на странице был загружен / запущен сразу?
Простите меня, если это глупый вопрос, но я все еще относительно новичок в использовании javascript, особенно в сценарии главных страниц.
Как я могу заставить страницы содержимого вызывать код javascript, на который есть ссылка на главной странице?
Спасибо за любую / всю помощь этим ребятам, вы действительно поможете мне с этой рабочей проблемой.
НОТЫ:
RegisterStartupScriptи подобные вроде не работают ни на каком уровне ..- Идентификаторы элементов управления устанавливаются нормально даже в среде MasterPage и отображаются должным образом.
Приносим извинения, если что-то из этого неясно, я очень устал, поэтому, если нужно, прокомментируйте, требуется ли повторное слово / разъяснение.
Ответы 5
Разве нельзя обойтись чистым javascript? -)
- просто добавьте что-то подобное внутри тега body:
<script type = "text/javascript">
window.onload = function(){
MakePretty("elementID");
}
</script>
Кстати, тег скрипта должен иметь закрывающий тег:
<script type = "text/javascript" src = "myScript.js"></script>
Поместите ContentPlaceHolder в раздел заголовка главной страницы, затем добавьте элемент управления asp: Content на страницу содержимого, ссылаясь на заполнитель, и поместите свой скрипт в этот элемент управления. Таким образом вы можете настроить его для каждой страницы.
Кроме того, ссылка по идентификатору может не работать, поскольку при использовании главных страниц идентификаторы элементов управления на странице автоматически создаются на основе структуры контейнера. Таким образом, вместо «elementID», как ожидалось, он может выводить «ctl00_MainContentPlaceHolder_elementID». Просмотрите свой источник или используйте firebug для проверки ваших элементов формы, чтобы увидеть, каковы выведенные идентификаторы.
После использования мастер-страниц идентификаторы элементов управления на стороне клиента не такие, как вы думаете. При создании сценария следует использовать Control.ClientID.
Вопрос обновлен, чтобы включить точку на идентификаторах, они устанавливаются нормально.
Почему бы не использовать jQuery для поиска всех элементов управления? Что-то вроде этого:
$(document).ready(function(){
$("input[type='text'], input[type='radio'], input[type='checkbox'], select, textarea").each(function(){
MakePretty(this);
});
});
Таким образом вы получите все элементы на странице, вы можете подождать, пока страница будет готова (чтобы вы не изменили DOM незаконно). Селектор jQuery может получить элементы в более конкретном формате, если вам нужно (т. Е. Добавить корневой элемент, например идентификатор основного блока div).
Также было бы лучше изменить метод MakePretty, чтобы он принимал в качестве параметра элемент, а не идентификатор, чтобы уменьшить накладные расходы на обработку.
При использовании главных страниц нужно быть осторожным с идентификатором атрибута html, поскольку .NET изменит это значение, так как ему необходимо сохранить уникальные идентификаторы.
Я предполагаю, что ваш javascript применяет стили css через идентификатор, и когда вы используете главные страницы, идентификатор отличается от того, что находится в вашем aspx. Если вы убедитесь, что ваш javascript всегда добавляется, ваш ответ должен учитывать следующее:
- ВСЕГДА устанавливайте идентификатор главной страницы при загрузке страницы (this.ID = "myPrefix";)
- Любой элемент HTML на вашей главной странице будет иметь префикс идентификатора главной страницы (т. Е .: на отображаемой странице будет "myPrefix_myDiv")
- Любой HTML-элемент в вашем идентификаторе заполнителя содержимого будет иметь префикс с дополнительным префиксом (например, myPrefix_ContentPlaceHolderId1_myDiv)
Пожалуйста, дайте мне знать, если я могу что-нибудь уточнить. Надеюсь это поможет!
Этот совет действительно помог мне найти хороший путь к достижению этой цели, а также сделать код более элегантным при повторном использовании (т.е. ссылка на главную страницу и возможность делать индивидуальные вызовы на основе содержимого. Спасибо, я ценить это!