Почему я не получаю никаких вкладок в простой демонстрации с использованием пользовательского интерфейса asp.net и jQuery?

Я не могу заставить свои вкладки работать, независимо от того, что я делаю. Демо очень простое и понятное, но я должен что-то упустить. Применяется CSS и вызывается функция $("#pnlTabs").tabs();, но ничего не происходит.

Пожалуйста, помогите мне, этот JS сводит меня с ума.

РЕДАКТИРОВАТЬ:

вот ссылка на zip-файл с полным решением http://dl.dropbox.com/u/12791555/HelpDeskControls.zip

РЕДАКТИРОВАТЬ2:

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


person Primoz    schedule 06.11.2010    source источник


Ответы (1)


Я подозреваю, что здесь может быть причиной искажения идентификатора.

Измените свой сценарий на этот и повторите попытку.

$(function () {
    $('#<%=pnlTabs.ClientID %>').tabs();
});

Поскольку спецификация HTML требует, чтобы идентификаторы элементов были уникальными в DOM, платформа ASP.NET пытается избежать возможности появления повторяющихся идентификаторов, переписывая идентификаторы, которые вы назначаете серверным элементам управления на странице. Если подумать, то в какой-то степени это имеет смысл, так как использование таких элементов управления, как, например, gridview, где у вас есть серверный элемент управления с идентификатором, который вы хотели бы повторить для каждого элемента в источнике данных, вы бы не хотели идентификатор также повторяется, так как это приведет к недопустимому HTML.

Любой элемент управления с интерфейсом INamingContainer создает новое пространство имен идентификаторов, которое приведет к искажению идентификатора элемента на стороне клиента. * Используя приведенную выше разметку, мы можем получить идентификатор, который будет сгенерирован в ответе, отправленном клиенту, выведенном на страницу в вызове функции jQuery.

*ASP.NET 4 можно настроить так, чтобы идентификаторы не изменялись, на свой страх и риск!

ИЗМЕНИТЬ:

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

Кажется, что вам не хватает большого куска CSS, необходимого для стилизации вкладок, и именно классы CSS управляют некоторым поведением вкладок. Если вы вставите ссылку на CSS-тему jQuery UI, размещенную в Google API, все будет работать правильно. Я добавил следующее после ссылки на вашу таблицу стилей CSS

<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>

и все, казалось, работало, как ожидалось.

Кстати, вам может быть интересно попробовать ASP.NET MVC — по моему личному мнению, после года использования, если бы у меня был выбор, я бы не стал возвращаться к веб-формам. Если вы знакомы с HTML, CSS и JavaScript, вы можете найти его более интуитивно понятным, чем использование веб-форм :)

person Russ Cam    schedule 06.11.2010
comment
Вы уверены ? Это то, что я вижу с firebug. ‹div id=pnlProcesses class=ui-tabs-panel ui-widget-content ui-corner-bottom› - person Primoz; 07.11.2010
comment
+1: обратите внимание, что ASP.NET 4 теперь поддерживает статическое именование идентификатора клиента. - person Phil Hunt; 07.11.2010
comment
Размещенный здесь код представляет собой упрощенную версию решения. Так что есть некоторые различия, но я не вижу ошибки. В решении я учитываю искажение имени asp.net. - person Primoz; 07.11.2010
comment
Спасибо большое за помощь. Я ненавижу HTML, CSS и JavaScript, и я делаю это, потому что должен :( Я больше разбираюсь в настольных приложениях (C#, delphi, C++). - person Primoz; 07.11.2010
comment
Еще один вопрос. Когда вы нажимаете вкладку «Сервисы или события», возможно ли, что вызывается функция из кода программной части? Допустим, когда я нажимаю на вкладку событий, вызывается та же функция, что и при нажатии кнопки «Загрузить». - person Primoz; 07.11.2010
comment
да, можно вызвать метод на стороне сервера (я полагаю, вы имеете в виду без перезагрузки всей страницы, т.е. через AJAX) - самый популярный способ сделать это в веб-формах ASP.NET - с помощью методов страницы или веб-служб. Проверьте stackoverflow.com/questions/897408/, поскольку вы уже используете jQuery, для этого можно использовать метод $.ajax(). - person Russ Cam; 07.11.2010
comment
@Russ Cam Спасибо за ссылку, я проверил, очень интересно. Но сейчас я просто хочу вызвать protected void btnLoad_Click (отправитель объекта, EventArgs e) со всеми обратными передачами, перезагрузкой страницы и другими вещами. - person Primoz; 07.11.2010
comment
@Primoz - в этом случае вам нужно каким-то образом сообщить серверу, какая вкладка была видна / будет видна при обратной передаче, чтобы соответствующие классы CSS можно было применить к этому элементу списка в ответе. возвращается пользователю. Возможно, самым простым способом было бы использовать скрытый элемент управления вводом и изменить значение на стороне клиента на вкладку, которая будет видна при щелчке элемента списка. - person Russ Cam; 07.11.2010
comment
Да, но как вызвать этот метод protected void btnLoad_Click (отправитель объекта, EventArgs e) в первую очередь? - person Primoz; 07.11.2010
comment
Вам нужно привязать метод к событию щелчка в маркированном списке, так же, как вы сделали это с другими кнопками. На стороне клиента должен быть выведен некоторый клиентский скрипт, чтобы заставить эту работу работать, подобно __doPostBack('OsControl_pnlTabs', 'index'), где 'index' будет индексом элемента списка, на который нажали, и привязывается к свойству BulletedListEventArgs.Index на стороне сервера в обработчике событий. Что вы можете обнаружить при использовании вкладок jQuery, так это то, что они предотвращают действие по умолчанию для элемента привязки внутри каждого элемента списка... - person Russ Cam; 07.11.2010
comment
так как действие по умолчанию для элемента привязки — сделать HTTP-запрос GET обратно на сервер. Таким образом, чтобы заставить это работать, может потребоваться, чтобы вы подключили скрипт на стороне клиента вручную или не использовали плагин вкладок jQuery и не обрабатывали все со стороны сервера. Плагин jQuery tabs предназначен для большей работы с точки зрения «отсутствия необходимости выполнять полную обратную передачу страницы на сервер», что на самом деле не очень хорошо отображается, когда вы хотите использовать ее с полной обратной передачей страницы. - person Russ Cam; 07.11.2010