You are on page 1of 70

Controles Web

Web Forms

Controles Web
Controles de servidor
Se ejecutan directamente en el servidor
Sus tags o etiquetas estn escritas en XML

Controles HTML
Se les tiene que agregar funcionalidad con un script
Sus tags o etiquetas estn escritas en HTML

Controles Web Form

Controles de servidor Web

Existen en el espacio de nombres


System.Web.UI.WebControls

Sintaxis del control


<asp:TextBox
<asp:TextBox id="TextBox1"
id="TextBox1"
runat="server">Text_to_Display
runat="server">Text_to_Display
</asp:TextBox>
</asp:TextBox>

HTML generado por el control


<input
<input name="TextBox1"
name="TextBox1" type="text"
type="text"
value="Text_to_Display"
value="Text_to_Display"
Id="TextBox1"/>
Id="TextBox1"/>

Qu es un Web Form?

Es la combinacin de controles y cdigo HTML que


se ejecutan del lado del servidor.
.aspx extension
Page attributes
@ Page directive
Body attributes
Form attributes

<%@
<%@ Page
Page Language="vb"
Language="vb"
Codebehind="WebForm1.aspx.vb"
Codebehind="WebForm1.aspx.vb"
SmartNavigation="true"%>
SmartNavigation="true"%>
<html>
<html>
<body
<body ms_positioning="GridLayout">
ms_positioning="GridLayout">
<form
<form id="Form1"
id="Form1" method="post"
method="post" runat="server">
runat="server">
</form>
</form>

Caractersticas
Web Forms Aplicaciones:
Se basan en la tecnologa ASP.NET para crear una
potente herramienta programable pginas.
Ejecutar en cualquier navegador y hacer que
automticamente el correcto, browser- cdigo HTML
compatible para funciones tales como estilos y diseo

1. En visual Studio, en Start Page,


clik Sitio Web

En visual Studio se pueden escoger 2 tipos de


proyectos

Proyecto Asp.net Web Forms


Proyecto web vaco

3. Elegir el que sea necesario y


ponerle un nombre corto.

En el explorador de soluciones se
visualizar el proyecto creado

Agregar un formulario web

Controles Web
Hay tres tipos de controles de servidor:
Controles de servidor HTML - etiquetas HTML
tradicionales
Controles de servidor Web ASP.NET - Nuevas etiquetas
Controles de servidor de validacin - Para la validacin
de entrada

TextBox
El control TextBox se utiliza para crear un cuadro de texto.

Botn
Se utiliza para ejecutar un conjunto de eventos.

Controles de enlace de
datos( Databinding)
Son utilizados llenar las listas con elementos
seleccionables desde una fuente de datos importados.
asp:RadioButtonList
asp:CheckBoxList
asp:DropDownList
asp:Listbox

DropDownList

Radiobuttonlist

Qu es es la validacin de entrada
de datos?
Verifica que el usuario ha introducido
correctamente el valor de un control
Bloquea el procesamiento de una pgina hasta
que todos los controles son vlidos
Evita el spoofing
o aadir
cdigo mal
intencionado

Validacin del lado del cliente y del


lado del servidor
ASP.NET puede generar
validacin del lado del
cliente y del lado del
servidor
Validacin del lado del
cliente

El usuario
introduce datos Mensaje

de error
Vlido?

No
Dependiente de la versin
del navegador
Cliente
S
Respuesta inmediata
Reduce los ciclos de
Servidor
postback
Vlido?

Validacin del lado del


servidor

Repite toda la validacin


del lado del cliente
Puede validar contra
datos almacenados

No

S
Aplicacin Web
procesada

Controles de validacin ASP.NET


ASP.NET proporciona controles de validacin para:
Comparar valores
Comparar con una frmula personalizada
Comparar con un intervalo
Comparar con un modelo de expresin habitual
Requerir entrada de datos por parte del usuario
Resumir los controles de validacin de una pgina

Agregar controles de validacin a un


Web
Form
1 Agregar un control de validacin
1.
1

Seleccionar el control de entrada de datos para


validar
22
33

