 |
Neste artigo vou explicar como reordenar imagens ao arrastar e soltar usando ASP.NET + AJAX e salvar a nova ordenação no banco de dados.
Nada mais simples que arrastar e soltar, certo?
Download do código deste artigo
|
Para isso vamos usar:
jquery-1.4.2.min.js
jquery-ui-1.7.1.custom.min.js
Script para criar a tabela de exemplo:
CREATE TABLE [dbo].[imagens](
[id] [int] IDENTITY(1,1) NOT NULL,
[imagem] [nvarchar](200) NULL,
[ordem] [int] NULL,
CONSTRAINT [PK_imagens] PRIMARY KEY CLUSTERED
(
[id] ASC
)WITH (PAD_INDEX = OFF, STATISTICS_NORECOMPUTE = OFF, IGNORE_DUP_KEY = OFF,
ALLOW_ROW_LOCKS = ON, ALLOW_PAGE_LOCKS = ON) ON [PRIMARY]
) ON [PRIMARY]
INSERT INTO imagens (imagem, ordem) VALUES ('exemplo1.jpg', 1 )
INSERT INTO imagens (imagem, ordem) VALUES ('exemplo2.jpg', 2 )
INSERT INTO imagens (imagem, ordem) VALUES ('exemplo4.jpg', 3 )
INSERT INTO imagens (imagem, ordem) VALUES ('exemplo3.jpg', 4 )
Muito bem, agora vamos criar um Repeater
default.aspx
<asp:repeater runat="server" ID="repImagens">
<HeaderTemplate>
<div class="photos">
</HeaderTemplate>
<ItemTemplate>
<img id="<%# Eval("id") %>" src="images/<%# Eval("imagem") %>" alt="" />
</ItemTemplate>
<FooterTemplate>
</div>
</FooterTemplate>
</asp:repeater>
default.aspx.cs
using System.Data.SqlClient;
...
protected void Page_Load(object sender, EventArgs e)
{
string sConnectionString = "Server=.\\SQLEXPRESS;Database=BANCODEDADOS;User
ID=USUARIO;Password=SENHA;Trusted_Connection=False;";
using (SqlConnection Conn = new SqlConnection(sConnectionString))
{
string sSQL = @"SELECT id, imagem
FROM imagens
ORDER BY ordem";
SqlCommand myCommand = new SqlCommand(sSQL, Conn);
Conn.Open();
SqlDataReader dr = myCommand.ExecuteReader();
repImagens.DataSource = dr;
repImagens.DataBind();
Conn.Close();
}
}
Como podemos observar no código acima, foi criada uma DIV com a classe photos onde as tags IMG tem o id igual ao seu id no banco de dados.
Agora vamos ao javascript que vai chamar o webservice.
default.aspx
<script src="js/jquery-1.4.2.min.js" type="text/javascript"></script>
<script src="js/jquery-ui-1.7.1.custom.min.js" type="text/javascript"></script>
<script type="text/javascript">
//Função para reordenar itens
$(function () {
$(".photos").sortable({ opacity: 0.6, cursor: 'move', update: function () {
//converter os IDs da imagens em array
var order = $(this).sortable("toArray");
//Mandando um POST para o webservice com a nova ordem
$.ajax({
type: 'POST'
, url: "WebService.asmx/Reorder"
, contentType: 'application/json; charset=utf-8'
, dataType: 'json'
, data: "{objOrdem:'" + order + "'}" //Envia a nova ordem
, success: function (data, status) {
}
, error: function (xmlHttpRequest, status, err) {
alert('error'); //No caso de ocorrer algum erro.
}
});
}
});
});
</script>
Agora o webservice,
App_code/WebService.cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Services;
using System.Data.SqlClient;
/// <summary>
/// Summary description for WebService
/// </summary>
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
[System.Web.Script.Services.ScriptService] //### importante descomentar esta linha ###
public class WebService : System.Web.Services.WebService {
public WebService () {
//Uncomment the following line if using designed components
//InitializeComponent();
}
#region Reorder
[WebMethod(EnableSession = true)]
public string Reorder(object objOrdem)
{
string[] s = objOrdem.ToString().Split(',');
int i = 1;
foreach (string item in s)
{
AtualizarOrdem(Convert.ToInt32(item), i);
i++;
}
return string.Empty;
}
#endregion
#region AtualizarOrdem
private void AtualizarOrdem(int iID, int iOrder)
{
string sConnectionString = "Server=.\\SQLEXPRESS;Database=BANCODEDADOS;User ID=USUARIO;Password=SENHA;Trusted_Connection=False;";
using (SqlConnection Conn = new SqlConnection(sConnectionString))
{
string sSQL = @"UPDATE imagens SET ordem = @ordem WHERE id = @id";
SqlCommand myCommand = new SqlCommand(sSQL, Conn);
myCommand.Parameters.AddWithValue("id", iID);
myCommand.Parameters.AddWithValue("ordem", iOrder);
Conn.Open();
myCommand.ExecuteNonQuery();
Conn.Close();
}
}
#endregion
}