Ziehen und Ablegen über ReorderList (C#)

von Christian Wenz

PDF herunterladen

Das ReorderList-Steuerelement im AJAX Control Toolkit stellt eine Liste bereit, die vom Benutzer über Ziehen und Ablegen neu angeordnet werden kann. Die aktuelle Reihenfolge der Liste wird auf dem Server beibehalten.

Übersicht

Das ReorderList Steuerelement im AJAX Control Toolkit stellt eine Liste bereit, die vom Benutzer über Ziehen und Ablegen neu angeordnet 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. Am besten unterstützt es auch das Schreiben von Änderungen in der Reihenfolge des Listenelements zurück in den Datenspeicher.

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. Sie ist auch als separater Download verfügbar unter https://go.microsoft.com/fwlink/?LinkId=64064. Für dieses Beispiel wird davon ausgegangen, dass die Instanz der SQL Server 2005 Express Edition aufgerufen SQLEXPRESS wird und sich auf demselben Computer wie der Webserver befindet. Dies ist auch das Standardsetup. Wenn sich Das Setup unterscheidet, 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=en ). Stellen Sie eine Verbindung mit dem Server her, doppelklicken Sie auf Databases und erstellen Sie eine neue Datenbank (Rechtsklick und Auswahl von New Database) unter dem Namen Tutorials.

Erstellen Sie in dieser Datenbank eine neue Tabelle 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 (Klicken Sie hier, um das Bild in voller Größe anzuzeigen)

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

Die Anfangsdaten 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 deren Tabelle zu kommunizieren. Die Datenquelle muss die SELECT Befehle und UPDATE SQL-Befehle unterstützen. Wenn die Reihenfolge der Listenelemente später geändert wird, sendet 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> Und <ItemTemplate> Abschnitten kann das Layout der Liste fein abgestimmt werden. Außerdem ist die Datenbindung mithilfe 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-Stilinformationen, die im Abschnitt <DragHandleTemplate> des ReorderList Steuerelements referenziert ist, stellen sicher, dass sich der Mauszeiger entsprechend ändert, wenn er über den Ziehpunkt schwebt.

<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 durch die Werte in der position Spalte der Datenbank widergespiegelt, und das alles ohne jeglichen Code, nur mithilfe von Markup.

Die Daten in der Datenbank werden entsprechend der neuen Listenelementreihenfolge geändert (Klicken Sie hier, um das Bild in voller Größe anzuzeigen)