рендеринг нескольких календарей раздувает HTML, тянет вниз страницу

Question

примечание: я использую элемент управления Infragistics, потому что это унаследованный устаревший код, но я не перезаписываю его с помощью элемента управления ASP.NET, если это лучшее решение.

У меня есть элемент управления Repeater, который использует Infragistics WebDateChooser для выбора даты записи. Допустим, каждый элемент в Repeater представляет клиента, и я выбираю дату активации или что-то в этом роде. Это может быть в любое время в прошлом, настоящем или будущем.

Когда вы отображаете этот элемент управления 20 раз, он записывает весь тяжелый html для отображения всех дат (названия месяцев, дней недели и т. Д.) 20 раз и резко раздувает html. Это заставляет браузер по-настоящему бороться с отображением страницы в любое разумное время, даже для 20 записей (подкачка реализована на ретрансляторе только для предотвращения сбоя браузера на массивной странице). Это также верно в меньшей (но все же существенной) степени со стандартным элементом управления календарем ASP.NET.

То, что я ищу, это способ сделать так, чтобы все 20 селекторов даты использовали ресурсы 1 календаря, чтобы им не приходилось отображать свои собственные строки и дерьмо для отображения подробных дат.

EDIT: Я понимаю, что многие пользователи не использовали Infragistics, но это все равно, что и стандарт, встроенный в ASP: управление календарем. Поместите один в повторитель и отобразите n> 20 раз. При рендеринге отключается браузер.

Кроме того, просто чтобы прояснить этот вопрос для любого потенциального решения, эта кодовая база находится на .NET 2.0 и должна поддерживать IE6.

Answer 1

Если вы ищете Datepiker, который вызывается и отображается в каждом поле даты в сетке, то вызов календаря JavaScript является наиболее эффективным. Проверьте календарь JQuery UI и просто вызовите каждое поле - см .: jqueryui.com/demos/.

HTML - обратите внимание, что класс один и тот же, а идентификатор другой:

<input type="text" class="datepicker" id="d1" />
<input type="text" class="datepicker" id="d2" />

JQuery затем выбирает класс css:

$(.datepicker.each(function() {
  $(this).datepicker();
});

Более старое решение ASP.Net предназначено для объявления и динамического создания элемента управления на сервере, когда срабатывает даже щелчок. Есть много примеров этого на многих блогах. Или 20 из них могут быть созданы при загрузке страницы и помещены в сетку данных или что-то еще. Но что если сетка данных имеет 100 записей? Это не может масштабироваться.

Но в наборе инструментов управления AJAX есть календарь, который создается один раз на панели, а затем эта панель отображается там, где вы говорите. Это один календарь, показанный много раз.

<asp:Panel ID="panelCal" runat="server">      
  <asp:UpdatePanel ID="update" runat="server">           
    <ContentTemplate>   
    <asp:Calendar ID="theonlyCal"runat="server"/>           
    </ContentTemplate>      
  </asp:UpdatePanel>
</asp:Panel>

Теперь скажем, что есть 20 строк:

<asp:TextBox ID="twenty" runat="server" /> 

Теперь для каждого текстового поля требуется расширение всплывающего элемента управления.

<ajaxToolkit:PopupControlExtenderID="twentExtenders"runat="server"
TargetControlID="twenty"
PopupControlID="panelCal" 
Position="Bottom" /> 

ASP.NET AJAX может использовать большую пропускную способность.

Answer 2

Еще одна вещь, которую вы могли бы рассмотреть, это иметь один экземпляр календаря на странице. Когда пользователь щелкает текстовое поле, которое «активирует» календарь, вы можете использовать клиентский JavaScript-каркас, такой как jquery, чтобы показать календарь и переместить его в правильное ожидаемое положение. После того, как дата выбрана, сохраните выбранную дату в правильном текстовом поле и снова скройте календарь. Вам придется написать немного javascript, но это лучше, чем загрузить все лишнее!

Answer 3

Хорошо, пример на Инфраструктура определенно показывает, что элемент управления был создан для повторного использования, как это. Конечно, они не используют повторитель, но в итоге все работает одинаково. Я хотел бы посмотреть, как UltraGridColumn работает с WebDateChooser для отображения выпадающего списка. Конечно, это не поможет с более общей проблемой. Для этого я бы сделал, как говорят другие, создал один элемент управления и использовал бы javascript для отображения его там, где это необходимо, когда это необходимо.
Если вы действительно не хотите писать какой-либо javascript самостоятельно, вы можете воспользоваться инструментарием. Вы можете создать экземпляр любого календаря (не выпадающей версии) и использовать modalpopup AjaxControlToolkit, WebDialogWindow от Infragistic или что-то подобное (возможно, с меньшим количеством диалогов и более плавным) для его отображения.

В конце концов все варианты имеют одну общую черту. Они создают один календарь за пределами повторителя и отображают этот экземпляр календаря по требованию.

Answer 4

Хотя он не объединяется в один экземпляр элемента управления, вы можете использовать CalendarExtender, который поставляется с AjaxControlToolkit. Я только что построил небольшой пример на своей машине, и он не сильно тянул страницу вниз.

Answer 5

Я не использовал используемый вами элемент управления, поэтому не могу сказать, будет ли он работать для вас, но я настоятельно рекомендую: http://www.dynarch.com/projects/calendar/ Это календарь javascript, поэтому пользователь будет загружать только js-файлы один раз , После этого вызовы создания - это всего несколько строк.

Он не сразу «перетаскивает» совместимость с ASP.Net. Я рекомендую обернуть его в пользовательский элемент управления.