Este documento proporciona una introducción al acceso a datos extremo con ASP.NET. Explica conceptos como el databinding, las fuentes de datos declarativas y programáticas, y cómo usar controles como GridView, DetailsView, Repeater y DataList para mostrar datos vinculados. También incluye ejemplos de cómo cargar datos desde diferentes orígenes como arreglos, lectores de datos y tablas de base de datos.
Proyecto integrador. Las TIC en la sociedad S4.pptx
Entrenamiento en acceso a datos extremo con ASP.NET
1. ENTRENAMIENTO EN ACCESO A
DATOS EXTREMO CON ASP.NET
Haarón Gonzalez
Microsoft MCP, MCAD, MCT, MCTS y
MVP
2. GENERALES
Sesión de 4 horas
No habrá descanso
Es un entrenamiento no una capacitación
Puedes preguntar en cuanto surja una duda
Requieres de Visual Studio 2008 o superior y SQL Express o superior
Esta sesión se esta transmitiendo en línea y quedara grabada
3. QUE ES LA VINCULACIÓN DE DATOS O
DATABINDING
Proceso de carga datos provenientes de
una fuente de datos en un control
En .NET los controles que soportan databinding
cuentan con
la propiedad DataSource donde asignamos los datos
el método DataBind()para proceder a cargarlos
Para vincular datos en un control ya sea con código o
declarativamente establecemos la propiedad
DataSource e invocamos el método DataBind()
4. EJERCICIO 1 – CARGANDO DATOS
PROGRAMATICAMENTE
1. Creamos proyecto de tipo Web Site en Visual Studio
2. Agregamos una pagina aspx
3. Arrastramos un control GridView
4. Programamos código para invocar la fuente de datos en el
evento Page_Load
5. Dim connectString As String = "Data
Source=.sqlexpress;Initial Catalog=Northwind;Integrated
Security=True"
Using cnn As New SqlConnection(connectString)
Using cmd As New SqlCommand("select top 30 * from customers",
cnn)
cnn.Open()
Dim reader As SqlDataReader = cmd.ExecuteReader()
GridView1.DataSource = reader
GridView1.DataBind()
End Using
End Using
6. string connectString = "Data Source=.sqlexpress;Initial
Catalog=Northwind;Integrated Security=True";
using (SqlConnection cnn = new SqlConnection(connectString))
{
using (SqlCommand cmd = new SqlCommand("select top 30 * from
customers", cnn))
{
cnn.Open();
SqlDataReader reader = cmd.ExecuteReader();
GridView1.DataSource = reader;
GridView1.DataBind();
}
}
7. COMO FUNCIONA EL DATABINDING
Control
DataSource
Fuente DataBind()
de Cache
Datos local de
datos
Render()
8. ¿QUE CONTROLES DE ASP.NET
SOPORTAN DATABINDING?
Solo algunos controles de ASP.NET lo soportan
Pueden vincularse a cualquier fuente de datos que implemente la
interface IEnumerable así como clases DataTable o DataSet
Controles
HtmlSelect Array
que CheckBoxList ArrayList
soportan BulletedList HashTable
vinculación GridView Queue
DetailsView SortedList
FormView Vinculados a Stack
ListView StringCollection
DataList DataView
Repeater DataTable
DropDownList DataSet
ListBox IDataReader
RadioButtonList IEnumerable
9. EJERCICIO 2 – CARGANDO DATOS DE
UN ARREGLO PROGRAMÁTICAMENTE
Agregamos una nueva pagina aspx
En el markup arrastramos un control BulletedList
En el codebehind agregamos un arreglo de strings y lo
inicializamos
Asignamos la propiedad DataSource y ejecutamos DataBind()
Corremos el aplicativo y revisamos el funcionamiento
Agregamos un ListBox, CheckBoxList y asignamos su
propiedad DataSource
Usamos Page.DataBind();
10. Dim numberArray As String() = New String() {"1", "2", "3", "4"}
numberListBox.DataSource = numberArray
numberListBox.DataBind()
12. DATABINDING DE TIPO TEXTO VALOR
Para los controles que soportan cargar solo
una dimensión de datos (DropDown, ListBox,
etc) también se pueden vincular mediante
Inicialización de la propiedad DataTextField al
campo que queremos desplegar en el control
Inicialización de la propiedad DataValueField al
campo que queremos usar como el valor
identificador de un elemento
13. Dim dsn As String = "Data Source=.sqlexpress;Initial
Catalog=Northwind;Integrated Security=True"
Using cnn As New SqlConnection(dsn)
Using cmd As New SqlCommand("SELECT TOP 20 * FROM PRODUCTS", cnn)
cnn.Open()
ddl.DataSource = cmd.ExecuteReader()
ddl.DataTextField = ProductName
ddl.DataValueField = ProductId
ddl.DataBind()
End Using
End Using
14. string dsn = @"Data Source=.sqlexpress;Initial
Catalog=Northwind;Integrated Security=True";
using (SqlConnection cnn = new SqlConnection(dsn))
{
using (SqlCommand cmd = new SqlCommand("SELECT TOP 20 *
FROM PRODUCTS",cnn))
{
cnn.Open();
ddl.DataSource = cmd.ExecuteReader();
ddl.DataTextField = “ProductName”;
ddl.DataValueField = “ProductId”;
ddl.DataBind();
}
}
15. EJERCICIO 3 – CARGANDO DATOS DE
TIPO TEXTO VALOR
Usaremos la primer pagina aspx que creamos y agregamos un
nuevo control de tipo DropDownList
En el código asignamos las propiedades DataSource,
DataTextFIeld y DataValueField
Invocamos el método DataBind()
Corremos
Para seleccionar algún elemento vinculado de forma
programática usamos la colección Items e invocamos el método
FindByText o FindByValue
numberListBox.Items.FindByText("3").Selected = true;
16. ORIGEN DE DATOS DECLARATIVA
Las fuentes de datos declarativas son una
característica agregada en ASP.NET 2.0
SqlDataSource, ObjectDataSource, XmlDataSource,
LinqDataSource junto con Visual Studio 2005 en adelante
ofrecen un soporte enriquecido para la vinculación y
manipulación enriquecida de los campos vinculados
17. ORIGEN DE DATOS DECLARATIVA
Sql- Object- Access- Xml- SiteMap-
DataSource DataSource DataSource DataSource DataSource
Data Site Map
Component Provider
SQL Any Access XML
Site Maps
Databases Data Databases Data
18. VINCULANDO A LAS FUENTES DE
DATOS DECLARATIVAS
A vinculación de datos puede realizarse con o
sin código alguno
Soporte desde el diseñador
Integración con herramientas como server Explorer
Modelo de vinculación fácil de extenderse
20. EJERCICIO 4 – DATABINDING
DECLARATIVO CON CÓDIGO
Creamos una nueva pagina aspx
Arrastramos un GridView
Configuramos un nuevo SqlDataSource mediante el asistente
Elegimos la tabla Customers
Exploramos las distintas opciones de ordenamiento, generación y
filtrado
Y con codification cargamos el datasource
GridView1.DataSource = SqlDataSource1.Select(new DataSourceSelectArguments());
GridView1.DataBind();
21. EJERCICIO 5 – DATABINDING
DECLARATIVO SIN CÓDIGO
Sobre la ultima pagina creada
Editamos la declaración del GridView para especificar la
propiedad DataSourceID igual al nombre de nuestro control
SqlDataSource
No olvidemos comentar el código anterior
22. COMO FUNCIONA LA VINCULACIÓN
DECLARATIVA A LAS FUENTES DE DATOS
Petición
GridView
IDataSource SqlDataSource
CreateChildControls()
EnsureDataBind() Select
DataBind()
Cache Database
local
de
datos
Render
23. SQLDATASOURCE
Soporta todas las interacciones con SQL como lectura, escritura,
actualización, eliminación, filtrado, cacheo, ordenado
Cuando el DataSource cuenta con algunas de estas propiedades
establecidas mas soporte y funcionalidad es posible en los controles
Propiedad Descripcion
ProviderName System.Data.SqlClient,
System.Data.OleDb,
System.Data.OracleClient
DataSourceMod DataSet o DataReader
e
SelectCommma Query o el nombre de un
nd procedimiento almacenado para
seleccionar datos
InsertCommand Query o el nombre de un
procedimiento almacenado para
insertar datos
DeleteCommand Query o el nombre de un
procedimiento almacenado para
eliminar datos
UpdateComman Query o el nombre de un
24. EJERCICIO 6 – MANEJANDO LA
INSERCIÓN DE DATOS
Creamos una nueva pagina aspx
Configuramos un nuevo SqlDataSource con la funcionalidad de
que se auto genere el insert, update, delete, read
Verificar los InserParameters y los tipos de parámetros en
general
Invocar programáticamente el proceso
protected void Button1_Click(object sender, EventArgs e) de inserción
{
SqlDataSource1.InsertParameters["CustomerId"].DefaultValue = "aaaa";
SqlDataSource1.InsertParameters["CompanyName"].DefaultValue = "aaaa";
SqlDataSource1.InsertParameters["ContactName"].DefaultValue = "aaaa";
SqlDataSource1.InsertParameters["ContactTitle"].DefaultValue = "aaaa";
SqlDataSource1.Insert();
}
25. GRIDVIEW
Muestra datos en forma tabular, es el sucesor del
control DataGrid
Generación de columnas implícita y explicita con capacidad de
manejar columnas especiales como
ImageField
CheckBoxField
HyperlinkField
TemplateField
Interacción inteligente con controles DataSource para que de
manera predeterminada soporte
Paginación automática, edición, eliminación y ordenamiento
De forma automática a los datos vinculados y retorna una
Tabla con columnas y renglones en formato HTML
26. EJERCICIO 7 – GENERANDO GRIDVIEW
DIRECTAMENTE DESDE SERVER
EXPLORER
Creamos una nueva pagina aspx
Abrimos el server explores y buscamos la base de datos de Northwind y
buscamos la tabla Customers
Arrastramos la tabla Customers a la superficie de diseño
Visualizamos las opciones del GridView
Editamos las columnas para incluir una de tipo hipervínculo para
implementar el maestro
27.
28. DETAILSVIEW
Soporta el despliegue y manipulación de un solo
renglón
Útil para escenarios maestro detalle
Soporta paginado en caso de mostrar mas de un renglón, edición,
eliminación e inserción
Genera html en formato de tablas, columnas y renglones
29. EJERCICIO 8 – IMPLEMENTANDO
DETALLE
Creamos una nueva pagina aspx
Abrimos el server explores y buscamos la base de datos de
Northwind y buscamos la tabla Customers
Arrastramos la tabla Customers a la superficie de diseño
Visualizamos las opciones del GridView
Editamos las columnas para incluir una de tipo hipervínculo
30. TEMPLATE
Los controles GridView, DetailsView, ListView, Repeater y
DataList permiten la personalización de la apariencia y el manejo
de estador a través de plantillas
Provee el marco sobre el cual se despliegan elementos y nos da un grado de
flexibilidad para generar nuestro contenido
Nos permite especificar exactamente como se desplegar la información
Maneja el marco y la vinculación, genera tablas solo que con la posibilidad de
personalizar la celda
La sintaxis Eval y Bind se usan para extraer datos del renglón actual, Eval
obtiene información de solo lectura y Bind es de lectura y escritura, two way
binding.
31. Plantilla vinculada del
Fuente DataBind() de control
de
Datos DataSource
Por cada rengon en la
fuente de datos
Escribe los datos de
acuerdo a nuestra
especificacion
32. COMO EXTRAER VALORES DEL LA
VINCULACION
Los controles que ubicamos en una plantilla necesitan
relacionarse con el renglón actual que esta siendo
vinculado
Utilizamos la nomenclatura para crear la ventana de acceso a los
datos del renglón vinculándose <%# expresion %>
Usamos Eval para extraer los datos
Es factible también programáticamente obtener y establecer los
valores del renglón vinculándose
33. EJERCICIO 9 – TRABAJANDO CON
RENGLONES VINCULADOS
Creamos una nueva pagina aspx
Abrimos el server explores y buscamos la base de datos de Northwind y
buscamos la tabla Customers
Arrastramos la tabla Customers a la superficie de diseño
Visualizamos las opciones del GridView
Agregamos una columna de tipo Plantilla
Visualizamos los distintos modalidades como ItemTempalte,
AlternateTemplate, EditTemplate, etc
Agregamos un control de tipo Etiqueta en el estado ItemTemplate y en las
propiedades emergentes de la etiqueta especificamos la vinculación con que
columna
<asp:TemplateField>
<ItemTemplate>
<asp:Label ID="Label1" runat="server" Text='<%# Eval("ContactTitle") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
34. EJERCICIO 9 – TRABAJANDO CON
RENGLONES VINCULADOS
Agregamos un botón justo aun lado de la etiqueta y especificamos su
nombre como cmdOpcion
Dentro del grid buscamos el evento RowDataBound el cual se dispara
por cada renglón que se esta vinculando
Programáticamente especificamos propiedades al botón recién
agregado
protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs
e)
{
if (e.Row.RowType == DataControlRowType.DataRow)
{
Button btn = e.Row.FindControl("cmdOpcion") as Button;
btn.Attributes.Add("onclick", "return confirm('hola');");
}
}
35. REPEATER
Este control nos da la posibilidad de manipular a nuestro antojo el
HTML generado por el control
Soporta el concepto de plantillas
Trabaja con los conceptos de vinculación mediante datasources
solo que nos da la libertad de generar y dibujar el HTML que se
estará generando
<asp:DataList ID="DataList1" runat="server" DataKeyField="EmployeeID"
DataSourceID="SqlDataSource1">
<ItemTemplate>
EmployeeID:
<asp:Label ID="EmployeeIDLabel" runat="server"Text='<%# Eval("EmployeeID") %>' />
<br />
LastName:
<asp:Label ID="LastNameLabel" runat="server" Text='<%# Eval("LastName") %>' />
<br />
FirstName:
<asp:Label ID="FirstNameLabel" runat="server" Text='<%# Eval("FirstName") %>' />
</ItemTemplate>
</asp:DataList>
37. DATALIST
Es la combinación de la flexibilidad de Repetar con la estructura
de un GridVIew
Permite mostrar a manera de lista vertical u horizontal cualquier
html creado como plantilla dentro del control
Es util para acomodar elementos de forma estructurada en la
interface de usuario
Dibuja cada renglón de la fuente de datos como una celda
Requiere que se define por lo menos la plantilla ItemTemplate
Usamos la propiedad RepeatColumn para especificar cuantos
elementos queremos incluir en el renglón
Tambien contamos con RepeatDirectin para especificar la
dirección en que el control s eva generandoi
39. PARAMETROS DE DATASOURCE
Los controles DataSource soporta colección de parámetros para
cada distinta operación
Una colección de parámetros separada para actualización, insertado,
seleccionado, eliminado
Las fuentes de parámetros pueden ser controles, las cookies, la misma forma,
datos de perfil y/o cadena querystring
40.
41. PARÁMETROS
Existen diversas tipos de parámetros
Control Parameter
Valor que proviene de cualquier control del lado servidor de una pagina
Cookie Parameter
Valor que proviene de algún dato almacenado en una cookie
Form Parameter
Valor proveniente de una variable HTTP POST
Profile Parameter
Valor proveniente del perfil del usuario de alguna propiedad del perfil
QueryString Parameter
Valor obtenido de la barra de direcciones url
Session Parameter
Valor obtenido de alguna variable de sesión
42. EJERCICIO 12 – TRABAJANDO CON
PARAMETROS FILTER
Agregamos una nueva pagina aspx
Arrastramos la tabla de Customers del server explorer a la pagina
Agregamos un cuadro de texto y un botón de buscar
Seleccionamos nuestro SqlDataSource y buscamos la propiedad
FilterExpression y establecemos el valor CompanyName LIKE
‘%{0}%’
Configuramos el parámetros
43. EVENTOS DE DATASOURCE
Los DataSources exponen eventos,
útiles para personalizar el
comportamiento y la interacción que el
DataSource va teniendo
Es factible entonces agregar parámetros
programáticamente
Desempeñar operaciones cuando se realiza
satisfactoriamente un insert, update, delete, etc.
Impedir la ejecución de alguna operación
protected basado en alguna validación
void SqlDataSource1_Inserting(object sender, SqlDataSourceCommandEventArgs e)
{
e.Command.Parameters["CompanyName"].Value = "hola";
// tambien se puede cancelar la operacion usando
e.Cancel = true;
}
44. VINCULACION DE DOS LADOS
LA sintaxis Bind() se puede usar en controles que soportan
Insert/Update/Delete
Es como Eval() solo que este va dos veces
Durante el Select se comporta como Eval()
Durante el Inser/Update los valores son mapeados en parámetros y usados
para actualizar
Se usan en los controles mas comunes como GridView, DetailsView,
FormVIew, ListVIew
<ItemTemplate>
CustomerID:
<asp:Label ID="CustomerIDLabel" runat="server"
Text='<%# Eval("CustomerID") %>' />
<br />
CompanyName:
<asp:Label ID="CompanyNameLabel" runat="server"
Text='<%# Bind("CompanyName") %>' />
<br />
ContactName:
<asp:Label ID="ContactNameLabel" runat="server"
Text='<%# Bind("ContactName") %>' />
45. EJERCICIO 13 – IMPLEMENTANDO
UPDATE EN GRIDVIEW CON
CONTROLES ADICIONALES
46. FORMVIEW
Similar al DetailsView, despliega un renglón
No hay generado de HTML por default, tenemos que especificar
su plantilla para desplegar su contenido
Útil cuando queremos personalizar el despliegue visual
47. EJERCICIO 14 – CREANDO UN ALTA DE
REGISTROS
Agregamos una nueva pagina aspx
Arrastramos un DetailsView y configuramos el insert explicando
que hay que hacer template cada Field si quisiéramos hacer uso
de los validadores
Usamos mejor un FormView y editamos su EditMode a Insert
Agregamos validadores
48. LISTVIEW
Lo mejor de todos los controles que soportan vinculación a datos
Control orientado a plantilla
Puede remplazar a cualquier control que soporta vinculación de datos
Se define el
marco
Se define el
elemento
Se define su
plantilla de muestra
49. DATAPAGER
Desacopla la interface de paginación del ListView agregando un
nuevo control especifico para esto
Permite usar las opciones de navegación en donde queramos
Podemos crear diversas opciones de pagina para una misma control
<asp:DataPager ID="DataPager1" runat="server">
<Fields>
<asp:NextPreviousPagerField ButtonType="Button" ShowFirstPageButton="True"
ShowNextPageButton="False" ShowPreviousPageButton="False" />
<asp:NumericPagerField />
<asp:NextPreviousPagerField ButtonType="Button" ShowLastPageButton="True"
ShowNextPageButton="False" ShowPreviousPageButton="False" />
</Fields>
</asp:DataPager>
50. XMLDATASOURCE
Permite vincularlos a fuentes de datos dinstintas a bases de
datos
Special para trabajar con datos XML
<asp:ListView ID="ListView1" DataSourceID="XmlDataSource1" runat="server">
<LayoutTemplate>
<asp:PlaceHolder runat="server" ID="itemPlaceholder" />
</LayoutTemplate>
<ItemTemplate>
<a href="<%# XPath("link") %>"> <%# XPath("title") %></a><br />
<p ><%# XPath("description") %></p>
<br />
</ItemTemplate>
</asp:ListView>
<asp:XmlDataSource ID="XmlDataSource1" runat="server"
DataFile="http://feeds.feedburner.com/msmvps/gXSK"
XPath="/rss/channel/item">
</asp:XmlDataSource>
52. XMLDATASOURCE
Podemoa usar este control para contar con catalogos de datos
que sabemo que no cambiaran constantemente
No es necesario que se encuentren en la base de datos como
tablas aquellos catalogos o elmentos de informacion
Lista de estado civil
Sexo
Tipos de pago
Etc…
53. EJERCICIO 15 – USANDO CATALOGOS
Creamos una nueva pagina
Agregamos la carpeta App_Data
Agregamos una carpeta llamada xml
Agregamos un nuevo archivo xml llamado StstusMarital.xml
Agregamos el siguiente XML
Agregamos un nuevo aspx <?xml version="1.0" encoding="utf-8" ?>
<StatusMarital>
Arrastramos un XmlDataSource y <item Name="" Value="0" />
establecemos propiedad DataFile <item Name="Married" Value="1" />
<item Name="Single" Value="2" />
Agregamos algún DropDownList <item Name="Divorced" Value="3" />
<item Name="Widowed" Value="4" />
Vinculamos <item Name="Other" Value="5" />
</StatusMarital>
56. OBJECTDATASOURCE
Soporta la vinculación a un objeto de capa media
Control Objetos
ObjectDataSource
Data-bound Objetos
<asp:ObjectDataSource ID=“obj” runat=“server”
SelectMethod=“ObtenerDatos”
TypeName=“MiClase” />
Fuente de
public static class MiClase { Datos
static public List<Persona> OntenerDatos() {
List<Persona> personas = new List<Persona>();
// agregamos personas
return personas;
}
}
57. EJERCICIO 17 – CREANDO CAPA DE
DATOS
Agregamos una carpeta de tipo App_Code
Agregamos un DataSet
Agregamos DataTableAdapter para tabla customer
Compilamos
Agregamos nueva paginas aspx
Agregamos ObJectDataSource
Configuramos ObjectDataSource
58. ENTRENAMIENTO EN ACCESO A
DATOS EXTREMO CON ASP.NET
Haarón Gonzalez
Microsoft MCP, MCAD, MCT, MCTS y
MVP