Establecer propiedades
derunat="server"
validacin
<asp:TextBox
id="txtName"
/>
<asp:TextBox
id="txtName"
runat="server"
/>
<asp:Type_of_Validator
<asp:Type_of_Validator
id="Validator_id"
id="Validator_id"
runat="server"
runat="server"
ControlToValidate="txtName"
ControlToValidate="txtName"
ErrorMessage="Message_for_error_summary"
ErrorMessage="Message_for_error_summary"
Display="static|dynamic|none"
Display="static|dynamic|none"
Text="Text_to_display_by_input_control">
Text="Text_to_display_by_input_control">
</asp:Type_of_Validator>
</asp:Type_of_Validator>

Posicionar controles de validacin en un Web


Form
Crear mensajes de error
Seleccionar modo de presentacin
Esttico

Dinmico

Combinar controles de validacin


Pueden existir mltiples controles de validacin en
un nico control de entrada de datos
nicamente RequiredFieldValidator comprueba los
controles vacos

Uso del control ValidationSummary


Recopila los mensajes de error de todos los controles
de validacin de la pgina
Puede mostrar mensajes de texto y de error
Utilizar Text="*" para indicar la ubicacin del error
<asp:ValidationSummary
<asp:ValidationSummary id="valSummary"
id="valSummary"
runat="server"
runat="server"
HeaderText="These
HeaderText="These errors
errors were
were found:"
found:"
ShowSummary="True"
ShowSummary="True"
DisplayMode="List"/>
DisplayMode="List"/>

Controles de validacin de entrada


de datos
RequiredFieldValidator
InitialValue

CompareValidator

ValueToComparar o ControlToComparar
Type
Operator

RangeValidator

MinimumValue
MaximumValue
Type

Uso de el control
RegularExpressionValidator
Se utiliza cuando la entrada debe ajustarse a un
modelo predefinido
Visual Studio .NET incluye modelos para:
Nmeros de telfono
Cdigos postales
Direcciones electrnicas

<asp:RegularExpressionValidator
<asp:RegularExpressionValidator
ControlToValidate="US_PhoneNumber"
ControlToValidate="US_PhoneNumber"
ValidationExpression="
ValidationExpression="((\(\d{3}\)
((\(\d{3}\) ?)|(\d{3}-))?\d{3}-\d{4}
?)|(\d{3}-))?\d{3}-\d{4} ""
>*</asp:RegularExpressionValidator
>*</asp:RegularExpressionValidator >>

Qu son los procedimientos de


evento?
Acciones en respuesta a la interaccin de un usuario
con los controles de la pgina

Gestin de los eventos


Page.IsPostback
Page_Load se invoca en cada solicitud
Utilizar Page.IsPostBack para ejecutar lgica
condicional
private
private void
void Page_Load(object
Page_Load(object sender,
sender, System.EventArgs
System.EventArgs e)
e)
{{ if
(!Page.IsPostBack)
if (!Page.IsPostBack)
{{
//
// executes
executes only
only on
on initial
initial page
page load
load
}}
//this
//this code
code executes
executes on
on every
every request
request
}}
Private
Private Sub
Sub Page_Load(ByVal
Page_Load(ByVal ss As
As System.Object,
System.Object, __
ByVal
ByVal ee As
As System.EventArgs)
System.EventArgs) Handles
Handles MyBase.Load
MyBase.Load
If
Not
Page.IsPostBack
Then
If Not Page.IsPostBack Then
'executes
'executes only
only on
on initial
initial page
page load
load
End
Page.IsPostBack evita la recarga en cada postback
End If
If
'this
'this code
code executes
executes on
on every
every request
request
End
Sub
End Sub

Ejercicio
En el Tuvch se necesita validar el acceso a un sistema
de registro de usuarios.
Se requiere que a el usuario se le permita solamente 2
intentos y que valide que todos los campos estn
completados(RequiredValidator).
Si los datos son correctos desplegar un mensaje y
mandara a otro web form.

Conectividad a Base de
Datos

ADO.NET

III. Conectividad a Base de Datos


