Używanie ogłaszania zwrotnego z kontrolką ReorderList (VB)
Autor: Christian Wenz
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. Za każdym razem, gdy lista zostanie zmieniona, zwrotny informuje serwer o zmianie.
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. Za każdym razem, gdy lista zostanie zmieniona, zwrotny informuje serwer o zmianie.
Kroki
Istnieje kilka możliwych źródeł danych dla kontrolki ReorderList
. Jednym z nich jest użycie kontrolki XmlDataSource
:
<asp:XmlDataSource ID="XmlDataSource1" runat="server" XPath="acronym/letter">
<Data>
<acronym>
<letter char="A" description="Asynchronous" />
<letter char="J" description="JavaScript" />
<letter char="A" description="And" />
<letter char="X" description="XML" />
</acronym>
</Data>
</asp:XmlDataSource>
Aby powiązać ten kod XML z kontrolką ReorderList
i włączyć wycofywanie, należy ustawić następujące atrybuty:
DataSourceID
: identyfikator źródła danychSortOrderField
: właściwość do sortowania wedługAllowReorder
: czy zezwolić użytkownikowi na zmienianie kolejności elementów listyPostBackOnReorder
: Czy utworzyć postback za każdym razem, gdy lista zostanie ponownie rozmieszona
Oto odpowiedni znacznik dla kontrolki:
<ajaxToolkit:ReorderList ID="rl1" runat="server" SortOrderField="char"
AllowReorder="true"
DataSourceID="XmlDataSource1" PostBackOnReorder="true">
W ramach kontrolki ReorderList
określone dane ze źródła danych mogą być powiązane przy użyciu Eval()
metody :
<DragHandleTemplate>
<div class="DragHandleClass">
</div>
</DragHandleTemplate>
<ItemTemplate>
<div>
<asp:Label ID="ItemLabel" Text='<%# Eval("description") %>' runat="server" />
</div>
</ItemTemplate>
</ajaxToolkit:ReorderList>
Na dowolnej pozycji na stronie etykieta będzie przechowywać informacje po wystąpieniu ostatniej zmiany kolejności:
<div>
<asp:Label ID="lastUpdate" runat="server" />
</div>
Ta etykieta jest wypełniona tekstem w kodzie po stronie serwera, obsługując postback:
<script runat="server">
Sub Page_Load()
If Page.IsPostBack Then
lastUpdate.Text = "List last reordered at " & DateTime.Now.ToLongTimeString()
End If
End Sub
</script>
Na koniec, aby aktywować funkcje ASP.NET AJAX i Control Toolkit, ScriptManager
kontrolka musi zostać umieszczona na stronie:
<asp:ScriptManager ID="asm" runat="server" />
Każda zmiana kolejności wyzwala powrót (kliknij, aby wyświetlić obraz o pełnym rozmiarze)