Freigeben über

Drag & Drop über ReorderList (C#)

  • Artikel

von Christian Wenz

PDF herunterladen

Das ReorderList-Steuerelement im AJAX Control Toolkit stellt eine Liste bereit, die vom Benutzer per Drag and Drop neu sortiert werden kann. Die aktuelle Reihenfolge der Liste wird auf dem Server beibehalten.

Überblick

Das ReorderList Steuerelement im AJAX Control Toolkit stellt eine Liste bereit, die vom Benutzer per Drag and Drop neu sortiert werden kann. Die aktuelle Reihenfolge der Liste wird auf dem Server beibehalten.

Schritte

Das ReorderList Steuerelement unterstützt das Binden von Daten aus einer Datenbank an die Liste. Das Beste ist, dass es auch das Schreiben von Änderungen an der Reihenfolge des Listenelements zurück in den Datenspeicher unterstützt.

In diesem Beispiel wird Microsoft SQL Server 2005 Express Edition als Datenspeicher verwendet. Die Datenbank ist ein optionaler (und kostenloser) Teil einer Visual Studio-Installation, einschließlich express Edition. Es ist auch als separater Download unter https://go.microsoft.com/fwlink/?LinkId=64064verfügbar. Für dieses Beispiel wird davon ausgegangen, dass der instance des SQL Server 2005 Express Edition aufgerufen SQLEXPRESS wird und sich auf demselben Computer wie der Webserver befindet. Dies ist auch das Standardsetup. Wenn ihr Setup unterschiedlich ist, müssen Sie die Verbindungsinformationen für die Datenbank anpassen.

Die einfachste Möglichkeit zum Einrichten der Datenbank ist die Verwendung von Microsoft SQL Server Management Studio Express (https://www.microsoft.com/downloads/details.aspx?FamilyID=c243a5ae-4bd1-4e3d-94b8-5a0f62bf7796& DisplayLang=de ). Stellen Sie eine Verbindung mit dem Server her, doppelklicken Sie darauf Databases , und erstellen Sie eine neue Datenbank (klicken Sie mit der rechten Maustaste, und wählen Sie ) New Databasemit dem Namen Tutorialsaus.

Erstellen Sie in dieser Datenbank eine neue Tabelle namens AJAX mit den folgenden vier Spalten:

  • id (Primärschlüssel, ganze Zahl, Identität, nicht NULL)
  • char (char(1), NULL)
  • description (varchar(50), NULL)
  • position (int, NULL)

Das Layout der AJAX-Tabelle

Das Layout der AJAX-Tabelle (Klicken Sie hier, um das vollständige Bild anzuzeigen)

Füllen Sie als Nächstes die Tabelle mit ein paar Werten aus. Beachten Sie, dass die position Spalte die Sortierreihenfolge der Elemente enthält.

Die anfänglichen Daten in der AJAX-Tabelle

Die anfänglichen Daten in der AJAX-Tabelle (Klicken Sie hier, um das bild in voller Größe anzuzeigen)

Im nächsten Schritt muss ein SqlDataSource Steuerelement generiert werden, um mit der neuen Datenbank und der zugehörigen Tabelle zu kommunizieren. Die Datenquelle muss die SELECT SQL-Befehle und UPDATE unterstützen. Wenn die Reihenfolge der Listenelemente später geändert wird, übermittelt das ReorderList Steuerelement automatisch zwei Werte an den Befehl der Datenquelle Update : die neue Position und die ID des Elements. Daher benötigt die Datenquelle einen <UpdateParameters> Abschnitt für diese beiden Werte:

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

Das ReorderList Steuerelement muss die folgenden Attribute festlegen:

  • AllowReorder: Gibt an, ob die Listenelemente neu angeordnet werden können
  • DataSourceID: Die ID der Datenquelle
  • DataKeyField: Der Name der Primärschlüsselspalte in der Datenquelle
  • SortOrderField: Die Datenquellenspalte, die die Sortierreihenfolge für die Listenelemente bereitstellt

In den <DragHandleTemplate> Abschnitten und <ItemTemplate> kann das Layout der Liste optimiert werden. Außerdem ist die Datenbindung mit der Eval() -Methode möglich, wie hier gezeigt:

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

Die folgenden CSS-Formatinformationen (auf die <DragHandleTemplate> im Abschnitt des ReorderList Steuerelements verwiesen wird) stellen sicher, dass sich der Mauszeiger entsprechend ändert, wenn er über den Ziehpunkt bewegt wird:

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

Schließlich initialisiert ein ScriptManager Steuerelement ASP.NET AJAX für die Seite:

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

Führen Sie dieses Beispiel im Browser aus, und ordnen Sie die Listenelemente ein wenig neu an. Laden Sie dann die Seite neu und/oder sehen Sie sich die Datenbank an. Die geänderten Positionen wurden beibehalten und werden auch von den Werten in der position Spalte in der Datenbank widerspiegelt, und zwar ohne Code, nur mithilfe von Markup.

Die Daten in der Datenbank ändern sich entsprechend der neuen Listenelementreihenfolge

Die Daten in der Datenbank ändern sich gemäß der neuen Listenelementreihenfolge (Klicken Sie hier, um das Bild in voller Größe anzuzeigen).

ZurückWeiter