Introduccin
Ambiente conectado
Ambiente desconectado
Conexin a diferentes tipos de bases de datos
Conexin a Base de datos desde aplicaciones Windows
Conexin a Base de datos desde aplicaciones Web

III. Conectividad a Base de Datos


Propsito
Conocer los objetos que permiten el acceso a datos desde
una aplicacin

Base de Datos

Una base de datos ( db ) es una coleccin organizada de datos ,


normalmente se almacena en formato electrnico.
Se le permite introducir , gestionar , organizar y recuperar datos
de forma rpida Bases de datos tradicionales son organizadas por
registros (filas) , campos (columnas) almacenados en tablas que
se almacenan en los archivos de base.

Qu es el Modelado de Datos?
Es un conjunto de conceptos que permite describir, a distintos niveles de
abstraccin, la estructura de una base de datos, a la cual denominamos
esquema.
Los Modelos de Datos se dividen en 3 niveles:

Conceptual
Realizacin de
un esquema o
diagrama
representativo
de la base de
datos
( Entidades,
relaciones y
atributos)

Lgico
Migracin de
Modelo
Conceptual al
modelo
relacional
( Diccionario de
datos , UML)

Fsico
Implementacin
del nivel lgico a
nivel fsico
( Script en un
SGB e
interactuar con
la aplicacin o
base de datos
relacional)

Nivel Conceptual

E-R

Nivel Lgico

Diccionario de datos
Contiene la informacin referente a la estructura
de la base de datos.

Modelado relacional
Dr. E. F. Codd propuso el modelo relacional de bases de
datos en 1970. Es la base para el sistema de gestin de
bases de datos relacionales (RDBMS). El modelo
relacional consiste en lo siguiente:

Coleccin de objetos o relaciones .


conjunto de operadores que actan en la integridad de
los datos .
Las relaciones para la exactitud y consistencia.

MODELO RELACIONAL

Modelo Relacional
Una base de datos relacional una coleccin de
tablas de datos que se describen formalmente y
organizado segn el modelo relacional. Cada tabla debe
identificar una columna o grupo de columnas, llamado
la clave primaria, para identificar de forma exclusiva
cada fila

Tablas
Una tabla de base de datos es una coleccin de filas y
columnas que se utiliza para organizar la informacin
sobre un solo tema. Cada fila de una tabla corresponde
a un solo registro y contiene varios atributos que
describen la fila.
Estas tablas se almacenan en bases de datos.
EmployeeID

LastName

FirstName

Department

100

Smith

Bob

IT

101

Jones

Susan

Marketing

102

Adams

John

Finance

Normalizacin
Proceso de organizar datos en una base de datos incluye
crear tablas y establecer relaciones entre las tablas de que
proceso se utiliza para ayudar a eliminar datos redundantes.

First Normal Form


Order
Details
ProductCateg
ory
Product 1
Product 2

Order Details
ProdCat_ID
ProductID

Second Normal Form


Accounts
Address
PostCode
City

Third Normal Form

Orders
Quantity
Price
Total

Accounts
AccountNumb
er
Address
PostCode

Orders
Quantity
Price

PostCode
PostCode
City
State

SQL Server

SQL Server
Arquitectura Cliente Servidor

SQL Server
Sistema Manejador de Base de Datos

Almacenamiento
Integridad de los datos
Seguridad
Acceso a los datos

Qu es SQL?
Definicin:
Definicin: SQL
SQL es
es un
un lenguaje
lenguaje estndar
estndar
de
de mercado
mercado que
que ha
ha evolucionado
evolucionado hasta
hasta
convertirse
en
el
medio
de
mayor
convertirse en el medio de mayor
aceptacin
aceptacin para
para realizar
realizar consultas
consultas yy
datos
en
de
modificar
datos
en una
una base
base
de datos
datos
modificar
Sintaxis de
instrucciones
SQL

habituales

Para especificar exactamente qu


