VB Data List

DataList
Este control es más sofisticado que el DataRepeater, pero menos que el DataGrid.
Su funcionalidad es parecida al DataRepeater, en el sentido que muestra una serie de

datos, iterando a través de cada item.
El DataList se diferencia del DataRepeater porque puede mostrar los datos en una tabla
HTML directamente (sin tenerla que armar con <table…> ). De hecho, el default es que
lo muestre en una tabla HTML.
Otra diferencia es que puede mostrar los items en más de una columna – en contraste el
DataRepeater muestra una sola columna de items…
También DataList permite editar datos. Para ello, incluye un EditItemTemplate.
vbDataList01.aspx


<%@ Import Namespace='System.Data' %>
<%@ Import Namespace='System.Data.SqlClient' %>
<Script Runat='Server'>
Sub Page_Load( s As Object, e As EventArgs )
Dim MiConexion As SqlConnection

Dim MiComando As SqlCommand
If Not isPostBack Then

miConexion = New SqlConnection( _
"Server=localhost;integrated security=sspi;Database=Northwind")
miComando = New SqlCommand( _
"Select CategoryName From Categories", miConexion)
miConexion.Open()
miDataList.DataSource = miComando.ExecuteReader()
miDataList.DataBind()
miConexion.Close()
End If
End Sub
</Script>
Curso Básico de .NET - DataList Página 1

<html>
<head>
<title>Categorías</title>
</head>
<body>
<form Runat="Server">
<asp:DataList
id="miDataList"
Runat="Server">
<ItemTemplate>
<%# Container.DataItem("CategoryName") %>
</ItemTemplate>
</asp:DataList>
</form>
</body>
</html>
Si ve el código fuente de esta página Web (Con la opción View – Source del Navegador)
encontrará lo siguiente – entre todo el código HTML:
<table id="miDataList" cellspacing="0" border="0"
style="border-collapse:collapse;">
<tr>
<td>
Beverages
</td>
</tr>
<tr>
<td>
Condiments
</td>
</tr>
etc.

Si queremos listar sin tabla HTML, utilizamos el atributo RepeatLayout:
vbDataList02.aspx
Es idéntico a vbDataList01.aspx. Sólo modificaremos el control DataList.
<asp:DataList
id="miDataList"
RepeatLayout="Flow"
Runat="Server">
<ItemTemplate>
</ItemTemplate>
</asp:DataList>

Ud. puede controlar las propiedades de la tabla con los siguientes atributos del DataList:
1. cellpadding
Espacio en blanco alrededor del texto dentro de una celda. Como una especie de
“colchón”.
2. cellspacing
Espacio en blanco dentro de la línea de división entre las celdas. Si pone un valor
igual a 0, la división es una línea fina; si pone valores mayores, se vuelve como
un marco con la anchura especificada.
3. gridlines
Si tiene líneas divisorias: none, vertical, horizontal, both
como se muestra en el siguiente ejemplo:
vbDataList03.aspx
El código es idéntico al del vbDataList01.aspx, sólo modificamos el control DataList:

<asp:DataList
id="miDataList"
cellpadding=”10”
cellspacing=”0”
gridlines=”both”
Runat="Server">
<ItemTemplate>
</ItemTemplate>
</asp:DataList>

Esta vez haremos que el DataList muestre los items en columnas.
Controlamos el número de columnas con el atributo RepeatColumns.
Por default, el DataList comienza a listar verticalmente, hacia abajo, y luego sube y pasa
a llenar la siguiente columna hacia abajo… tipo guía telefónica o columna de periódico.
Si desea que vaya llenando horizontalmente (hacia la derecha), puede controlarlo con el
atributo RepeatDirection
vbDataList03.aspx
Es idéntico al código de vbDataList03.aspx. Sólo modificamos el DataList:

<asp:DataList
id="miDataList"
cellpadding="10"
cellspacing="0"
gridlines="both"
RepeatColumns="3"
RepeatDirection="Horizontal"
Runat="Server">
<ItemTemplate>
</ItemTemplate>
</asp:DataList>

El DataList soporta Event Bubbling, que es una característica en la cual un control
incrustado en el DataList dispara un evento, y el DataList lo intercepta y a su vez dispara
otro evento. Cuál evento del DataList se dispara depende de una propiedad Command.
Los eventos son:
1. OnEditCommand
Es disparado por el evento de un control contenido en el DataList que tiene la
propiedad CommandName con el valor “Edit”
2. OnUpdateCommand
Lo mismo, sólo que con la propiedad CommandName con el valor “Update”.
3. OnDeleteCommand
Lo mismo, sólo que con la propiedad CommandName con el valor “Delete”
4. OnCancelCommand
Lo mismo, sólo que con la propiedad CommandName con el valor “Cancel”
5. OnItemCommand
Cuando no aplica alguno de los casos anteriores.
Controles como Button, LinkButton e ImageButton soportan la propiedad Command.

