Udostępnij za pośrednictwem

Przeciąganie i upuszczanie za pomocą kontrolki ReorderList (C#)

  • Artykuł

Autor: Christian Wenz

Pobierz plik PDF

Kontrolka ReorderList w zestawie narzędzi AJAX Control Toolkit udostępnia listę, którą można zmienić kolejność przez użytkownika za pomocą przeciągania i upuszczania. Bieżąca kolejność listy jest utrwalana na serwerze.

Omówienie

Kontrolka ReorderList w zestawie narzędzi AJAX Control Toolkit udostępnia listę, którą można zmienić kolejność przez użytkownika za pomocą przeciągania i upuszczania. Bieżąca kolejność listy jest utrwalana na serwerze.

Kroki

Kontrolka ReorderList obsługuje powiązanie danych z bazy danych do listy. Najlepiej jest również zapisywać zmiany w kolejności elementu listy z powrotem do magazynu danych.

W tym przykładzie użyto usługi Microsoft SQL Server 2005 Express Edition jako magazynu danych. Baza danych jest opcjonalną (i bezpłatną) częścią instalacji programu Visual Studio, w tym wersji express. Jest on również dostępny jako oddzielny plik do pobrania w obszarze https://go.microsoft.com/fwlink/?LinkId=64064. W tym przykładzie przyjęto założenie, że wystąpienie SQL Server 2005 Express Edition jest wywoływane SQLEXPRESS i znajduje się na tej samej maszynie co serwer internetowy. Jest to również domyślna konfiguracja. Jeśli konfiguracja się różni, musisz dostosować informacje o połączeniu dla bazy danych.

Najprostszym sposobem skonfigurowania bazy danych jest użycie usługi Microsoft SQL Server Management Studio Express (https://www.microsoft.com/downloads/details.aspx?FamilyID=c243a5ae-4bd1-4e3d-94b8-5a0f62bf7796& DisplayLang=en ). Połącz się z serwerem, kliknij dwukrotnie i utwórz nową bazę danych (kliknij prawym przyciskiem myszy Databases i wybierz polecenie New Database) o nazwie Tutorials.

W tej bazie danych utwórz nową tabelę o nazwie AJAX z następującymi czterema kolumnami:

  • id (klucz podstawowy, liczba całkowita, tożsamość, nie null)
  • char (char(1), NULL)
  • description (varchar(50), NULL)
  • position (int, NULL)

Układ tabeli AJAX

Układ tabeli AJAX (kliknij, aby wyświetlić obraz pełnowymiarowy)

Następnie wypełnij tabelę kilkoma wartościami. Należy pamiętać, że kolumna position przechowuje kolejność sortowania elementów.

Początkowe dane w tabeli AJAX

Początkowe dane w tabeli AJAX (kliknij, aby wyświetlić obraz pełnowymiarowy)

Następny krok wymaga wygenerowania SqlDataSource kontrolki w celu komunikowania się z nową bazą danych i jej tabelą. Źródło danych musi obsługiwać SELECT polecenia i UPDATE SQL. Gdy kolejność elementów listy zostanie później zmieniona, ReorderList kontrolka automatycznie przesyła dwie wartości do polecenia źródła Update danych: nowe położenie i identyfikator elementu. W związku z tym źródło danych wymaga <UpdateParameters> sekcji dla tych dwóch wartości:

<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>

Kontrolka ReorderList musi ustawić następujące atrybuty:

  • AllowReorder: czy elementy listy mogą być zmieniane
  • DataSourceID: identyfikator źródła danych
  • DataKeyField: nazwa kolumny klucza podstawowego w źródle danych
  • SortOrderField: Kolumna źródła danych, która udostępnia kolejność sortowania elementów listy

W sekcjach <DragHandleTemplate> i <ItemTemplate> układ listy można dostosować. Ponadto łączenie danych jest możliwe przy użyciu Eval() metody , jak pokazano tutaj:

<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>

Następujące informacje o stylu CSS (przywoływne w <DragHandleTemplate> sekcji ReorderList kontrolki) zapewniają, że wskaźnik myszy zmienia się odpowiednio po umieszczeniu kursora na uchwytie przeciągania:

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

Na koniec kontrolka inicjuje ScriptManager ASP.NET AJAX dla strony:

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

Uruchom ten przykład w przeglądarce i zmień kolejność elementów listy nieco. Następnie załaduj ponownie stronę i/lub przyjrzyj się bazie danych. Zmienione pozycje zostały zachowane i są również odzwierciedlane przez wartości w kolumnie w position bazie danych i że wszystkie bez żadnego kodu, tylko przy użyciu znaczników.

Dane w bazie danych zmieniają się zgodnie z nową kolejnością elementów listy

Dane w bazie danych zmieniają się zgodnie z nową kolejnością elementów listy (kliknij, aby wyświetlić obraz pełnowymiarowy)

WsteczDalej