registros deseamos recuperar, utilizar
SELECT Campo FROM Tabla
Para limitar la seleccin de registros,
utilizar
SELECT * FROM Tabla WHERE Campo =
"String"
Para devolver registros en orden
ascendente, utilizar
SELECT
* FROM
FROM
Tabla ORDER BY Campo
SELECT
Nombre
SELECT
Nombre
FROM Empleados
Empleados
ASC

Ejemplo

Lenguaje SQL

SQL Server

Formas de Autenticacin
Modo Windows Only
Cuenta Windows
Lo valida el sistema operativo

Modo Mixto
Cuenta de SQL Server
Lo valida el manejador de Base de Datos

Qu es ADO.NET?

Objetos comunes de ADO.NET


Gestiona la conexin a
una base de datos

Base de datos

Ejecuta un comando de consulta


en la base de datos

Connection
Connection
Command
Command

DataAdapter
DataAdapter
DataSet
DataSet

Intercambia datos entre el


conjunto de datos y la base de datos
Almacena datos en un cach
distinto de la base de datos
Proporciona acceso eficaz a un
flujo de datos de slo lectura

DataReader
DataReader

Tipos de ambiente

Namespace
System.Data
Proporciona acceso a las clases que representan la
arquitectura de ADO.NET le permite compilar componentes
que administran eficazmente los datos de varios orgenes de
datos.

System.SqlClient
Describe una coleccin de clases que se utiliza para obtener
acceso a una base de datos de SQL Server en el espacio
administrado.
using System.Data;
using System.Data.SqlClient;

Cmo utilizar un objeto Connection


Utilizamos Connection para:

Elegir el tipo de conexin


Especificar la fuente de datos
Abrir la conexin a la fuente de datos
Cerrar la conexin a la fuente de datos

Ejemplo de conexin a una base de datos SQL Server


Dim
Dim PubsSQLConn
PubsSQLConn As
As SqlClient.SqlConnection
SqlClient.SqlConnection
PubsSQLConn
PubsSQLConn == New
New SqlClient.SqlConnection(
SqlClient.SqlConnection( ))
PubsSQLConn.ConnectionString
PubsSQLConn.ConnectionString == "Integrated
"Integrated Security=True;"
Security=True;" && __
"Data
"Data Source=local;Initial
Source=local;Initial Catalog=Pubs;"
Catalog=Pubs;"
PubsSQLConn.Open(
)
PubsSQLConn.Open( )

Crear la conexin
Uso de SqlConnection

Dim
DimstrConn
strConnAs
AsString
String=="data
"datasource=localhost;
source=localhost;""&&__
"initial
"initialcatalog=northwind;
catalog=northwind;integrated
integratedsecurity=true"
security=true"
Dim
conn
As
New
SqlConnection(strConn)
Dim conn As New SqlConnection(strConn)

string
stringstrConn
strConn=="data
"datasource=localhost;
source=localhost;""++
"initial
"initialcatalog=northwind;
catalog=northwind;integrated
integratedsecurity=true";
security=true";
SqlConnection
conn
=
new
SqlConnection(strConn);
SqlConnection conn = new SqlConnection(strConn);

Establecer los parmetros de la cadena de


conexin

Timeout de conexin
Fuente de datos
Catlogo inicial
Seguridad integrada

Contrasea

Persistir informacin
seguridad

Proveedor

ID de usuario

Cmo utilizar un objeto DataAdapter


Crear un DataAdapter

Declarar con la palabra clave Dim


