Перетаскивание с помощью элемента управления ReorderList (C#)

Кристиан Венц

Загрузить PDF-файл

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

Общие сведения

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

Этапы

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

В этом примере в качестве хранилища данных используется microsoft SQL Server 2005, экспресс-выпуск. База данных является необязательной (и бесплатной) частью установки Visual Studio, включая экспресс-выпуск. Он также доступен в виде отдельного скачивания в разделе https://go.microsoft.com/fwlink/?LinkId=64064. В этом примере предполагается, что экземпляр SQL Server 2005, экспресс-выпуск вызывается SQLEXPRESS и находится на том же компьютере, что и веб-сервер. Это также настройка по умолчанию. Если настройка отличается, необходимо адаптировать сведения о подключении для базы данных.

Самый простой способ настройки базы данных — использовать Microsoft SQL Server Management Studio Express (https://www.microsoft.com/downloads/details.aspx?FamilyID=c243a5ae-4bd1-4e3d-94b8-5a0f62bf7796& DisplayLang=en ). Подключитесь к серверу, дважды щелкните Databases и создайте новую базу данных (щелкните правой кнопкой мыши и выберите New Database) с именем Tutorials.

В этой базе данных создайте таблицу AJAX со следующими четырьмя столбцами:

• id (первичный ключ, целое число, удостоверение, а не NULL)
• char (char(1), NULL)
• description (varchar(50), NULL)
• position (int, NULL)

Макет таблицы AJAX (щелкните для просмотра полноразмерного изображения)

Затем заполните таблицу парой значений. Обратите внимание, что столбец position содержит порядок сортировки элементов.

Начальные данные в таблице AJAX (щелкните для просмотра полноразмерного изображения)

На следующем шаге необходимо создать элемент SqlDataSource управления для взаимодействия с новой базой данных и ее таблицей. Источник данных должен поддерживать SELECT команды SQL и UPDATE . При последующем изменении ReorderList порядка элементов списка элемент управления автоматически отправляет в команду источника Update данных два значения: новое положение и идентификатор элемента. Таким образом, источнику данных требуется <UpdateParameters> раздел для следующих двух значений:

<asp:SqlDataSource ID="sds" runat="server" ConnectionString="Data
 Source=(local)\SQLEXPRESS;Initial Catalog=Tutorials;Integrated Security=True"
 ProviderName="System.Data.SqlClient" OldValuesParameterFormatString="original_{0}"
 SelectCommand="SELECT [id], [char], [description], [position] FROM [AJAX] ORDER BY [position]"
 UpdateCommand="UPDATE [AJAX] SET position=@position WHERE [id]=@original_id">
 <UpdateParameters>
 <asp:Parameter Name="position" Type="Int32" />
 <asp:Parameter Name="original_id" Type="Int32" />
 </UpdateParameters>
</asp:SqlDataSource>

Элементу ReorderList управления необходимо задать следующие атрибуты:

• AllowReorder: можно ли переупорядочить элементы списка.
• DataSourceID: идентификатор источника данных.
• DataKeyField: имя столбца первичного ключа в источнике данных.
• SortOrderField: столбец источника данных, предоставляющий порядок сортировки для элементов списка.

<DragHandleTemplate> В разделах и <ItemTemplate> можно точно настроить макет списка. Кроме того, привязка данных возможна с помощью Eval() метода , как показано ниже:

<ajaxToolkit:ReorderList ID="rl1" runat="server" SortOrderField="position" 
 AllowReorder="true" DataSourceID="sds" DataKeyField="id">
 <DragHandleTemplate>
 <div class="DragHandleClass">
 </div>
 </DragHandleTemplate>
 <ItemTemplate>
 <asp:Label ID="ItemLabel" runat="server" Text='<%#Eval("description") %>' />
 </ItemTemplate>
</ajaxToolkit:ReorderList>

Следующие сведения о стиле CSS (на которые ссылается раздел <DragHandleTemplate>ReorderList элемента управления) гарантирует, что указатель мыши изменяется соответствующим образом при наведении указателя мыши на маркер перетаскивания:

<style type="text/css">
 .DragHandleClass
 {
 width: 12px;
 height: 12px;
 background-color: red;
 cursor:move;
 }
</style>

Наконец, ScriptManager элемент управления инициализирует ASP.NET AJAX для страницы:

<asp:ScriptManager ID="asm" runat="server" />

Запустите этот пример в браузере и немного измените порядок элементов списка. Затем перезагрузите страницу и (или) просмотрите базу данных. Измененные позиции были сохранены и также отражаются значениями в position столбце в базе данных, и все это без какого-либо кода, только с помощью разметки.

Данные в базе данных изменяются в соответствии с новым порядком элементов списка (щелкните для просмотра полноразмерного изображения)

НазадВперед