Arrastar e soltar por meio de ReorderList (C#)

por Christian Wenz

Baixar PDF

O controle ReorderList no Kit de Ferramentas de Controle AJAX fornece uma lista que pode ser reordenada pelo usuário por meio de arrastar e soltar. A ordem atual da lista deve ser mantida no servidor.

Visão geral

O ReorderList controle no Kit de Ferramentas de Controle AJAX fornece uma lista que pode ser reordenada pelo usuário por meio de arrastar e soltar. A ordem atual da lista deve ser mantida no servidor.

Etapas

O ReorderList controle dá suporte à associação de dados de um banco de dados à lista. O melhor de tudo é que ele também dá suporte à gravação de alterações na ordem do elemento de lista de volta para o armazenamento de dados.

Este exemplo usa o Microsoft SQL Server 2005 Express Edition como o armazenamento de dados. O banco de dados é uma parte opcional (e gratuita) de uma instalação do Visual Studio, incluindo o Express Edition. Ele também está disponível como um download https://go.microsoft.com/fwlink/?LinkId=64064separado em . Para este exemplo, presumimos que a instância do SQL Server 2005 Express Edition é chamada SQLEXPRESS e reside no mesmo computador que o servidor Web; essa também é a configuração padrão. Se a configuração for diferente, você precisará adaptar as informações de conexão para o banco de dados.

A maneira mais fácil de configurar o banco de dados é usar o Microsoft SQL Server Management Studio Express (https://www.microsoft.com/downloads/details.aspx?FamilyID=c243a5ae-4bd1-4e3d-94b8-5a0f62bf7796& DisplayLang=en ). Conecte-se ao servidor, clique duas vezes em Databases e crie um novo banco de dados (clique com o botão direito do mouse e escolha New Database) chamado Tutorials.

Neste banco de dados, crie uma nova tabela chamada AJAX com as quatro colunas a seguir:

• id (chave primária, inteiro, identidade, não NULL)
• char (char(1), NULL)
• description (varchar(50), NULL)
• position (int, NULL)

O layout da tabela AJAX (clique para exibir a imagem em tamanho real)

Em seguida, preencha a tabela com alguns valores. Observe que a position coluna contém a ordem de classificação dos elementos.

Os dados iniciais na tabela AJAX (clique para exibir a imagem em tamanho real)

A próxima etapa requer gerar um SqlDataSource controle para se comunicar com o novo banco de dados e sua tabela. A fonte de dados deve dar suporte aos SELECT comandos SQL e UPDATE . Quando a ordem dos elementos de lista é alterada posteriormente, o ReorderList controle envia automaticamente dois valores para o comando da Update fonte de dados: a nova posição e a ID do elemento. Portanto, a fonte de dados precisa de uma <UpdateParameters> seção para esses dois valores:

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

O ReorderList controle precisa definir os seguintes atributos:

• AllowReorder: se os itens da lista podem ser reorganizados
• DataSourceID: a ID da fonte de dados
• DataKeyField: o nome da coluna de chave primária na fonte de dados
• SortOrderField: a coluna de fonte de dados que fornece a ordem de classificação para os itens de lista

<DragHandleTemplate> Nas seções e <ItemTemplate> , o layout da lista pode ser ajustado. Além disso, a vinculação de dados é possível usando o Eval() método , conforme visto aqui:

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

As seguintes informações de estilo CSS (referenciadas na <DragHandleTemplate> seção do ReorderList controle) garantem que o ponteiro do mouse seja alterado adequadamente quando ele passar o mouse sobre a alça de arrastar:

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

Por fim, um ScriptManager controle inicializa ASP.NET AJAX para a página:

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

Execute este exemplo no navegador e reorganize um pouco os itens da lista. Em seguida, recarregue a página e/ou dê uma olhada no banco de dados. As posições alteradas foram mantidas e também são refletidas pelos valores na position coluna no banco de dados e tudo isso sem nenhum código, apenas usando marcação.

Os dados no banco de dados são alterados de acordo com a nova ordem de item de lista (clique para exibir a imagem em tamanho real)

AnteriorAvançar