Saudações pessoal,
Continuando com a série de artigos sobre DataList, venho neste artigo mostrar as funcionalidades deste controle quanto a edição de dados.
Então vamos ao trabalho....
Edição de Dados em um Controle DataList
O controle de DataList suporta a edição in-place dos dados em um registro através de sua propriedade EditItemTemplate. O EditItemTemplate define o conteúdo e a aparência do item quando está sendo editado. Por exemplo, o seguinte Template inclui uma caixa de texto, um botão de “Update” e um botão de “Cancelar”.
<EditItemTemplate>
Item: <asp:TextBox
id="Text1"
runat="server"
Text=<%# DataBinder.Eval(Container.DataItem, "Campo")%>
/><br>
<asp:LinkButton
id="button1"
runat="server"
Text="Salvar"
CommandName="update"
/>
<asp:LinkButton
id="button2"
runat="server"
Text="Cancelar"
CommandName="cancel"
/>
</EditItemTemplate>
O EditItemTemplate interage com uma outra propriedade: EditItemIndex. Por default, o valor de EditItemIndex é -1, significando que nenhum dos registros na lista está sendo editado. Quando EditItemIndex é ajustado a um registro em particular, esse registro é alterado usando o EditItemTemplate.
O DataList fornece também eventos que podem ser usados na edição.
EditCommand é chamado quando o usuário clica no botão (comando “update”) Editar dentro de ItemTemplate do DataList. Você pode adicionar código a este evento. A propriedade EditItemIndex é ajustada ao registro selecionado, e então executa um rebinds nos dados do DataList como mostrado no exemplo que segue.
protected void DataList_EditCommand(object Source, DataListCommandEventArgs e)
{
DataList1.EditItemIndex = (int)e.Item.ItemIndex;
BindList();
}
O EditItemTemplate contem tipicamente botões de comando de “update” e “cancel”. Estes botões chamam os eventos de UpdateCommand e CancelCommand, respectivamente. Você pode também programar estes eventos em seu código. A lógica para “cancelar” a edição de um registro é ajustar EditItemIndex a -1, e então fazer um rebinds dos dados ao DataList como mostrado no exemplo abaixo.
protected void DataList_CancelCommand(object Source, DataListCommandEventArgs e)
{
DataList1.EditItemIndex = -1;
BindList();
}
A lógica típica para fazer um “update” e atualizar a origem dos dados é ajustar EditItemIndex em -1, e então efetuar um rebinds (recarga) dos dados ao DataList. O exemplo abaxio mostra a edição de registros em um DataList.
<%@ Import Namespace="System.Data" %>
<html>
<head>
<script language="C#" runat="server">
public DataTable Cart;
public DataView CartView;
void Page_Load(Object Sender, EventArgs E) {
if (Session["DL3_ShoppingCart"] == null) {
Cart = new DataTable();
Cart.Columns.Add(new DataColumn("Qty", typeof(string)));
Cart.Columns.Add(new DataColumn("Item", typeof(string)));
Cart.Columns.Add(new DataColumn("Price", typeof(string)));
Session["DL3_ShoppingCart"] = Cart;
// carregar a primeira vez -- popula com alguns dados
for (int i=1; i<5; i++) {
DataRow dr = Cart.NewRow();
dr[0] = ((int)((i%2)+1)).ToString();
dr[1] = "Item " + i.ToString();
dr[2] = ((double)(1.23 * (i+1))).ToString();
Cart.Rows.Add(dr);
}
}
else
Cart = (DataTable)Session["DL3_ShoppingCart"];
CartView = new DataView(Cart);
CartView.Sort = "Item";
if (!IsPostBack)
BindList();
}
void BindList() {
DataList1.DataSource= CartView;
DataList1.DataBind();
}
void DataList_EditCommand(Object Sender, DataListCommandEventArgs e) {
DataList1.EditItemIndex = (int)e.Item.ItemIndex;
BindList();
}
protected void DataList_CancelCommand(Object Sender, DataListCommandEventArgs e) {
DataList1.EditItemIndex = -1;
BindList();
}
protected void DataList_UpdateCommand(Object Sender, DataListCommandEventArgs e) {
string item = ((System.Web.UI.WebControls.Label)e.Item.FindControl("Label1")).Text;
string qty = ((System.Web.UI.WebControls.TextBox)e.Item.FindControl("Text1")).Text;
string price = ((System.Web.UI.WebControls.TextBox)e.Item.FindControl("Text2")).Text;
// com um banco de dados aqui usaria o comando Update. Como estamos usando
// um DataTable em memória, vamos deletar a linha velha e substituí-la por uma nova entrada
//remove a linha
CartView.RowFilter = "Item="+item+"";
if (CartView.Count > 0) //Se o item existe no carrinho
CartView.Delete(0); //Deleta
CartView.RowFilter = "";
//Adiciona a nova entrada
DataRow dr = Cart.NewRow();
dr[0] = qty;
dr[1] = item;
dr[2] = price;
Cart.Rows.Add(dr);
DataList1.EditItemIndex = -1;
BindList();
}
</script>
</head>
<body>
<h3><font face="Verdana">Editando dados em um DataList</font></h3>
<p></p>
<form id="Form1" runat=server>
<font face="Verdana" size="-1">
<asp:DataList id="DataList1" runat="server"
BorderColor="black"
BorderWidth="1"
GridLines="Both"
CellPadding="3"
CellSpacing="0"
Font-Names="Verdana"
Font-Size="8pt"
Width="150px"
HeaderStyle-BackColor="#aaaadd"
AlternatingItemStyle-BackColor="Gainsboro"
EditItemStyle-BackColor="lightgreen"
OnEditCommand="DataList_EditCommand"
OnUpdateCommand="DataList_UpdateCommand"
OnCancelCommand="DataList_CancelCommand"
>
<HeaderTemplate>
ITENS...
</HeaderTemplate>
<ItemTemplate>
<asp:LinkButton
id="button1"
runat="server"
Text="Editar"
CommandName="edit" />
<%# DataBinder.Eval(Container.DataItem, "Item") %>
</ItemTemplate>
<EditItemTemplate>
Item:
<asp:Label
id="Label1"
runat="server"
Text=<%# DataBinder.Eval(Container.DataItem, "Item") %> />
<br>
Quantidade:
<asp:TextBox
id="Text1"
runat="server"
Text=<%# DataBinder.Eval(Container.DataItem, "Qty") %> />
<br>
Preço R$:
<asp:TextBox
id="Text2"
runat="server"
Text=<%# DataBinder.Eval(Container.DataItem, "Price") %> />
<br>
<asp:LinkButton
id="button2"
runat="server"
Text="Update"
CommandName="update" />
<asp:LinkButton
id="button3"
runat="server"
Text="Cancelar"
CommandName="cancel" />
</EditItemTemplate>
</asp:DataList>
</font>
</form>
</body>
</html>
E é isso pessoal...
No próximo artigo sobre DataList vou mostrar um exemplo onde faço uma conexão com SQL Server 2005 exibindo organizadamente os dados de uma tabela de produtos. O exemplo será baseado em uma editora de livros listando os dados com imagens etc.
Um abraço e até o próximo artigo...
