Sdílet prostřednictvím

Přetažení ovládacím prvkem ReorderList (C#)

  • Článek

Christian Wenz

Stáhnout PDF

Ovládací prvek ReorderList v sadě nástrojů AJAX Control Toolkit poskytuje seznam, který může uživatel změnit jeho pořadí přetažením. Aktuální pořadí seznamu musí být zachováno na serveru.

Přehled

Ovládací ReorderList prvek v sadě nástrojů AJAX Control Toolkit poskytuje seznam, který může uživatel přetáhnout myší. Aktuální pořadí seznamu musí být zachováno na serveru.

Postup

Ovládací ReorderList prvek podporuje vazbu dat z databáze na seznam. Nejlepší na tom je, že podporuje také zápis změn pořadí prvku list zpět do úložiště dat.

V této ukázce se jako úložiště dat používá Microsoft SQL Server 2005 Express Edition. Databáze je volitelnou (a bezplatnou) součástí instalace sady Visual Studio, včetně expresní edice. Je také k dispozici jako samostatný soubor ke stažení v části https://go.microsoft.com/fwlink/?LinkId=64064. U této ukázky předpokládáme, že instance SQL Server 2005 Express Edition je volána SQLEXPRESS a nachází se na stejném počítači jako webový server. Jedná se také o výchozí nastavení. Pokud se vaše nastavení liší, musíte upravit informace o připojení k databázi.

Nejjednodušší způsob, jak databázi nastavit, je použít Microsoft SQL Server Management Studio Express (https://www.microsoft.com/downloads/details.aspx?FamilyID=c243a5ae-4bd1-4e3d-94b8-5a0f62bf7796& DisplayLang=en ). Připojte se k serveru, poklikejte na Databases a vytvořte novou databázi (klikněte pravým tlačítkem a zvolte New Database) s názvem Tutorials.

V této databázi vytvořte novou tabulku s názvem AJAX s následujícími čtyřmi sloupci:

  • id (primární klíč, celé číslo, identita, ne NULL)
  • char (char(1), NULL)
  • description (varchar(50), NULL)
  • position (int, NULL)

Rozložení tabulky AJAX

Rozložení tabulky AJAX (kliknutím zobrazíte obrázek v plné velikosti)

V dalším kroku vyplňte tabulku několika hodnotami. Všimněte si position , že sloupec obsahuje pořadí řazení prvků.

Počáteční data v tabulce AJAX

Počáteční data v tabulce AJAX (kliknutím zobrazíte obrázek v plné velikosti)

Další krok vyžaduje vygenerování SqlDataSource ovládacího prvku pro komunikaci s novou databází a její tabulkou. Zdroj dat musí podporovat příkazy SELECT SQL a UPDATE . Při pozdější změně ReorderList pořadí prvků seznamu ovládací prvek automaticky odešle do příkazu zdroje Update dat dvě hodnoty: novou pozici a ID elementu. Zdroj dat proto potřebuje <UpdateParameters> oddíl pro tyto dvě hodnoty:

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

Ovládací ReorderList prvek musí nastavit následující atributy:

  • AllowReorder: Určuje, jestli je možné změnit uspořádání položek seznamu.
  • DataSourceID: ID zdroje dat
  • DataKeyField: Název sloupce primárního klíče ve zdroji dat
  • SortOrderField: Sloupec zdroje dat, který poskytuje pořadí řazení položek seznamu

<DragHandleTemplate> V oddílech a <ItemTemplate> je možné doladit rozložení seznamu. Pomocí metody je také možné Eval() provádět vazby dat, jak je vidět tady:

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

Následující informace o stylu CSS (odkazované v <DragHandleTemplate> části ReorderList ovládacího prvku) zajišťují, aby se ukazatel myši při najetí myší na úchyt pro přetažení odpovídajícím způsobem změnil:

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

Nakonec ovládací prvek ScriptManager inicializuje ASP.NET AJAX pro stránku:

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

Spusťte tento příklad v prohlížeči a trochu změňte uspořádání položek seznamu. Pak stránku znovu načtěte a/nebo se podívejte na databázi. Změněné pozice byly zachovány a odráží se také hodnotami ve position sloupci v databázi a to vše bez kódu, pouze pomocí značek.

Data v databázi se mění podle nového pořadí položek seznamu.

Data v databázi se mění podle nového pořadí položek seznamu (kliknutím zobrazíte obrázek v plné velikosti).

PředchozíDalší