vbDataList05.aspx


"Select CategoryID,CategoryName From Categories", miConexion)
miConexion.Open()
miConexion.Close()
End If
End Sub
Sub escogeCategoria(s as Object, e as DataListCommandEventArgs)

IndiceCatalogoActual.Text = e.Item.ItemIndex.ToString()
End Sub
</Script>
<html>
<head>
</head>
<body>
<asp:DataList
id="miDataList"
cellpadding="10"
cellspacing="0"
gridlines="both"
RepeatColumns="3"
OnItemCommand = "escogeCategoria"
Runat="Server">
<ItemTemplate>
<asp:LinkButton
id="miLinkButton"
Text='<%# Container.DataItem("CategoryName") %>'
Runat="Server" />
</ItemTemplate>
</asp:DataList>

<p>
Ud. seleccionó el siguiente item:
<asp:label
id="IndiceCatalogoActual"
Runat="Server" />
</form>
</body>
</html>

Podemos recalcar o mostrar el item seleccionado utilizando el template
SelectedItemTemplate.
vbDataList06.aspx
BindData
End If
End Sub
Sub BindData

"Select CategoryID,CategoryName From Categories", miConexion)
miConexion.Open()
miConexion.Close()
End Sub
Sub escogeCategoria(s as Object, e as DataListCommandEventArgs)

miDataList.SelectedIndex = e.Item.ItemIndex
BindData
End Sub
</Script>
<html>
<head>
</head>
<body>

<asp:DataList
id="miDataList"
cellpadding="10"
cellspacing="0"
gridlines="both"
RepeatColumns="3"
OnItemCommand="escogeCategoria"
Runat="Server">
<ItemTemplate>
<asp:LinkButton
id="miLinkButton"
Text='<%# Container.DataItem("CategoryName") %>'
Runat="Server" />
</ItemTemplate>
<SelectedItemTemplate>
<b><%# Container.DataItem("CategoryName") %></b>
</SelectedItemTemplate>
</asp:DataList>
</form>
</body>
</html>

Una diferencia del DataList vs. DataRepeater es que permite editar los datos, a través del
EditItemTemplate.
vbDataList09.aspx

BindData
End If
End Sub
Sub BindData

"Server=(local);uid=Roque;pwd=password;Database=pubs")
"Select au_id, au_lname, au_fname, phone " _
& "From Authors order by au_lname", miConexion)
miConexion.Open()
miConexion.Close()
End Sub
Sub editarAutor(s as Object, e as DataListCommandEventArgs)
miDataList.EditItemIndex = e.Item.ItemIndex
BindData
End Sub
Sub cancelarEdicion(s as Object, e as DataListCommandEventArgs)
miDataList.EditItemIndex = -1
BindData
End Sub

Sub eliminarAutor(s as Object, e as DataListCommandEventArgs)
dim miConexion as SqlConnection

dim miComando as SqlCommand
dim sSqlString as String

sSqlString = "Delete Authors Where au_id=@authorID"
miComando = New SqlCommand(sSqlString, miConexion)

miComando.Parameters.Add( _
New SqlParameter( "@authorID", SqlDBType.VarChar,11) )
miComando.Parameters("@authorID").Value = _
miDataList.DataKeys.Item( e.Item.ItemIndex )
miConexion.Open()
miComando.ExecuteNonQuery
miConexion.Close()
BindData
End Sub

Sub actualizarAutor(s as Object, e as DataListCommandEventArgs)
dim miConexion as SqlConnection

dim miComando as SqlCommand
dim sSqlString as String

sSqlString = "Update Authors " _
& "set au_lname=@lastname, au_fname=@firstname, phone=@phone " _
& "Where au_id=@authorID"
miComando = New SqlCommand(sSqlString, miConexion)
miComando.Parameters.Add( New SqlParameter( _

"@lastname", SqlDBType.VarChar,40) )
miComando.Parameters("@lastname").Value = _
cType( e.Item.FindControl( "lastName" ), textBox ).Text

"@firstname", SqlDBType.VarChar,20) )
miComando.Parameters("@firstname").Value = _
cType( e.Item.FindControl( "firstname" ), textBox ).Text

