Przeciąganie i upuszczanie za pomocą kontrolki ReorderList (VB)

Autor: Christian Wenz

Pobierz plik PDF

Kontrolka ReorderList w zestawie narzędzi AJAX Control Toolkit udostępnia listę, którą użytkownik może zmienić kolejność 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ą użytkownik może zmienić kolejność 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. Co najlepsze, obsługuje również zapisywanie zmian w kolejności elementu listy z powrotem do magazynu danych.

W tym przykładzie użyto SQL Server 2005 Express Edition firmy Microsoft 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ż konfiguracja domyślna. Jeśli konfiguracja jest inna, 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ść, a nie wartość NULL)
• char (char(1), NULL)
• description (varchar(50), NULL)
• position (int, NULL)

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 zawiera kolejność sortowania elementów.

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

Następny krok wymaga wygenerowania kontrolki w celu komunikowania się z nową bazą SqlDataSource 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ć ponownie rozmieszczane
• DataSourceID: identyfikator źródła danych
• DataKeyField: nazwa kolumny klucza podstawowego w źródle danych
• SortOrderField: kolumna źródła danych, która zapewnia kolejność sortowania elementów listy

<DragHandleTemplate> W sekcjach i <ItemTemplate> układ listy można dostosować. Ponadto powiązanie 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 (do których odwołuje się <DragHandleTemplate> sekcja ReorderList kontrolki) zapewniają, że wskaźnik myszy zmienia się odpowiednio po umieszczeniu wskaźnika myszy 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 nieco zmień rozmieszczenie elementów listy. 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 wszystkie bez żadnego kodu, tylko przy użyciu znaczników.

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

Poprzednie