Pasar una cadena de consulta y un objeto Connection como
parmetros
Dim
Dim PubsAdapter
PubsAdapter As
As SQLDataAdapter
SQLDataAdapter == New
New SQLDataAdapter
SQLDataAdapter __
("Select
("Select ** from
from Titles",
Titles", PubsSQLConn)
PubsSQLConn)

Mtodos principales de DataAdapter:


El mtodo Fill puebla un conjunto de datos (data set)
El mtodo Update transmite los cambios al almacn de datos

Cmo utilizar un objeto DataSet


Cmo funciona un DataSet

Almacena datos en un cach desconectado


Utiliza un modelo de objetos jerrquico de tablas, filas y
columnas

Podemos poblar un DataSet

Utilizando el mtodo Fill


Poblando las tablas manualmente
Leyendo un documento XML o un flujo
Fusionando o copiando el contenido de otro DataSet

Crear un DataSet

Crear y poblar un DataSet con DataTables

El mtodo Fill ejecuta el SelectCommand

DataSet
DataSetds
ds==new
newDataSet();
DataSet();
da.Fill(ds,
"Authors");
da.Fill(ds, "Authors");

Acceder a DataTable

ds.Tables["Authors"].Rows.Count;
ds.Tables["Authors"].Rows.Count;
string
stringstr="";
str="";
foreach(DataRow
foreach(DataRowr rinin
ds.Tables["Authors"].Rows)
ds.Tables["Authors"].Rows)
{{
str
str+=
+=r[2];
r[2];
str
+=
r["au_lname"];
str += r["au_lname"];
}}

Dim
Dimds
dsAs
AsNew
NewDataSet()
DataSet()
da.Fill(ds,
"Authors")
da.Fill(ds, "Authors")
ds.Tables("Authors").Rows.Count
ds.Tables("Authors").Rows.Count
Dim
Dimr rAs
AsDataRow
DataRow
Dim
str
As
Dim str AsString
String
For
Each
r
in
For Each r in__
ds.Tables("Authors").Rows
ds.Tables("Authors").Rows
str
str&=
&=r(2)
r(2)
str
&=
r("au_lname")
str &= r("au_lname")
Next
Next

Crear un DataSet

Crear y poblar un DataSet con DataTables

El mtodo Fill ejecuta el SelectCommand

DataSet
DataSetds
ds==new
newDataSet();
DataSet();
da.Fill(ds,
"Authors");
da.Fill(ds, "Authors");

Acceder a DataTable

ds.Tables["Authors"].Rows.Count;
ds.Tables["Authors"].Rows.Count;
string
stringstr="";
str="";
foreach(DataRow
foreach(DataRowr rinin
ds.Tables["Authors"].Rows)
ds.Tables["Authors"].Rows)
{{
str
str+=
+=r[2];
r[2];
str
+=
r["au_lname"];
str += r["au_lname"];
}}

Dim
Dimds
dsAs
AsNew
NewDataSet()
DataSet()
da.Fill(ds,
"Authors")
da.Fill(ds, "Authors")
ds.Tables("Authors").Rows.Count
ds.Tables("Authors").Rows.Count
Dim
Dimr rAs
AsDataRow
DataRow
Dim
str
As
Dim str AsString
String
For
Each
r
in
For Each r in__
ds.Tables("Authors").Rows
ds.Tables("Authors").Rows
str
str&=
&=r(2)
r(2)
str
&=
r("au_lname")
str &= r("au_lname")
Next
Next

Utilizar un DataView

Un DataView puede personalizarse para presentar un


subconjunto de datos de un DataTable

La propiedad DefaultView devuelve el DataView


predeterminado de la tabla
Dim
Dimdv
dvAs
AsDataView
DataView==ds.Tables("Authors").DefaultView
ds.Tables("Authors").DefaultView
DataView
DataViewdv
dv==ds.Tables["Authors"].DefaultView;
ds.Tables["Authors"].DefaultView;

Establecer una vista distinta de un DataSet

Dim
Dimdv
dvAs
AsNew
NewDataView
DataView(ds.Tables("Authors"))
(ds.Tables("Authors"))
dv.RowFilter
=
"state
=
'CA'"
dv.RowFilter = "state = 'CA'"
DataView
DataViewdv
dv==new
newDataView(ds.Tables["Authors"]);
DataView(ds.Tables["Authors"]);
dv.RowFilter
=
"state
dv.RowFilter = "state=='CA'";
'CA'";

Vincular un DataSet a un control


enlazado a lista

Crear el control
<asp:DataGrid
<asp:DataGridid="dg"
id="dg"runat="server"
runat="server"/>
/>

Vincular a un DataSet o un DataView


dg.DataSource
dg.DataSource==ds
ds
dg.DataMember
=
dg.DataMember ="Authors"
"Authors"
dg.DataBind()
dg.DataBind()

dg.DataSource
dg.DataSource==ds;
ds;
dg.DataMember
=
dg.DataMember ="Authors";
"Authors";
dg.DataBind()
;
dg.DataBind();

Objeto Command

Representa una Instruccin SQL o un procedimiento


almacenado que ejecuta en un origen de datos
Expone 4 mtodos importantes para devolver
datos:

ExecuteReader()
ExecuteScalar()
ExecuteNonQuery()
ExecuteXMLReader()

Llamada a StoresProcedures utilizando Parameters


Objeto Command especifico para cada proveedor:

SQLCommand
ODBCCommand
OLEDBCommand
OracleCommand

Crear un DataReader
Crear y abrir la conexin a base de
datos
Dim
mySqlCommand
As

Crear
el DataReader
desde
Dim
mySqlCommand
As New
New SqlCommand(
SqlCommand(
un
"select
*
from
customers",
mySqlConnection)
"select
* from customers", mySqlConnection)
comando
Dim myReader As SqlDataReader =
Dim myReader As SqlDataReader =
mySqlCommand.ExecuteReader()
mySqlCommand.ExecuteReader()

If
(myReader
Is
If Not
Not
(myReader
Is Nothing)
Nothing) Then
Theny
Cerrar
el
DataReader
myReader.Close()
myReader.Close()
End
End If
If
If
mySqlConnection.State
If mySqlConnection.State ==

ConnectionState.Open
Then
ConnectionState.Open Then
mySqlConnection.Close()
mySqlConnection.Close()
End
End If
If

la conexin

Crear un DataReader
Para utilizar un DataReader:

11 Crear y abrir la conexin a la base de


1.
datos
22
2. Crear un objeto Command
3.
33 Crear un DataReader desde el objeto
Command
44
4.
Invocar el mtodo ExecuteReader
5.
55 Utilizar el objeto DataReader
6.
Cerrar el objeto DataReader
66
7. Cerrar el objeto Connection

7
7Utilizar
el controlador de errores
TryCatchFinally

Leer datos de un DataReader


Invocar Read para cada registro
Devuelve False cuando no hay ms registros

Obtener campos
El parmetro es la posicin ordinal o nombre
del campo
While
While myReader.Read()
myReader.Read()
Console.Write(myReader("CustomerID).ToString()
Console.Write(myReader("CustomerID).ToString() ++ __
""
")
")
Console.WriteLine(myReader("CompanyName).ToString())
Console.WriteLine(myReader("CompanyName).ToString())
End
End While
While

Invocar close para liberar el lector y la


conexin

Uso de DataSets frente a DataReaders


DataSet

DataReader

1.

Crea una conexin de


base de datos

1.

Crea una conexin de base de datos

2.

Abre la conexin a la base de datos

2.

Almacena las consultas


en un DataAdapter

3.

Almacena consultas en un
SqlCommand

3.

Puebla el DataSet con


el mtodo Fill

4.

Puebla el DataReader con el


mtodo ExecuteReader

4.

Crea un DataView

5.

5.

Enlaza el DataView a
un control enlazado a
una lista

Invoca el mtodo Read para cada


registro, y el mtodo Get para cada
campo

6.

Muestra datos manualmente

7.

Cierra el DataReader y
la conexin

Prctica:
Escenario: La organizacin Karma A. C. cuenta en
promedio con 20 afiliados, sin embargo, debido a una
campaa de publicidad se pretende aumentar el
nmero de afiliados en un 100% en un mes.
Actualmente la organizacin no lleva ningn registro de
afiliados, debido a que sus integrantes se conocen muy
bien entre ellos, sin embargo, se pretende que para fin
de ao la organizacin siga creciendo hasta alcanzar
entre 180 a 200 afiliados. Por lo que Karma requiere una
herramienta que permita registrar los nombres y las
edades de sus afiliados. Considera que la aplicacin
debe ser accesible en los diferentes estados del pas.
Realiza el diseo Conceptual , Lgico y fsico.
Realiza la aplicacin.

You might also like