"@phone", SqlDBType.Char,12) )
miComando.Parameters("@phone").Value = cType( _
e.Item.FindControl( "phone" ), textBox ).Text

"@authorID", SqlDBType.VarChar,11) )
miComando.Parameters("@authorID").Value = _
miDataList.DataKeys.Item( e.Item.ItemIndex )
miConexion.Open()
miComando.ExecuteNonQuery
miConexion.Close()
BindData
End Sub
</Script>

<html>
<head>
<title>Mantenimiento de Autores</title>
</head>
<body>
<asp:DataList
id="miDataList"
cellpadding="10"
cellspacing="0"
gridlines="both"
RepeatColumns="3"
DataKeyField="au_id"
OnEditCommand="editarAutor"
OnDeleteCommand="eliminarAutor"
OnUpdateCommand="actualizarAutor"
OnCancelCommand="cancelarEdicion"
Runat="Server">
<ItemTemplate>
<asp:LinkButton
id="miLinkButton"
Text="Editar"
CommandName="edit"
Runat="Server" />
<%# Container.DataItem("au_lname") %>
</ItemTemplate>
<EditItemTemplate>
<b>Apellido:</b><br>
<asp:TextBox
id="lastname"
text='<%# Container.DataItem("au_lname") %>'
Runat="Server" />
<p>
<b>Nombre:</b><br>
<asp:TextBox
id="firstname"
text='<%# Container.DataItem("au_fname") %>'
Runat="Server" />
<p>
<b>Teléfono:</b><br>
<asp:TextBox
id="phone"
text='<%# Container.DataItem("phone") %>'
Runat="Server" />
<p>

<asp:Button
Text="Actualizar"
CommandName="update"
RunAt="Server" />
<asp:Button
Text="Eliminar"
CommandName="delete"
RunAt="Server" />
<asp:Button
Text="Cancelar"
CommandName="cancel"
RunAt="Server" />
</EditItemTemplate>
</asp:DataList>
</form>
</body>
</html>

VB Data List

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

VB Data List

Uploaded by

Copyright:

Available Formats

DataList

Su funcionalidad es parecida al DataRepeater, en el sentido que muestra una serie de

También DataList permite editar datos. Para ello, incluye un EditItemTemplate.

Dim MiConexion As SqlConnection

If Not isPostBack Then

Curso Básico de .NET - DataList Página 1

Curso Básico de .NET - DataList Página 2

Es idéntico a vbDataList01.aspx. Sólo modificaremos el control DataList.

Curso Básico de .NET - DataList Página 3

como se muestra en el siguiente ejemplo:

El código es idéntico al del vbDataList01.aspx, sólo modificamos el control DataList:

Curso Básico de .NET - DataList Página 4

Es idéntico al código de vbDataList03.aspx. Sólo modificamos el DataList:

Curso Básico de .NET - DataList Página 5

Los eventos son:

Controles como Button, LinkButton e ImageButton soportan la propiedad Command.

Curso Básico de .NET - DataList Página 6

Dim MiConexion As SqlConnection

If Not isPostBack Then

Sub escogeCategoria(s as Object, e as DataListCommandEventArgs)

Curso Básico de .NET - DataList Página 7

Ud. seleccionó el siguiente item:

Curso Básico de .NET - DataList Página 8

miConexion = New SqlConnection( _

Sub escogeCategoria(s as Object, e as DataListCommandEventArgs)

Curso Básico de .NET - DataList Página 9

Curso Básico de .NET - DataList Página 10

Sub Page_Load( s As Object, e As EventArgs )

miConexion = New SqlConnection( _

Sub editarAutor(s as Object, e as DataListCommandEventArgs)

Sub cancelarEdicion(s as Object, e as DataListCommandEventArgs)

Curso Básico de .NET - DataList Página 11

dim miConexion as SqlConnection

miConexion = New SqlConnection( _

miComando = New SqlCommand(sSqlString, miConexion)

Curso Básico de .NET - DataList Página 12

dim miConexion as SqlConnection

miConexion = New SqlConnection( _

miComando = New SqlCommand(sSqlString, miConexion)

miComando.Parameters.Add( New SqlParameter( _

miComando.Parameters.Add( New SqlParameter( _

miComando.Parameters.Add( New SqlParameter( _

miComando.Parameters.Add( New SqlParameter( _

Curso Básico de .NET - DataList Página 13

<%# Container.DataItem("au_lname") %>

Curso Básico de .NET - DataList Página 14

Curso Básico de .NET - DataList Página 15

You might also like