Как стать автором
Обновить

Еще раз про asp.net и jQuery

Время на прочтение 3 мин
Количество просмотров 2.4K

В своей статье ListView с разных сторон я описал некоторые техники, помогающие в работе с ListView в проектах asp.net. В этой заметке хотел бы описать еще одно решение задачи связанной с ListView. В статье важную роль, также, играет jQuery.

Описание проблемы


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

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

Постановка задачи


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

Решение


На самом деле на поиск решения проблемы у меня ушло около рабочего дня. Посредством размышлений и некоторых проб я отказался от решения на стороне сервера. Оставался вариант решить проблему на стороне клиента. В решении я использовал jQuery.

Для решения я использовал такую особенность asp.net как привязка данных (databinding). В разметку страницы, кроме требующегося checkbox, я добавил так же элемент TextBox, который привязал к полю updateDate.

Итак, в итоге я получил такое описание колонки в ListView:

<td>
  <input type="checkbox" class="updateDate" />
  <asp:Label runat="server" Text='<%# ((DateTime)Eval("updateDate")).ToShortDateString() %>'></asp:Label>
  <asp:TextBox ID="txtUpdateDate" CssClass="hide" runat="server" Text='<%# Bind("updateDate") %>' />
</td>
* This source code was highlighted with Source Code Highlighter.

Для пользователя информация о дате выводится через элемент Label, а введенный элемент TextBox скрывается через css-класс hide, который содержит только одно свойство: visibility: hidden;. Тут надо заметить, что установка для TextBox полей ReadOnly и Enabled не привели к требуемому результату. Именно поэтому этот элемент пришлось скрывать через CSS.

Для множественного сохранения изменений в ListView в данном проекте используется техника, описанная мной под названием «Редактирование и сохранение нескольких строк сразу» в статье ListView с разных сторон. Сохранение данных происходит, когда пользователь нажимает на странице «Сохранить все», представленное элементом LinkButton. Для обработки нажатия на стороне клиента я использовал стандартное свойство OnClientClick.

<asp:LinkButton ID="SaveList" runat="server" OnClientClick="return UpdateDates();"
  CommandName="Update" OnCommand="OnSaveAll_Command">Сохранить все</asp:LinkButton>


* This source code was highlighted with Source Code Highlighter.

Суть решения заключается в том, чтобы на стороне клиента незаметно изменить данные полученные связыванием. Это заставит ListView отправить такие данные на обновление, а дальше свою работу сделает триггер. Неизмененные связанные данные ListView не станет обновлять, даже если принудительно вызвать у ListView метод UpdateItem. Обновление так же не будет происходить, если связанный элемент управления содержит установленные свойства ReadOnly=«True» или Enabled=«False».

В последнюю очередь я приведу основной код, который и занимается решением проблемы. Тут все лавры достаются jQuery:

function UpdateDates() {
  $(«input:checkbox.updateDate»).each(function() {
    if (this.checked == true) {
      var today = new Date();
      $(this).parent().find(«input:text[@id$=txtUpdateDate]»)[0].value = today.getDate() + "." + today.getMonth() + "." + today.getFullYear();
    }
  });
  return true;
}


* This source code was highlighted with Source Code Highlighter.

После нажатия «Сохранить все», посредством jQuery происходит обход всех checkbox с классом updateDate. Проверяется выбран ли checkbox. В положительном случае происходит поиск соседнего с ним скрытого связанного элемента и ему присваивается полученное значение текущей даты.

Заключение


В статье приведено решение одной из поставленных в реальной жизни задач связанных с ListView. Как показала практика для решения задачи отлично подошла библиотека jQuery. Решение, впрочем, не претендует на совершенство и я с радостью выслушаю альтернативные способы.
Теги:
Хабы:
+24
Комментарии 32
Комментарии Комментарии 32

Публикации

Истории

Работа

.NET разработчик
64 вакансии

Ближайшие события

Московский туристический хакатон
Дата 23 марта – 7 апреля
Место
Москва Онлайн