Conceptos ASP NET

Conceptos.
Para crear un sitio web debemos seleccionar desde el entorno del Visual Studio
2015: Archivo ->Nuevo sitio web:
Inmediatamente aparece un dilogo donde debemos seleccionar el lenguaje a

utilizar (Visual C#) la versin de Framework (por ejemplo 4.5.2), elegiremos crear
"Sitio web vaco de ASP.NET" y la carpeta donde se almacenarn todas las pginas
de nuestro directorio (por ejemplo c:\aspnetya\ejercicio001):
Ahora tenemos nuestro primer sitio web vaco, solo se ha creado un archivo de
configuracin llamado Web.config:
Creemos nuestra primer "Web Form" para esto debemos presionar el botn derecho
del mouse donde aparece el nombre de nuestra aplicacin "ejercicio001" y en este
men seleccionar Agregar -> Agregar nuevo elemento...:
En este dilogo seleccionamos el "Visual C#" como lenguaje base, luego
"Formulario Web Forms" y dejamos el nombre del archivo por defecto
"Default.aspx":
En la parte izquierda tenemos el ?Cuadro de herramientas?, en esta aparecen las
componentes visuales (Label, TextBox, Button etc.) que tenemos disponibles para
crear nuestro formulario Web.
En el centro aparece la pgina en vista de cdigo (se puede ver en ?vista de
diseo?, ?Dividir? y ?Cdigo?)
En la parte derecha disponemos del ?Explorador de soluciones? donde podemos
identificar el nombre de nuestro sitio web y los archivos contenidos en dicho sitio.
Siempre que creamos una aplicacin web debemos crear al menos un formulario
web inicial y lo almacenamos en el archivo Default.aspx (la extensin aspx indica
que se trata de una pgina dinmica ASP.Net, as como la extensin php indica que
su contenido est programado en PHP)
Adems del archivo Default.aspx se crea otro archivo llamada Default.aspx.cs (ste
archivo contiene la codificacin en C# de los eventos que definamos a los controles
del formulario)
Otro archivo que veremos ms adelante y que se crea en forma automtico es el
Web.config.
Para nuestro primer ejemplo implementaremos el ?Hola Mundo? para ello en el

recuadro central seleccionamos la pestaa ?Diseo? y desde el cuadro de
herramientas arrastramos un control de tipo Label. Seguidamente desde el cuadro
de propiedades ubicado en la pare inferior derecha de la pantalla inicializamos la
propiedad text con el mensaje que queremos que muestre nuestra ?Label?, en
nuestro caso ?Hola Mundo?. Una vez modificada la propiedad Text con el mensaje
que queremos mostrar y presionada la tecla Enter podemos ver como se actualiza la
ventana de Diseo en la parte centrar de nuestra pantalla:
Para probar nuestra pequea aplicacin desarrollada debemos presionar el tringulo
verde que se encuentra en la barra de botones, o desde el men de opciones:
Depurar->Iniciar depuracin, o presionar la tecla ?F5?.
Podemos ver que inmediatamente aparece el navegador configurado por defecto
con el resultado de la ejecucin de la pgina:
El Visual Studio 2015 instala un servidor web propio que est escuchando en un
puerto desocupado. Luego de cerrar la ventana del navegador debemos detener la
depuracin de nuestra aplicacin para poder modificarla, para esto podemos
seleccionar desde el men Depurar -> Detener Depuracin o presionar desde la
barra de botones el cuadradito morado (luego de esto aparece el ?Cuadro de
herramientas?)
Eventos
Modificaremos ahora nuestra aplicacin para que muestre la fecha del servidor en
una Label. Cuando desde el navegador solicitamos una pgina aspx lo primero que
se ejecuta es el evento Page_Load. Para poder definir un mtodo para dicho evento
hacemos doble clic sobre el WebForm con lo que inmediatamente se abre el archivo
Default.aspx.cs donde tenemos dicho mtodo:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
public partial class _Default : System.Web.UI.Page

{
protected void Page_Load(object sender,
EventArgs e)
{
}
}
Luego codificamos dentro del mtodo Page_Load el algoritmo que muestra la fecha
actual del servidor:
using System;
using System.Linq;
using System.Web;

{
EventArgs e)
{
Label1.Text = DateTime.Today.ToString("d");
}
}
Mediante el objeto DateTime y accediendo a la propiedad Today y llamamos al
mtodo ToString pasando un string con una "d" lo que hace que dicho mtodo nos
retorne el dia, mes y ao.
Si ejecutamos ahora la aplicacin en el navegador se ver reflejada la hora fecha
definida en el servidor web:
Captura del evento click de un objeto de la clase Button.
Para ver como funciona la clase Button cerraremos nuestro primer sitio web y
procederemos a crearemos otros. Para cerrar el sitio actual desde el men de
opciones elegimos Archivo -> Cerrar Solucin:
Ahora damos los mismos pasos que hicimos para crear el sitio ejercicio001 pero lo
llamamos ejercicio002 (almacenarlo en la carpeta c:\aspnetya\ejercicio002):
Creamos tambin el Web Form Default.aspx:
En nuestro Web Form disponemos un objeto de la clase Label y un objeto de la

clase Button.
La propiedad Text de la Label la inicializamos con el valor ?0? y la propiedad Text
del objeto Button lo inicializamos con la cadena "Sumar".
El objetivo es que cada vez que se presione el botn se actualice el contenido de la
Label con el valor actual ms uno.
La forma ms sencilla de generar dicho evento es hacer doble clic sobre el objeto
Button. Otra forma es seleccionar dicho objeto (Button) y en la ventana de
propiedades seleccionamos el cono del "rayo" y hacer doble clic sobre el evento
Click:
Luego para el evento Button1_Click actualizamos el contenido de la propiedad Text

de la Label con el valor actual ms uno:
using System;
using System.Linq;
using System.Web;

{
EventArgs e)
{
protected void Button1_Click(object sender,

EventArgs e)
{
int x = int.Parse(Label1.Text);
x++;
Label1.Text = x.ToString();
}
}
Debemos convertir a entero el contenido de la Label mediante el mtodo esttico
Parse de la clase int:
int x = int.Parse(Label1.Text);
Incrementamos en uno la variable x y la volvemos a mostrar en la Label:
x++;
Label1.Text = x.ToString();
Cuando ejecutamos la pgina cada vez que presionamos el botn se incrementa en
uno el contenido de la Label:
Controles Label, Button y TextBox.

Hasta ahora hemos utilizado los controles de tipo Label y Button, ahora utilizaremos
el control TextBox. Crearemos una aplicacin que nos permita ingresar dos nmeros
y luego en una Label muestre la suma de los mismos.
(Si tenemos un sitio web abierto podemos cerrarlo seleccionando la opcin: Archivo-
>Cerrar solucin y luego seguir los mismos pasos que vimos anteriormente para
crear un nuevo sitio web ASP.NET)
Crearemos un sitio web llamado ejercicio003 y desarrollaremos la siguiente interfaz
de usuario:
Los textos "Ingrese primer valor:" e "Ingrese segundo valor:" los escribimos
directamente en cambio el Button, los dos TextBox y la Label las arrastramos desde
el Cuadro de herramientas.
Inicializamos la propiedad Text del objeto de tipo Button con la etiqueta "Sumar".
Luego codificamos el evento click del objeto de la clase Button (en este evento
debemos extraer el contenido de los dos controles de tipo TextBox y proceder a
convertirlos a tipo de dato entero y sumarlos):
using System;
using System.Linq;
using System.Web;

{
EventArgs e)
{

EventArgs e)
{
int x1 = int.Parse(TextBox1.Text);
int suma = x1 + x2;
Label1.Text = "La suma de los dos valores
es:" + suma;
}
}
La clase int tiene un mtodo esttico llamado Parse y que tiene por objetivo recibir
un String y retornar el valor del mismo convertido a entero.
Luego de sumar mostramos en la Label el resultado de la suma de los dos valores
ingresados (al utilizar el operador + el string y el entero tenemos que se convierte
suma automticamente a string)
Control RadioButton.
Para probar el funcionamiento del control RadioButton crearemos un nuevo sitio

web llamado ejercicio004.
Crearemos una interfaz de usuario similar al problema anterior, con la salvedad que
le agregaremos dos controles de tipo RadioButton para poder indicar si queremos
sumar o restar los valores ingresados:
Como vemos agregamos dos controles de tipo RadioButton, inicializamos las
propiedades Text con los textos ?Sumar? y ?Restar?. Luego para indicar que los
controles RadioButton estn en el mismo grupo debemos inicializar la propiedad
GroupName con el mismo valor (con esto logramos que al seleccionar un
RadioButton el otro se desmarca), si nos olvidamos inicializar la propiedad
GroupName luego los dos controles de tipo RadioButton se podrn seleccionar en
forma simultnea (podemos asignar la propiedad GroupName de ambos controles
con el valor "operacion").
Si queremos que alguno de los dos RadioButton aparezca seleccionado por defecto
debemos inicializar la propiedad Checked con el valor true.
La codificacin del evento click del objeto Button1 es el siguiente:
using System;
using System.Linq;
using System.Web;

{
EventArgs e)
{
}

EventArgs e)
{
int resultado = x1 + x2;
if (RadioButton1.Checked)
{
resultado = x1 + x2;
Label1.Text = "La suma de los dos
valores es:" + resultado;
}
else
if (RadioButton2.Checked)
{
resultado = x1 - x2;
Label1.Text = "La diferencia de los
dos valores es:" + resultado;
}
}
}
Cuando se presiona el botn se ejecuta el mtodo Button1_Click donde primero
extraemos el contenido de los dos controles TextBox y los convertimos a entero.
Verificamos con if cual de los dos controles RadioButton se encuentra seleccionado.
La propiedad Checked del RadioButton indica si est seleccionado el control o no.
Control CheckBox.
Los controles CheckBox permiten que ms de uno sea seleccionado. Similar a los
controles RadioButton tiene dos estados (seleccionado o no seleccionado) y esto lo
sabemos segn el estado de la propiedad Checked.
Codificaremos un nuevo sitio web llamado ejercicio005 que permita cargar dos
valores y luego calcule la suma y/o resta de los valores ingresados. Como podemos
seleccionar ambas operaciones utilizaremos los controles de tipo CheckBox.
La interfaz visual es la siguiente:
La codificacin del evento click del botn es:
using System;
using System.Linq;
using System.Web;

{
EventArgs e)
{

EventArgs e)
{
Label1.Text = "";
int resultado;
if (CheckBox1.Checked)
{
resultado = x1 + x2;
this.Label1.Text = "La suma de los dos
valores es:" + resultado + "<br>";
}
if (CheckBox2.Checked)
{
resultado = x1 - x2;
Label1.Text = Label1.Text + "La
diferencia de los dos valores es:" + resultado;
}
}
}
Disponemos dos if a la misma altura ya que ambos CheckBox pueden estar
seleccionados. Previo a los if borramos el contenido de la Label en el caso que
tenga el resultado de operaciones anteriores.
Luego en el primer if verificamos si el primer CheckBox est seleccionado y
procedemos a inicializar la propiedad Text de la Label con el resultado de la suma
de los dos valores ingresados, seguidamente verificamos con un segundo if si el
siguiente CheckBox est seleccionado, en caso afirmativo agregamos al contenido
actual de la Label el resultado de la diferencia de los valores ingresados (Como
vemos podemos aadir elementos HTML a la propiedad Text de una Label, luego
estas sern interpretadas por el navegador)
En el navegador tenemos el siguiente resultado:
Control ListBox.
El control ListBox permite crear una lista de valores.

La propiedad Item permite definir los miembros de la lista (cada item define las
propiedades Text (valor a mostrar), Value (valor a retornar en caso de estar
seleccionado), Selected (con un valor lgico))
Otra propiedad muy importante del control ListBox es SelectionMode, esta admite
dos valores: Single o Multiple.
Crearemos un sitio web (ejercicio006) que permita cargar dos valores y mediante un
control ListBox poder seleccionar si queremos sumar, restar, multiplicar o dividir
dichos valores (como podemos seleccionar varias operaciones en forma simultnea
configuraremos la propiedad SelectionMode del ListBox con el valor Multiple)
cargamos en la propiedad Items las cuatro operaciones posibles.
Luego la interfaz visual a crear es la siguiente (insertamos tambin una Label luego
del botn ?Calcular?, con el objetivo de mostrar los resultados):
Cuando se presiona el botn calcular verificamos cual de las opciones est
seleccionada y procedemos a calcular y mostrar los resultados.
using System;
using System.Linq;
using System.Web;

{
EventArgs e)
{
}
EventArgs e)
{
Label1.Text = "";
if (ListBox1.Items[0].Selected)
{
int suma = x1 + x2;
Label1.Text = "La suma es:" + suma +
"<br>";
}
{
int resta = x1 - x2;
Label1.Text += "La diferencia:" + resta
+ "<br>";
}
{
int multi = x1 * x2;
Label1.Text += "El producto:" + multi +
"<br>";
}
{
int divi = x1 / x2;
Label1.Text += "La division:" + divi +
"<br>";
}
}
}
Como podemos ver primero vaciamos el contenido de la Label1 y procedemos
mediante cuatro if a verificar cuales de los elementos del ListBox se encuentran
seleccionados:
Si por ejemplo el primer elemento del ListBox se encuentra seleccionado
procedemos a sumar los dos valores almacenados en los TextBox y los agregamos
a la Label:
int suma = x1 + x2;
Label1.Text = "La suma es:" + suma + "<br>";
En el navegador tenemos como resultado:
Control DropDownList.
El control DropDownList permite crear una lista de valores y luego seleccionar solo
uno de ellos, esta es la diferencia fundamental con el control ListBox.
Para probar el DropDownList implementaremos el problema propuesto con el control
ListBox, ahora la interfaz es la siguiente (crear un sitio web llamado ejercicio007):
Cargamos las cuatro operaciones bsicas en el control DropDownList y para el
evento clic del botn tenemos que codificar:
using System;
using System.Linq;
using System.Web;

{
EventArgs e)
{
}
EventArgs e)
{
Label1.Text = "";
if (DropDownList1.Items[0].Selected)
{
int suma = x1 + x2;
Label1.Text = "La suma es:" + suma +
"<br>";
}
else
{
int resta = x1 - x2;
Label1.Text = "La diferencia:" +
resta + "<br>";
}
else
{
int multi = x1 * x2;
Label1.Text = "El producto:" +
multi + "<br>";
}
else
if
(DropDownList1.Items[3].Selected)
{
int divi = x1 / x2;
Label1.Text = "La division:"
+ divi + "<br>";
}
}
}
Como solo un elemento del control DropDowList puede estar seleccionado
disponemos una serie de if/else if para verificar cual de ellos es el seleccionado.
Cuando identificamos el item seleccionado procedemos a efectuar el clculo
correspondiente y mostrarlo en la Label.
En el navegador tenemos como resultado:
Ejercicios propuestos
1 ? Confeccionar una pgina que solicite el ingreso del nombre y apellido de una
persona (cada elemento en un TextBox), luego al presionar un botn mostrar en una
label si alguno de los datos no se carg.
2 ? Confeccionar una pgina que muestre un examen mltiple choice (disponer 4
preguntas y tres respuestas posibles por pregunta) utilizar controles de tipo
RadioButton para la seleccin de la respuesta correcta.
Mostrar la cantidad de respuestas correctas luego que se presiona un botn.
3 ? Disponer un conjunto de RadioButton agrupados. Mostrar en las leyendas de
cada RadioButton distintos buscadores (Google, Bing, Yahoo etc.)
Cuando se presione un botn redireccionar a dicho servidor (para redireccionar
debemos utilizar la siguiente sintaxis
Response.Redirect("http://www.google.com.ar");
4 ? Confeccionar el siguiente formulario para registrarse en un sitio web (utilizar
controles de la pestaa estandar)
En una Label mostrar los datos cargados en cada control (disponer la Label al final
del formulario) Hacer por lo menos 5 validaciones y mostrar mensajes de errores en
una Label.
Clases SQLConnection y SQLCommand (ABM - Altas, Bajas y
Modificaciones)
Conceptos.
Con ASP.Net podemos comunicarnos a distintos gestores de base de datos como pueden
ser SQL Server, Oracle, Access, MySQL etc.
Nosotros trabajaremos con el gestor de base de datos SQL Server por ser el ms
empleado cuando se utiliza la tecnologa de ASP.Net en el desarrollo de sitios web
dinmicos.
En esta clase especificaremos todo el cdigo necesario para acceder al gestor de base de
datos, desde la cadena de conexin hasta la implementacin de los comandos SQL a
enviar.
Si no tiene instalado el SQL Server puede seguir los pasos indicados aqu.
ABM (Altas, Bajas y Modificaciones)

Crearemos una base de datos en SQL Server llamada: 'base1' y dentro de la misma
definiremos una tabla llamada usuarios con tres campos:
nombre varchar(30) Clave primaria
clave varchar(30)
mail varchar(70)
Para crear la base de datos podemos hacerlo desde el Microsoft SQL Server Management
Studio:
Si no tiene instalado el Microsoft SQL Server Management Studio puede seguir los pasos
indicados aqu.
Creamos luego la tabla usuarios:

Ya tenemos creada la base de datos 'base1' y la tabla 'usuarios', crearemos un sitio web
vaco de ASP.NET en el Visual Studio llamado ejercicio011.
Agregaremos 5 Web Form llamados:
Default.aspx
alta.aspx
consulta.aspx
baja.aspx
modificacion.aspx
La pgina Default.aspx solo tendr los hipervnculos a las otras pginas que tendrn por
objetivo efectuar una el alta de usuarios, otra la consulta, otra la baja y la ltima la
modificacin:
Para crear esta interfaz insertaremos cuatro objetos de la clase HyperLink, como mnimo
debemos inicializar las propiedades text (es el texto que mostrar el hipervnculo en el
navegador y la propiedad NavigateUrl que indica el nombre de la pgina que debe cargar el
navegador cuando se presione el hipervnculo)
Definicin de la cadena de conexin con la base de datos en el archivo Web.config
Web.config es el archivo principal de opciones de configuracin para una aplicacin web en

ASP.NET.
El archivo es un documento XML que define informacin de configuracin concerniente a la
aplicacin web. El archivo Web.config contiene informacin que controla la carga de
mdulos, configuraciones de seguridad, configuraciones del estado de la sesin, opciones
de compilacin y el lenguaje de la aplicacin.
El archivo Web.config contiene tambin la cadenas de conexin a la base de datos.
Debemos agregar al archivo el elemento connectionStrings:
<?xml version="1.0" encoding="utf-8"?>

<configuration>
<system.web>
<compilation debug="true" targetFramework="4.5.2" />
<httpRuntime targetFramework="4.5.2" />
</system.web>
<connectionStrings>
<add name="cadenaconexion1"
connectionString="Data Source=DIEGO-PC\SQLEXPRESS;Initial
Catalog=base1;Integrated Security=true;"/>
</connectionStrings>
</configuration>
Como vemos en la propiedad connectionString indicamos en Initial Catalog el nombre de la
base de datos que hemos creado en SQL Server 'base1'.
En la propiedad Data Source usted debe fijarse como se llama la instancia de SQL Server
que instal en su mquina, esto puede hacerlo cuando arranca el SQL Server Management
Studio donde dice "Nombre del servidor"
Luego recuperaremos esta cadena de conexin mediante el nombre 'cadenaconexion1'.
Altas
Activemos desde el Visual Studio la pestaa alta.aspx para elaborar la interfaz visual que
nos permita efectuar la carga de datos de usuarios:
Como podemos ver disponemos tres controles de tipo TextBox, el que solicita el ingreso de
la clave modificamos la propiedad TextMode con el valor Password, los otros dos los
dejamos con el valor SingleLine.
Disponemos un objeto de la clase Button y una Label donde mostraremos un mensaje si el
alta se efectu correctamente.
Por ltimo disponemos un objeto de la clase HyperLink configurando la propiedad
NavigateUrl con la direccin de la pgina principal (Default.aspx)
Ahora codificamos el evento clic del botn de alta:
using System;
using System.Data.SqlClient;
using System.Linq;
using System.Web;
public partial class alta : System.Web.UI.Page

{
protected void Page_Load(object sender, EventArgs e)
{
}
EventArgs e)
{
string s =
System.Configuration.ConfigurationManager.ConnectionStri
ngs["cadenaconexion1"].ConnectionString;
SqlConnection conexion = new SqlConnection(s);
conexion.Open();
SqlCommand comando = new SqlCommand("insert into
usuarios(nombre,clave,mail) values('" +
TextBox1.Text + "','" + this.TextBox2.Text
+ "','" +
TextBox3.Text + "')", conexion);
comando.ExecuteNonQuery();
Label1.Text = "Se registro el usuario";
conexion.Close();
}
}
Lo primero que debemos hacer es importar el espacio de nombres donde se encuentra
definida la clase SqlException:
Al presionar el botn, primero extraemos la cadena de conexin que tenemos almacenada
en el archivo Web.config:
string s =
System.Configuration.ConfigurationManager.ConnectionStrings["cadenaconexion1"].Co
nnectionString;
Creamos un objeto de la clase SQLConnection indicando como parmetro la cadena de
conexin que rescatamos anteriormente:
Abrimos la conexin:
conexion.Open();
Creamos un objeto de la clase SqlCommand crendolo con los datos cargados en los
controles TextBox:
SqlCommand comando = new SqlCommand("insert into
usuarios(nombre,clave,mail) values('" +
TextBox1.Text + "','" + this.TextBox2.Text + "','" +
TextBox3.Text + "')", conexion);
Pedimos a SQL Server que ejecute el comando especificado anteriormente:
comando.ExecuteNonQuery();
Cerramos la conexin:
conexion.Close();
Consultas
Seleccionamos del Explorador de soluciones la pgina consulta.aspx y procedemos a
elaborar la siguiente interfaz visual (disponemos un TextBox, un Button, una Label y un
HyperLink:
El cdigo del evento click del botn es:

using System;
using System.Linq;
using System.Web;
public partial class consulta : System.Web.UI.Page

{
{

EventArgs e)
{
string s =
conexion.Open();
SqlCommand comando = new SqlCommand("select
nombre,clave,mail from usuarios " +
" where nombre='" + this.TextBox1.Text +
"'", conexion);
SqlDataReader registro =
comando.ExecuteReader();
if (registro.Read())
this.Label1.Text = "Clave:" +
registro["clave"] + "<br>" +
"Mail:" +
registro["mail"];
else
this.Label1.Text = "No existe un usuario con
dicho nombre";
conexion.Close();
}
}
Para poder recuperar los datos lo hacemos creando un objeto de la clase SqlDataReader e
inicializndolo mediante la llamada del mtodo ExecuteReader de la clase SQLCommand:
SqlDataReader registro = comando.ExecuteReader();
Luego recorremos el SqlDataReader (como este caso puede retornar cero o una fila lo
hacemos mediante un if:
Si el mtodo Read retorna true luego podemos acceder a la fila recuperada con el select.
Baja
Seleccionamos del Explorador de soluciones la pgina baja.aspx y procedemos a elaborar

la siguiente interfaz visual:
Luego el cdigo a ejecutar cuando se presiona el botn ?Borrar? de la pgina es:
using System;
using System.Linq;
using System.Web;
public partial class baja : System.Web.UI.Page

{
{

EventArgs e)
{
string s =
conexion.Open();
SqlCommand comando = new SqlCommand("delete from
usuarios where nombre='" + this.TextBox1.Text + "'",
conexion);
int cantidad = comando.ExecuteNonQuery();
if (cantidad == 1)
this.Label1.Text = "Se borr el usuario";
else
dicho nombre";
conexion.Close();
}
}
El mtodo ExecuteNonQuery retorna un entero y representa la cantidad de filas borradas
de la tabla.
Modificaciones
Por ltimo implementaremos la modificacin de datos. Seleccionamos del Explorador de

soluciones la pgina modificacion.aspx y procedemos a elaborar la siguiente interfaz visual:
Para efectuar la modificacin de datos de un usuario procederemos primero a la bsqueda

de los datos actuales.
Luego el cdigo para los eventos clic de los dos botones es:
using System;
using System.Linq;
using System.Web;
public partial class modificacion : System.Web.UI.Page

{
{

EventArgs e)
{
string s =
conexion.Open();
SqlCommand comando = new SqlCommand("select
nombre,clave,mail from usuarios " +
" where nombre='" + this.TextBox1.Text +
"'", conexion);
comando.ExecuteReader();
{
this.TextBox2.Text =
registro["clave"].ToString();
this.TextBox3.Text =
registro["mail"].ToString();
}
else
dicho nombre";
conexion.Close();
}

EventArgs e)
{
string s =
conexion.Open();
SqlCommand comando = new SqlCommand("update
usuarios set " +
"clave='" + this.TextBox2.Text +
"',mail='" + this.TextBox3.Text +
"' where nombre='" + this.TextBox1.Text
+ "'", conexion);
int cantidad = comando.ExecuteNonQuery();
if (cantidad == 1)
this.Label2.Text = "Datos Modificados";
else
this.Label2.Text = "No existe el usuario";
conexion.Close();
}
}
El botn ?Buscar? hace lo mismo que vimos en la consulta. Luego cuando se presiona el
botn ?Modificar? procedemos a hacer un update de la tabla usuarios con los datos
cargados en los TextBox.
Ejercicio propuesto
1 ? Crear una tabla:
alumnos (dni varchar(8), apellidonom varchar(50), provincia varchar(30))
Confeccionar una serie de pginas que permitan efectuar altas, bajas, modificaciones y consultas.
Clase SQLDataSource (ABM - Altas, Bajas y Modificaciones)
Conceptos.
Veremos otra forma de implementar el acceso a Sql Server utilizando una serie de clases
que nos facilitan codificar los comandos SQL mediante dilogos administrados por el Visual
Studio.
Trabajaremos con la misma base de datos de la clase anterior : base1 y la misma tabla
usuarios:
clave varchar(30)
mail varchar(30)
Crearemos un sitio web en el Visual Studio llamado ejercicio012.
Crearemos 5 Web Form y les daremos los nombres:
Default.asxp
alta.aspx
consulta.aspx
baja.aspx
modificacion.aspx
La primer pgina solo tendr los hipervnculos a otras pginas que tendrn por objetivo
efectuar una el alta de usuarios, otra la baja, otra las modificaciones y por ltimo otra la
consulta:
debemos inicializar las propiedades Text (es el texto que mostrar el hipervnculo en el
Altas
Conexin con la base de datos
Ahora veremos como crear una conexin con nuestra base de datos que hemos creado
desde SQL Server, seleccionamos desde el men del Visual Studio el "Explorador de
servidores"
Seleccionamos la solapa ?Explorador de servidores? y presionamos botn derecho sobre
"Conexiones a datos", elegimos la opcin ?Agregar conexin?, aparece un ventana de
configuracin:
Y seguidamente seleccionamos el servidor (lo podemos copiar del Sql Server Management
Studio) y la base de datos que trabajaremos:
Debemos seleccionar el nombre del servidor y posteriormente el nombre de la base de
datos.
Podemos presionar luego el botn ?Probar conexin? para comprobar la correcta
configuracin de la conexin.
Presionamos por ltimo el botn ?Aceptar?, veremos luego que aparece en la pestaa del
?Explorador de servidores? la conexin de datos que acabamos de crear. Podemos
presionar sobre el signo ms que aparece en nuestra conexin y ver que tenemos
disponible el acceso a las Tablas, Vistas, Procedimientos almacenados etc. definidos para
la base de datos:
Desde el ?explorador de servidores? se puede ver las tablas, campos de una tabla e
inclusive si presionamos el botn derecho del mouse sobre la tabla usuarios podemos ver
los datos de la misma.
Ahora empezaremos con el alta de usuarios.
Del cuadro de herramientas seleccionamos un control de la clase SqlDataSource (tener en
cuenta que est en el grupo ?Datos? y no en el grupo ?Estndar?)
Ahora vemos que nuestro formulario tiene un componente llamado SqlDataSource1 que es
de la clase SqlDataSource. Este componente visual no se ver en tiempo de ejecucin
como veremos ms adelante.
Seleccionamos el control SqlDataSource1 del formulario y en la ventana de ?Propiedades?
inicializamos la propiedad ConnectionString con el valor que aparece al presionar la
pestaa de la derecha (bsicamente es la cadena de conexin que creamos
anteriormente):
Ahora nos queda configura la propiedad InsertQuery con el comando SQL que nos permite
insertar un registro en una tabla.
La propiedad InsertQuery nos abre una ventana de dilogo donde debemos configurar el
comando INSERT:
Este dilogo es muy importante ingresar correctamente el comando SQL parametrizando
los valores que sern remplazados en tiempo de ejecucin con los datos que cargue el
operador.
Los parmetros se indican con un nombre antecedindole el carcter @.
Luego de crear completamente el comando Insert procedemos a presionar el botn
"Actualizar parmetros".
Si queremos comprobar si nuestro comando SQL est correcto presionamos el botn
"Generador de consultas?" y desde este nuevo dilogo presionamos el botn ?Ejecutar
consulta?:
(Tambin desde este dilogo podemos codificar la consulta, probarla y finalmente
confirmarla)
Lo que no hay que olvidarse nunca es que cada vez que agregamos o borramos un
parmetro de nuestro comando SQL es presionar el botn ?Actualizar parmetros?.
using System;
using System.Linq;
using System.Web;

{
{
}

EventArgs e)
{
SqlDataSource1.InsertParameters["nombre"].DefaultValue =
TextBox1.Text;
SqlDataSource1.InsertParameters["clave"].DefaultValue =
TextBox2.Text;
SqlDataSource1.InsertParameters["mail"].DefaultValue =
TextBox3.Text;
SqlDataSource1.Insert();
Label1.Text = "Se efectu la carga";
TextBox1.Text = "";
TextBox2.Text = "";
TextBox3.Text = "";
}
}
Al presionar el botn inicializamos los tres parmetros del comando SQL que hemos
configurado en el SqlDataSource. Para acceder a dichos parmetros disponemos de la
propiedad InsertParameters que le indicamos como subndice el nombre del parmetro.
Luego de inicializar los tres parmetros procedemos a llamar al mtodo Insert de la clase
SqlDataSource.
Como vemos es mucho ms limpio que crear directamente aqu el comando SQL como
vimos en el concepto anterior.
Consultas

elaborar la siguiente interfaz visual (disponemos un TextBox, un Button, una Label, un
HyperLink y un SqlDataSoruce:
Configuramos el SqlDataSource1, luego de seleccionarlo con el mouse modificamos la
propiedad ConnectionString (con la conexin creada anteriormente) y en el dilogo que
abre la propiedad SelectQuery procedemos a codificar el comando select:
select clave,mail from usuarios where nombre=@nombre
Es decir recuperamos la clave y mail de un determinado usuario (recordar de presionar el
botn ?Actualizar parmetros)
El cdigo del evento clic es:
using System;
using System.Linq;
using System.Web;

{
{
}
EventArgs e)
{
SqlDataSource1.SelectParameters["nombre"].DefaultValue =
TextBox1.Text;
SqlDataSource1.DataSourceMode =
SqlDataSourceMode.DataReader;
SqlDataReader datos;
datos =
(SqlDataReader)SqlDataSource1.Select(DataSourceSelectArg
uments.Empty);
if (datos.Read())
Label1.Text = "Clave:" + datos["clave"] +
"<br>Mail:" + datos["mail"];
else
Label1.Text = "No existe un usuario con
dicho nombre";
}
}
Importamos el espacio de nombres SqlClient donde se encuentra la clase SqlDataReader:
Para poder recuperar los datos mediante un objeto de la clase SqlDataReader debemos
configurar el SqlDataSource indicando a la propiedad DataSourceMode el siguiente valor:
SqlDataSource1.DataSourceMode = SqlDataSourceMode.DataReader;
Ahora cuando llamemos al mtodo select del SqlDataSource lo hacemos con la siguiente
sintaxis:
datos =
(SqlDataReader)SqlDataSource1.Select(DataSourceSelectArguments.Empty);
if (datos.Read())
Bajas

Inicializamos la propiedad ConnectionString del SqlDataSource1 con la conexin que
habamos creado e inicializamos la propiedad DeleteQuery:
using System;
using System.Linq;
using System.Web;

{
{
}
EventArgs e)
{
SqlDataSource1.DeleteParameters["nombre"].DefaultValue =
TextBox1.Text;
int cant;
cant = SqlDataSource1.Delete();
if (cant == 1)
Label1.Text = "Se borr el usuario";
else
Label1.Text = "No existe dicho nombre";
}
}
Procedemos a inicializar el parmetro y luego llamamos al mtodo Delete del
SqlDataSource. El mtodo Delete retorna un entero y representa la cantidad de filas
borradas de la tabla.
Modificaciones

de los datos actuales. Esto hace que necesitemos un control de la clase SqlDataSource
(iniciar primero la propiedad ConnectionString)
El SqlDataSource1 nos permite consultar los datos de un usuario por su nombre y mostrar
el resultado en dos controles de tipo TextBox. Definir en la propiedad SelectQuery:
No olvidar actualizar parmetros cuando definimos el comando SQL en el dilogo que
configuramos el SelectQuery.
Luego tambin configuramos la propiedad UpdateQuery:
update usuarios set clave = @clave, mail = @mail where nombre = @nombre
El cdigo para los eventos clic de los dos botones es:
using System;
using System.Linq;
using System.Web;

{
{

EventArgs e)
{
TextBox1.Text;
datos =
uments.Empty);
if (datos.Read())
{
TextBox2.Text = datos["clave"].ToString();
TextBox3.Text = datos["mail"].ToString();
}
else
dicho nombre";
}

EventArgs e)
{
SqlDataSource1.UpdateParameters["nombre"].DefaultValue =
TextBox1.Text;
SqlDataSource1.UpdateParameters["clave"].DefaultValue =
TextBox2.Text;
SqlDataSource1.UpdateParameters["mail"].DefaultValue =
TextBox3.Text;
int cant;
cant = SqlDataSource1.Update();
if (cant == 1)
Label2.Text = "Se modificaron los datos";
else
Label2.Text = "No existe dicho codigo de
usuario";
}
}
El mtodo Update de la clase SqlDataSource retorna un entero que indica la cantidad de
registros modificados de la tabla (si retorna un 1 significa que un registro fue modificado):
int cant;
Clase SQLDataSource (ABM - Altas, Bajas y Modificaciones)
Conceptos.
Veremos otra forma de implementar el acceso a Sql Server utilizando una serie de clases
que nos facilitan codificar los comandos SQL mediante dilogos administrados por el Visual
Studio.
Trabajaremos con la misma base de datos de la clase anterior : base1 y la misma tabla
usuarios:
clave varchar(30)
mail varchar(30)
Default.asxp
alta.aspx
consulta.aspx
baja.aspx
modificacion.aspx
La primer pgina solo tendr los hipervnculos a otras pginas que tendrn por objetivo
efectuar una el alta de usuarios, otra la baja, otra las modificaciones y por ltimo otra la
consulta:
Altas
Conexin con la base de datos
Ahora veremos como crear una conexin con nuestra base de datos que hemos creado
desde SQL Server, seleccionamos desde el men del Visual Studio el "Explorador de
servidores"
Seleccionamos la solapa ?Explorador de servidores? y presionamos botn derecho sobre
"Conexiones a datos", elegimos la opcin ?Agregar conexin?, aparece un ventana de
configuracin:
Y seguidamente seleccionamos el servidor (lo podemos copiar del Sql Server Management
Studio) y la base de datos que trabajaremos:
Debemos seleccionar el nombre del servidor y posteriormente el nombre de la base de
datos.
Podemos presionar luego el botn ?Probar conexin? para comprobar la correcta
configuracin de la conexin.
Presionamos por ltimo el botn ?Aceptar?, veremos luego que aparece en la pestaa del
?Explorador de servidores? la conexin de datos que acabamos de crear. Podemos
presionar sobre el signo ms que aparece en nuestra conexin y ver que tenemos
disponible el acceso a las Tablas, Vistas, Procedimientos almacenados etc. definidos para
la base de datos:
Desde el ?explorador de servidores? se puede ver las tablas, campos de una tabla e
inclusive si presionamos el botn derecho del mouse sobre la tabla usuarios podemos ver
los datos de la misma.
Ahora empezaremos con el alta de usuarios.
Ahora vemos que nuestro formulario tiene un componente llamado SqlDataSource1 que es
de la clase SqlDataSource. Este componente visual no se ver en tiempo de ejecucin
como veremos ms adelante.
Seleccionamos el control SqlDataSource1 del formulario y en la ventana de ?Propiedades?
inicializamos la propiedad ConnectionString con el valor que aparece al presionar la
pestaa de la derecha (bsicamente es la cadena de conexin que creamos
anteriormente):
Ahora nos queda configura la propiedad InsertQuery con el comando SQL que nos permite
insertar un registro en una tabla.
La propiedad InsertQuery nos abre una ventana de dilogo donde debemos configurar el
comando INSERT:
Este dilogo es muy importante ingresar correctamente el comando SQL parametrizando
los valores que sern remplazados en tiempo de ejecucin con los datos que cargue el
operador.
Los parmetros se indican con un nombre antecedindole el carcter @.
Luego de crear completamente el comando Insert procedemos a presionar el botn
"Actualizar parmetros".
Si queremos comprobar si nuestro comando SQL est correcto presionamos el botn
"Generador de consultas?" y desde este nuevo dilogo presionamos el botn ?Ejecutar
consulta?:
(Tambin desde este dilogo podemos codificar la consulta, probarla y finalmente
confirmarla)
Lo que no hay que olvidarse nunca es que cada vez que agregamos o borramos un
parmetro de nuestro comando SQL es presionar el botn ?Actualizar parmetros?.
using System;
using System.Linq;
using System.Web;

{
{
}

EventArgs e)
{
SqlDataSource1.InsertParameters["nombre"].DefaultValue =
TextBox1.Text;
SqlDataSource1.InsertParameters["clave"].DefaultValue =
TextBox2.Text;
SqlDataSource1.InsertParameters["mail"].DefaultValue =
TextBox3.Text;
TextBox1.Text = "";
TextBox2.Text = "";
TextBox3.Text = "";
}
}
Al presionar el botn inicializamos los tres parmetros del comando SQL que hemos
configurado en el SqlDataSource. Para acceder a dichos parmetros disponemos de la
propiedad InsertParameters que le indicamos como subndice el nombre del parmetro.
Luego de inicializar los tres parmetros procedemos a llamar al mtodo Insert de la clase
SqlDataSource.
Como vemos es mucho ms limpio que crear directamente aqu el comando SQL como
vimos en el concepto anterior.
Consultas

elaborar la siguiente interfaz visual (disponemos un TextBox, un Button, una Label, un
HyperLink y un SqlDataSoruce:
Es decir recuperamos la clave y mail de un determinado usuario (recordar de presionar el
botn ?Actualizar parmetros)
using System;
using System.Linq;
using System.Web;

{
{
}
EventArgs e)
{
TextBox1.Text;
datos =
uments.Empty);
if (datos.Read())
Label1.Text = "Clave:" + datos["clave"] +
"<br>Mail:" + datos["mail"];
else
dicho nombre";
}
}
Importamos el espacio de nombres SqlClient donde se encuentra la clase SqlDataReader:
sintaxis:
datos =
if (datos.Read())
Bajas

habamos creado e inicializamos la propiedad DeleteQuery:
using System;
using System.Linq;
using System.Web;

{
{
}
EventArgs e)
{
SqlDataSource1.DeleteParameters["nombre"].DefaultValue =
TextBox1.Text;
int cant;
if (cant == 1)
Label1.Text = "Se borr el usuario";
else
Label1.Text = "No existe dicho nombre";
}
}
Modificaciones

de los datos actuales. Esto hace que necesitemos un control de la clase SqlDataSource
(iniciar primero la propiedad ConnectionString)
El SqlDataSource1 nos permite consultar los datos de un usuario por su nombre y mostrar
el resultado en dos controles de tipo TextBox. Definir en la propiedad SelectQuery:
No olvidar actualizar parmetros cuando definimos el comando SQL en el dilogo que
configuramos el SelectQuery.
Luego tambin configuramos la propiedad UpdateQuery:
update usuarios set clave = @clave, mail = @mail where nombre = @nombre
El cdigo para los eventos clic de los dos botones es:
using System;
using System.Linq;
using System.Web;

{
{

EventArgs e)
{
TextBox1.Text;
datos =
uments.Empty);
if (datos.Read())
{
TextBox2.Text = datos["clave"].ToString();
TextBox3.Text = datos["mail"].ToString();
}
else
dicho nombre";
}

EventArgs e)
{
SqlDataSource1.UpdateParameters["nombre"].DefaultValue =
TextBox1.Text;
SqlDataSource1.UpdateParameters["clave"].DefaultValue =
TextBox2.Text;
SqlDataSource1.UpdateParameters["mail"].DefaultValue =
TextBox3.Text;
int cant;
if (cant == 1)
Label2.Text = "Se modificaron los datos";
else
Label2.Text = "No existe dicho codigo de
usuario";
}
}
El mtodo Update de la clase SqlDataSource retorna un entero que indica la cantidad de
registros modificados de la tabla (si retorna un 1 significa que un registro fue modificado):
int cant;
Clase SQLDataSource (ABM con varias tablas)
Conceptos.
Continuamos con la base de datos que creamos en la clase anterior en SQL Server
llamada: base1 y dentro de la misma crearemos ahora dos nuevas tablas:
Tabla: articulos
codigo int Clave primaria e identidad.
descripcion varchar(50)
precio float
codigorubro int
Tabla: rubros
codigo int Clave primaria e identidad
descripcin varchar(50)
Recordemos que al definir un campo identidad luego el valor lo genera automticamente el
SQL Server y no debemos cargarlo por teclado:
Ahora tenemos creadas las dos tablas con la siguiente estructuras:
Default.asxp
altarubros.aspx
altaarticulos.aspx
consultaarticulos.aspx
bajaarticulos.aspx
modificacionarticulos.aspx
La primer pgina Default.aspx solo tendr los hipervnculos a otras pginas que tendrn por
objetivo efectuar una el alta de rubros, alta de articulos, otra la baja de articulos, otra las
modificaciones de articulos y por ltimo otra la consulta de articulos.
Para crear esta interfaz insertaremos cinco objetos de la clase HyperLink, como mnimo
La pgina Default.aspx queda con los siguientes objetos:
Alta de rubros
Creamos la siguiente interfaz para poder cargar nombres de rubros:

Igual que en el concepto anterior debemos inicializar del objeto SqlDataSource la propiedad
ConnectionString y configurar la propiedad InsertQuery con el comando respectivo:
Para el evento clic del botn insertamos el siguiente cdigo:
using System;
using System.Linq;
using System.Web;
public partial class altarubro : System.Web.UI.Page

{
{

EventArgs e)
{
SqlDataSource1.InsertParameters["descripcion"].DefaultVa
lue = TextBox1.Text;
TextBox1.Text = "";
}
}
Si ejecutamos ya nuestro sitio web podemos probar como cargar un par de rubros en la
tabla:
Alta de articulos
Para efectuar el alta de articulos dispondremos un control de tipo DropDownList el cual nos
permitir seleccionar el rubro que pertenece el articulo que estamos cargando.
Adems disponemos dos objetos de la clase TextBox para ingresar la descripcin y precio
del artculo.
Hasta este momento la interfaz debe ser igual a:
Ahora podemos ver que nuestro formulario tiene un componente llamado SqlDataSource1
que es de la clase SqlDataSource.
Ahora modificaremos el nombre de este objeto (SqlDataSource1) por
SqlDataSourceRubros.
Este primer SqlDataSource nos permitir rescatar los datos de los rubros (codigo y
descripcin) y poblar el control DropDownList.
Seleccionamos el control SqlDataSourceRubros del formulario y en la ventana de
?Propiedades? inicializamos la propiedad ConnectionString con el valor creado en el
concepto anterior (bsicamente es la cadena de conexin que creamos anteriormente)
Ahora nos queda configura la propiedad SelectQuery con el comando SQL que nos permite
recuperar todas las filas de la tabla rubros.
La propiedad SelectQuery nos abre una ventana de dilogo donde debemos configurar el
comando SELECT:
select codigo,descripcion from rubros
Ahora seleccionamos el DropDownList1 y en el men que aparece en el mismo objeto
seleccionamos "Elegir origen de datos..."
En este dilogo seleccionamos el SqlDataSourceRubros y presionamos "Actualizar
esquema":
Seguidamente elegimos el campo a mostrar y el valor a retornar del DropDownList:
Ahora agregamos un segundo SqlDataSource y procedemos a darle como nombre
SqlDataSourceArticulos y configurar su ConnectionString:
Configuramos la propiedad InsertQuery para implementar el alta de articulo:
Ahora ya hemos dado todos los pasos para configurar el alto de artculos, debemos
implementar el evento clic del botn de alta:
using System;
using System.Linq;
using System.Web;
public partial class altaarticulos : System.Web.UI.Page

{
{

EventArgs e)
{
SqlDataSourceArticulos.InsertParameters["descripcion"].D
efaultValue = TextBox1.Text;
SqlDataSourceArticulos.InsertParameters["precio"].Defaul
tValue = TextBox2.Text;
SqlDataSourceArticulos.InsertParameters["codigorubro"].D
efaultValue = DropDownList1.SelectedValue;
SqlDataSourceArticulos.Insert();
Label1.Text = "se efectu la carga";
TextBox1.Text = "";
TextBox2.Text = "";
}
}
Si ejecutamos la aplicacin ya podemos cargar artculos y ver que nuestro DropDownList
muestra todos los rubros:
Consultas de articulos
Seleccionamos del Explorador de soluciones la pgina consultaarticulos.aspx y

procedemos a elaborar la siguiente interfaz visual (disponemos un TextBox, un Button, una
Label, un HyperLink y un SqlDataSource):
select ar.descripcion as descriarticulo,
precio,
ru.descripcion as descrirubro
from articulos as ar
join rubros as ru on ru.codigo=ar.codigorubro
where ar.codigo=@codigo
Es decir recuperamos la descripcin del artculo, su precio y la descripcin del rubro de la
otra tabla (recordar de presionar el botn ?Actualizar parmetros)
Debemos crear alias para los campos que tienen el mismo nombre en las tablas articulos y
rubros.
using System;
using System.Linq;
using System.Web;
public partial class consultaarticulos :

System.Web.UI.Page
{
{

EventArgs e)
{
SqlDataSource1.SelectParameters["codigo"].DefaultValue =
TextBox1.Text;
SqlDataReader registros;
registros =
uments.Empty);
if (registros.Read())
Label1.Text = "Descripcion:" +
registros["descriarticulo"] + "<br>" +
"Precio:" + registros["precio"] + "<br>"
+
"Rubro:" + registros["descrirubro"];
else
Label1.Text = "No existe un artculo con
dicho cdigo";
}
}
sintaxis:
registros =
hacemos mediante un if):
Si el mtodo Read retorna true luego podemos acceder a la fila recuperada con el select:
Label1.Text = "Descripcion:" +
registros["descriarticulo"] + "<br>" +
"Precio:" + registros["precio"] + "<br>" +
"Rubro:" + registros["descrirubro"];
Bajas de artculos
Seleccionamos del Explorador de soluciones la pgina bajaarticulos.aspx y procedemos a

elaborar la siguiente interfaz visual:

habamos creado e inicializamos la propiedad DeleteQuery con el comando:
delete from articulos where codigo=@codigo
using System;
using System.Linq;
using System.Web;
public partial class bajaarticulos : System.Web.UI.Page

{
{

EventArgs e)
{
SqlDataSource1.DeleteParameters["codigo"].DefaultValue =
TextBox1.Text;
int cant;
if (cant == 1)
Label1.Text = "Se borr el artculo";
else
Label1.Text = "No existe el codigo";
}
}
Modificaciones de artculos.

soluciones la pgina modificacionartculos.aspx y procedemos a elaborar la siguiente
interface visual:
Para efectuar la modificacin de datos de un artculo procederemos primero a la bsqueda
de los datos actuales. Esto hace que necesitemos un primer control de tipo SqlDataSource
(que llamamos SqlDataSourceArticulos)
El primer SqlDataSource nos permite consultar los datos de un artculo por su cdigo y
mostrar el resultado en dos controles de tipo TextBox y en un control de tipo DropDownList
el rubro que pertenece.
Para inicializar el DropDownList debemos crear un segundo SqlDataSource
(SqlDataSourceRubros)
El SqlDataSourceArticulos debemos configurar las propiedades:
- ConnectionString.
- SelectQuery
select descriocion,precio,codigorubro from articulos
where codigo=@codigo:
- UpdateQuery
update articulos set descripcion=@descripcion,
precio=@precio,
codigorubro=@codigorubro
where codigo=@codigo
El SqlDataSourceRubros debemos configurar las propiedades:

- ConnectionString.
- SelectQuery
select codigo,descripcion from rubros
Luego el cdigo para los eventos clic de los dos botones es:
using System;
using System.Linq;
using System.Web;
public partial class modificacionarticulos :

System.Web.UI.Page
{
{

EventArgs e)
{
SqlDataSourceArticulos.SelectParameters["codigo"].Defaul
SqlDataSourceArticulos.DataSourceMode =
registros =
(SqlDataReader)SqlDataSourceArticulos.Select(DataSourceS
electArguments.Empty);
{
TextBox2.Text =
registros["descripcion"].ToString();
TextBox3.Text =
registros["precio"].ToString();
DropDownList1.SelectedValue =
registros["codigorubro"].ToString();
DropDownList1.DataSource =
SqlDataSourceRubros;
DropDownList1.DataTextField = "descripcion";
DropDownList1.DataValueField = "codigo";
DropDownList1.DataBind();
}
else
Label1.Text = "No existe un artculo con
dicho cdigo";
}

EventArgs e)
{
SqlDataSourceArticulos.UpdateParameters["descripcion"].D
efaultValue = TextBox2.Text;
SqlDataSourceArticulos.UpdateParameters["precio"].Defaul
SqlDataSourceArticulos.UpdateParameters["codigorubro"].D
efaultValue = DropDownList1.SelectedValue;
SqlDataSourceArticulos.UpdateParameters["codigo"].Defaul
int cant;
cant = SqlDataSourceArticulos.Update();
if (cant == 1)
Label2.Text = "Se modifico el artculo";
else
Label2.Text = "No existe el codigo";
}
}
Control GridView
Conceptos.
El control GridView del ASP.Net permite visualizar datos en una tabla en pantalla, editar,
modificar y borrar registros del mismo.
El GridView es un control extremadamente flexible para mostrar tablas multicolumna.
Cada registro de una consulta del un select configurado en un SqlDataSource genera una
fila en la grilla. Cada campo en el registro representa una columna en la grilla.
El GridView es el control ms poderoso que provee el ASP.Net. Veremos que este control
trae funcionalidades ya implementadas para paginacin, ordenamiento y edicin de sus
datos.
Datos de una tabla
Crearemos un proyecto llamado para probar el control GridView y las diferentes opciones
que nos brinda.
Crear un sitio web en el Visual Studio llamado ejercicio014.
Agregar un Web Form llamado Default.aspx. Iremos al Explorador de servidores y
seleccionaremos la tabla ?rubros? y la arrastraremos al formulario web. Veremos que se
generan dos objetos sobre la pgina:
Un objeto de la clase GridView llamado GridView1.
Un objeto de la clase SqlDataSource llamado SqlDataSource1.
Si seleccionamos el objeto SqlDataSource1 y observamos el contenido de la propiedad
SelectQuery, veremos que ya est configurado el comando SELECT:
SELECT [codigo], [descripcion] FROM [rubros]
El comando SELECT indica rescatar todas las filas de la tabla rubros.

Podemos ver tambin que se han configurado automticamente las propiedades
InsertQuery, DeleteQuery y UpdateQuery con los valores:
INSERT INTO [rubros] ([descripcion]) VALUES (@descripcion)
DELETE FROM [rubros] WHERE [codigo] = @codigo
UPDATE [rubros] SET [descripcion] = @descripcion WHERE [codigo] = @codigo

Como podemos ver hasta este momento la herramienta Visual Studio .Net nos ha
configurado en forma automtica el control SqlDataSource1, solo nos queda configurar el
control GridView1.
Seleccionamos el control GridView y presionamos el botn presente en la parte superior
derecha, el mismo nos muestra una serie del funcionalidades bsicas del control:
Como podemos ver ya est configurado el origen de datos con el objeto SqlDataSource1.
Habilitemos la paginacin, ordenamiento, edicin y eliminacin.
Ejecutemos el proyecto y comprobaremos que tenemos en la pgina los datos de la tabla
?rubros? con la capacidad de modificar y borrar registros. Adems est activa la paginacin
y ordenamiento por cualquiera de las dos columnas de la tabla (cambiemos la propiedad
PageSize del objeto GridView por el valor 3)
Sin escribir una sola lnea de cdigo tenemos el mantenimiento de la tabla rubros (con la
excepcin del alta)
Veamos otras caractersticas que podemos configurar en forma visual del control GridView.
Desde el botn ?>? que se encuentra en la parte superior derecha del control GridView1
podemos seleccionar la opcin ?Formato Automtico...? para definir la presentacin de la
tabla con plantillas predefinidas de color y fuente:
Luego de seleccionar el esquema para el GridView, presionamos aceptar y tenemos ya
definido el nuevo formato de la grilla.
Desde la ventana de propiedades configuraremos las propiedades:
Caption: Es un ttulo que aparece en la parte superior del GridView.
PageSize: Cantidad de registros a mostrar por pgina.
Luego de esto ejecutamos nuevamente y tenemos como resultado:
Datos de varias tablas
Continuamos con las tablas:

Tabla: articulos
precio float
codigorubro int
Tabla: rubros
descripcion varchar(50
Crearemos un nuevo Sitio Web llamado "ejercicio015" y agregaremos un webform llamado
Default.aspx. Seleccionamos desde el Explorador de servidores la tabla articulos y la
disponemos dentro del webform. El entorno del Visual Studio .Net nos genera un objeto de
la clase GridView y otro de la clase SqlDataSource.
El objetivo final es mostrar el cdigo del artculo, su descripcin, su precio y finalmente la
descripcin del rubro (no el cdigo de rubro)
1 - Primero seleccionamos el control SqlDataSource1 y configuramos la propiedad
SelectQuery con el comando Select que rescata los datos haciendo el emparejamiento por
la columna codigorubro de la tabla articulos y codigo de la tabla rubros:
SELECT ar.codigo,
ar.descripcion as descriarticulo,
precio,
2 - Luego de configurar la propiedad SelectQuery debemos actualizar el esquema del
SqlDataSource1, esto lo hacemos seleccionando el objeto sobre el formulario y
seleccionamos la opcin ?Actualizar esquema?.
Con esto logramos que se refresque las columnas a mostrar en el GridView1.
Si ejecutamos podemos ver que ya tenemos la tabla que rescata todos los artculos y asociado a
cada artculo la descripcin del rubro al que pertenece:
Ahora configuraremos algunas propiedades para dar un formato y presentacin ms

adecuado de los datos:
A ? Ya vimos que seleccionando el GridView1 y mediante la opcin ?Formato
automtico...? podemos definir el estilo de presentacin de la grilla.
B ? Ahora entramos a la opcin ?Editar columnas...? y seleccionamos el campo a
configurar:
Cambiemos los ttulos de las columnas de cada campo (por ejemplo en el campo
descriarticulo mostraremos el ttulo ?Descripcin del Art.? Modificando la propiedad
HeaderText.
De forma similar cambiar los otros ttulos de las columnas de la grilla:
C ? La propiedad Visible de cada columna nos permite configurar si la columna se muestra
o no.
D ? La propiedad DataFormatString nos permite configurar la apariencia de nmeros y
fechas. Por ejemplo si queremos que el precio aparezca con el smbolo de moneda
debemos configurar la propiedad DataFormatString con el valor:
{0:C}
Algunos ejemplos de formato de campos:

Formato de filas individuales de acuerdo a ciertas condiciones.
Cuando se grafica la tabla podemos capturar el evento RowDataBound y configurar como

mostrar dicha fila de la tabla.
A modo de ejemplo mostraremos de color amarillo las filas de los artculos con precio
superior a 8. Para esto codificamos el evento RowDataBound del GridView1:
using System;
using System.Linq;
using System.Web;

{
{
protected void GridView1_RowDataBound(object sender,

GridViewRowEventArgs e)
{
if (e.Row.RowType == DataControlRowType.DataRow)
{
double precio;
precio =
(double)DataBinder.Eval(e.Row.DataItem, "precio");
if (precio > 8)
{
e.Row.ForeColor =
System.Drawing.Color.Red;
e.Row.BackColor =
System.Drawing.Color.Yellow;
e.Row.Font.Bold = true;
}
}
}
}
Con el if verificamos si el evento se dispar para una fila de datos de la grilla (ya que este
mtodo se dispara cuando dibuja la cabecera (DataControlRowType.Header), el pi de
grilla (DataControlRowType.Footer) etc.
Luego rescatamos el valor del campo precio y verificamos con un nuevo if si el precio
supera 8, en caso afirmativo modificamos el color de fondo (BackColor) y de frente de la
fila.
Seleccin de una fila del GridView y posterior extraccin de sus datos.
En muchas situaciones es necesario que el usuario seleccione una fila de la grilla para
reflejar dicho dato en otra parte de la pgina o hacer otra consulta.
Para poder implementar esta caracterstica del GridView llevaremos a cabo los siguientes
pasos:
1 ? Cambiaremos el valor de la propiedad SelectedRowStyle.BackColor por amarillo (es
decir que cuando seleccionemos la fila el color de fondo de la misma se activar con este
valor)
2 ? En el men de opciones que se despliega en la parte derecha del GridView1
activaremos el CheckBox ?Habilitar seleccin?
3 ? Dispondremos una Label en el webform para mostrar el valor seleccionado de la grilla
(solo a modo de ejemplo)
4 ? Para el evento SelectedIndexChanged del GridView1 codificaremos el siguiente cdigo:
protected void GridView1_SelectedIndexChanged(object
sender, EventArgs e)
{
Label1.Text =
this.GridView1.Rows[GridView1.SelectedIndex].Cells[1].Te
xt;
}
El objeto Rows del GridView almacena una coleccin de filas, mediante el valor devuelto
por la propiedad SelectedIndex de la grilla podemos acceder a la celda que almacena el
cdigo del artculo.
Esta informacin nos es muy til para mostrar informacin adicional sobre el registro en
otro control por ejemplo.
Control GridView
Conceptos.
El control GridView del ASP.Net permite visualizar datos en una tabla en pantalla, editar,
modificar y borrar registros del mismo.
El GridView es un control extremadamente flexible para mostrar tablas multicolumna.
Cada registro de una consulta del un select configurado en un SqlDataSource genera una
fila en la grilla. Cada campo en el registro representa una columna en la grilla.
El GridView es el control ms poderoso que provee el ASP.Net. Veremos que este control
trae funcionalidades ya implementadas para paginacin, ordenamiento y edicin de sus
datos.
Datos de una tabla
Crearemos un proyecto llamado para probar el control GridView y las diferentes opciones
que nos brinda.
Crear un sitio web en el Visual Studio llamado ejercicio014.
Agregar un Web Form llamado Default.aspx. Iremos al Explorador de servidores y
seleccionaremos la tabla ?rubros? y la arrastraremos al formulario web. Veremos que se
generan dos objetos sobre la pgina:
Un objeto de la clase GridView llamado GridView1.
Un objeto de la clase SqlDataSource llamado SqlDataSource1.
Si seleccionamos el objeto SqlDataSource1 y observamos el contenido de la propiedad
SelectQuery, veremos que ya est configurado el comando SELECT:
SELECT [codigo], [descripcion] FROM [rubros]
El comando SELECT indica rescatar todas las filas de la tabla rubros.
Podemos ver tambin que se han configurado automticamente las propiedades
InsertQuery, DeleteQuery y UpdateQuery con los valores:
INSERT INTO [rubros] ([descripcion]) VALUES (@descripcion)
DELETE FROM [rubros] WHERE [codigo] = @codigo
UPDATE [rubros] SET [descripcion] = @descripcion WHERE [codigo] = @codigo

Como podemos ver hasta este momento la herramienta Visual Studio .Net nos ha
configurado en forma automtica el control SqlDataSource1, solo nos queda configurar el
control GridView1.
Seleccionamos el control GridView y presionamos el botn presente en la parte superior
derecha, el mismo nos muestra una serie del funcionalidades bsicas del control:
Como podemos ver ya est configurado el origen de datos con el objeto SqlDataSource1.
Habilitemos la paginacin, ordenamiento, edicin y eliminacin.
Ejecutemos el proyecto y comprobaremos que tenemos en la pgina los datos de la tabla
?rubros? con la capacidad de modificar y borrar registros. Adems est activa la paginacin
y ordenamiento por cualquiera de las dos columnas de la tabla (cambiemos la propiedad
PageSize del objeto GridView por el valor 3)
Sin escribir una sola lnea de cdigo tenemos el mantenimiento de la tabla rubros (con la
excepcin del alta)
Veamos otras caractersticas que podemos configurar en forma visual del control GridView.
Desde el botn ?>? que se encuentra en la parte superior derecha del control GridView1
podemos seleccionar la opcin ?Formato Automtico...? para definir la presentacin de la
tabla con plantillas predefinidas de color y fuente:
Luego de seleccionar el esquema para el GridView, presionamos aceptar y tenemos ya
definido el nuevo formato de la grilla.
Desde la ventana de propiedades configuraremos las propiedades:
Caption: Es un ttulo que aparece en la parte superior del GridView.
PageSize: Cantidad de registros a mostrar por pgina.
Luego de esto ejecutamos nuevamente y tenemos como resultado:
Datos de varias tablas
Continuamos con las tablas:

Tabla: articulos
precio float
codigorubro int
Tabla: rubros
descripcion varchar(50
Crearemos un nuevo Sitio Web llamado "ejercicio015" y agregaremos un webform llamado
Default.aspx. Seleccionamos desde el Explorador de servidores la tabla articulos y la
disponemos dentro del webform. El entorno del Visual Studio .Net nos genera un objeto de
la clase GridView y otro de la clase SqlDataSource.
El objetivo final es mostrar el cdigo del artculo, su descripcin, su precio y finalmente la
descripcin del rubro (no el cdigo de rubro)
1 - Primero seleccionamos el control SqlDataSource1 y configuramos la propiedad
SelectQuery con el comando Select que rescata los datos haciendo el emparejamiento por
la columna codigorubro de la tabla articulos y codigo de la tabla rubros:
SELECT ar.codigo,
ar.descripcion as descriarticulo,
precio,
2 - Luego de configurar la propiedad SelectQuery debemos actualizar el esquema del
SqlDataSource1, esto lo hacemos seleccionando el objeto sobre el formulario y
seleccionamos la opcin ?Actualizar esquema?.
Con esto logramos que se refresque las columnas a mostrar en el GridView1.
Si ejecutamos podemos ver que ya tenemos la tabla que rescata todos los artculos y asociado a
cada artculo la descripcin del rubro al que pertenece:
Ahora configuraremos algunas propiedades para dar un formato y presentacin ms

adecuado de los datos:
A ? Ya vimos que seleccionando el GridView1 y mediante la opcin ?Formato
automtico...? podemos definir el estilo de presentacin de la grilla.
B ? Ahora entramos a la opcin ?Editar columnas...? y seleccionamos el campo a
configurar:
Cambiemos los ttulos de las columnas de cada campo (por ejemplo en el campo
descriarticulo mostraremos el ttulo ?Descripcin del Art.? Modificando la propiedad
HeaderText.
De forma similar cambiar los otros ttulos de las columnas de la grilla:
C ? La propiedad Visible de cada columna nos permite configurar si la columna se muestra
o no.
D ? La propiedad DataFormatString nos permite configurar la apariencia de nmeros y
fechas. Por ejemplo si queremos que el precio aparezca con el smbolo de moneda
debemos configurar la propiedad DataFormatString con el valor:
{0:C}
Algunos ejemplos de formato de campos:

Formato de filas individuales de acuerdo a ciertas condiciones.
Cuando se grafica la tabla podemos capturar el evento RowDataBound y configurar como

mostrar dicha fila de la tabla.
A modo de ejemplo mostraremos de color amarillo las filas de los artculos con precio
superior a 8. Para esto codificamos el evento RowDataBound del GridView1:
using System;
using System.Linq;
using System.Web;

{
{
protected void GridView1_RowDataBound(object sender,

GridViewRowEventArgs e)
{
if (e.Row.RowType == DataControlRowType.DataRow)
{
double precio;
precio =
(double)DataBinder.Eval(e.Row.DataItem, "precio");
if (precio > 8)
{
e.Row.ForeColor =
System.Drawing.Color.Red;
e.Row.BackColor =
System.Drawing.Color.Yellow;
e.Row.Font.Bold = true;
}
}
}
}
Con el if verificamos si el evento se dispar para una fila de datos de la grilla (ya que este
mtodo se dispara cuando dibuja la cabecera (DataControlRowType.Header), el pi de
grilla (DataControlRowType.Footer) etc.
Luego rescatamos el valor del campo precio y verificamos con un nuevo if si el precio
supera 8, en caso afirmativo modificamos el color de fondo (BackColor) y de frente de la
fila.
Seleccin de una fila del GridView y posterior extraccin de sus datos.
En muchas situaciones es necesario que el usuario seleccione una fila de la grilla para
reflejar dicho dato en otra parte de la pgina o hacer otra consulta.
Para poder implementar esta caracterstica del GridView llevaremos a cabo los siguientes
pasos:
1 ? Cambiaremos el valor de la propiedad SelectedRowStyle.BackColor por amarillo (es
decir que cuando seleccionemos la fila el color de fondo de la misma se activar con este
valor)
2 ? En el men de opciones que se despliega en la parte derecha del GridView1
activaremos el CheckBox ?Habilitar seleccin?
3 ? Dispondremos una Label en el webform para mostrar el valor seleccionado de la grilla
(solo a modo de ejemplo)
4 ? Para el evento SelectedIndexChanged del GridView1 codificaremos el siguiente cdigo:
protected void GridView1_SelectedIndexChanged(object
sender, EventArgs e)
{
Label1.Text =
this.GridView1.Rows[GridView1.SelectedIndex].Cells[1].Te
xt;
}
El objeto Rows del GridView almacena una coleccin de filas, mediante el valor devuelto
por la propiedad SelectedIndex de la grilla podemos acceder a la celda que almacena el
cdigo del artculo.
Esta informacin nos es muy til para mostrar informacin adicional sobre el registro en
otro control por ejemplo.
Controles de validacin
Conceptos.
Introduccin
Hay seis controles Web para la validacin de datos de entrada que se pueden incorporar
en un Formulario Web.
RequiredFieldValidator: Facilita la validacin de un dato del formulario chequeando que el
mismo tenga algn valor.
RangeValidator: Facilita la validacin de un dato del formulario contra un valor mnimo y
mximo.
CompareValidator: Facilita la validacin de un dato del formulario contra un valor fijo u otro
campo del formulario.
CustomValidator: Facilita la validacin de un dato del formulario usando una subrutina
propia.
RegularExpressionValidator: Facilita la validacin de un dato del formulario contra una
expresin.
ValidationSumary: Agrupa los mensajes de error de otros controles en una parte de la
pgina.
Todos los controles de validacin tienen tres propiedades fundamentales:
ControlToValidate, Text e IsValid. Todos los controles derivan de la clase BaseValidator.
La propiedad ControlToValidate contiene la referencia del control del formulario que
queremos validar.
La propiedad Text almacena el mensaje de error que queremos que se muestre en la
pgina.
Por ltimo la propiedad IsValid almacena True en caso que el control pase el test de
validacin.
Cuando empleamos controles de validacin automticamente se usan funciones en
JavaScript en el cliente. Esto significa que los controles pueden inmediatamente mostrar
los mensajes de error en el browser mientras el usuario est completando el formulario. Si
hay algn error en la pgina el cdigo JavaScript previene que el usuario pueda enviar los
datos al servidor.
En caso de emplear navegadores ms antiguos los controles que veremos seguirn
funcionando, pero la validacin se realizar en el servidor.
Sitio Web
Crearemos un sitio web y lo llamaremos "ejercicio016". Luego agregaremos seis WebForm

con los siguiente nombres:
Default.aspx
Default2.aspx
Default3.aspx
Default4.aspx
Default5.aspx
Default6.aspx
Otra cosa que necesitamos hacer con ASP.Net 4.5 en adelante si no utilizamos JQuery es
hacer la siguiente configuracin en el archivo Web.config:
<?xml version="1.0" encoding="utf-8"?>

<configuration>
<system.web>
<compilation debug="true" targetFramework="4.5.2"
/>
<httpRuntime targetFramework="4.5.2" />
</system.web>
<appSettings>
<add
key="ValidationSettings:UnobtrusiveValidationMode"
value="None" />
</appSettings>
</configuration>
Hemos agregado el elemento appSettings y dentro de ello hemos configurado la clave

UnobtrusiveValidationMode con el valor "None".
Si no hacemos esto no funcionaran las validaciones que implementemos.
Controles de validacin
Control: RequiredFieldValidator
Para probar este control haremos una pgina que solicite el nombre de usuario
(mostraremos un error si el operador no ingresa texto en el TextBox)
La interface visual es la siguiente:
El mensaje en debe aparecer si presionamos el botn ?Confirmar? y no se ingres texto en

el TextBox.
En el Visual Studio .Net confeccionamos el formulario web disponiendo uno control de tipo
TextBox, un Button y un RequiredFieldValidator que se encuentra en la pestaa
?Validacin? del ?Cuadro de herramientas?.
El control RequiredFieldValidator es importante inicializar las siguientes propiedades:
Cuando ejecutemos la pgina podemos ver el cdigo que llega al navegador (en ella
veremos las funciones en JavaScript que automticamente el ASP.NET nos crea para
facilitar la validacin)
Si queremos que al presionar el botn se redireccione a la pgina Default2.aspx en caso de
haber ingresado un nombre de usuario debemos codificar el mtodo click para dicho botn:
using System;
using System.Linq;
using System.Web;

{
{

EventArgs e)
{
if (IsValid)
Response.Redirect("Default2.aspx");
}
}
La propiedad IsValid del WebForm almacena true si todos los controles de validacin
dispuestos en el formulario se validan correctamente. Es decir en este problemas si se
ingresa algn caracter en el control TextBox luego se puede pasar a la pgina
?Default2.aspx?.
Control: RangeValidator
El control RangeValidator especifica un valor mnimo y mximo para un control TextBox.

Podemos utilizar el control para chequear el rango de enteros, fechas, cadenas o valores
reales.
Las propiedades ms importantes del control son:
ControlToValidate El campo del formulario a validar.
MinimumValue El valor mnimo a validar en el rango de valores.
MaximumValue El valor mximo a validar en el rango de valores.
Text El mensaje de error a mostrar.
Type El tipo de comparacin a ejecutar (valores posibles: String, Integer, Double, Date,
Currency)
Para probar este control haremos una pgina que solicite ingresar la edad de una persona
que se postula para un trabajo (la misma debe estar en el rango de 18 a 35 aos)
Disponemos sobre el formulario los siguientes objetos: Label, TextBox, Button y un RangeValidator.
La interfaz que debemos implementar es la
siguiente:
El objeto RangeValidator lo debemos configurar con los siguientes valores:

Si ejecutamos la pgina veremos que el mensaje aparece si ingresamos una edad que est
fuera del rango de 18 a 35 aos.
El cdigo a implementar al presionar el botn confirmar es el siguiente:
using System;
using System.Linq;
using System.Web;
public partial class Default2 : System.Web.UI.Page
{
{

EventArgs e)
{
if (IsValid)
{
}
}
}
Es decir redireccionamos a la prxima pgina en caso que todos los controles de validacin
del formulario se verifiquen correctos (en este problema solo tenemos un control de tipo
RangeValidator, pero en muchos casos veremos que en un formulario puede haber ms de
un control de validacin)
Si quisiramos solo validar un control determinado del WebForm la condicin sera:
if (RangeValidator1.IsValid)
{
}
Es decir verificamos la propiedad IsValid del control RangeValidator (si tenemos un solo
control en el formulario preguntar por la propiedad IsValid del webform o del
RangeValidator el resultado ser idntico)
Control: CompareValidator
El control CompareValidator permite comparar un valor de un control con otro control o

comparar el valor de un control con un valor fijo.
Las propiedades ms importantes son:
ControlToValidate El campo del formulario a validar.
ControlToCompare El campo del formulario contra el cual se efecta la comparacin.
Operator El operador a utilizarse en la comparacin (los valores posibles son Equal,
NotEqual, GreaterThan, GreaterThanEqual, LessThan, LessThanEqual y DataTypeCheck)
Text El mensaje de error a mostrar.
Type El tipo de comparacin a ejecutar (valores posibles String, Integer, Double, Date,
Currency)
ValueToCompare El valor fijo a comparar.
Para probar este control implementaremos una pgina que realizara el alta de la tabla
usuarios (debe permitir el ingreso del nombre de usuario y su clave, esta ltima dos veces,
con el objetivo de asegurarse que la ingres correctamente), emplearemos un objeto de la
clase CompareValidator para validar el ingreso repetido de la clave.
La interfaz visual de la pgina es:
Al objeto CompareValidator le configuramos las propiedades de la siguiente manera:

Es importante inicializar la propiedad ControlToValidate con el objeto TextBox que carga la
segunda clave, luego que el operador carga la clave se procede a validar si el texto
ingresado coincide en el TextBox que hemos inicializado la propiedad ControlToCompare.
El cdigo a implementar al presionar el botn ?Confirmar?:
using System;
using System.Linq;
using System.Web;

{
{

EventArgs e)
{
if (IsValid)
{
}
}
}
Control: CustomValidator
El control CustomValidator permite validar el campo de un formulario con una funcin de

validacin propia. Debemos asociar nuestro control CustomValidator con un evento propio.
Para probar este control implementaremos una pgina que solicite el ingreso de un nmero
mltiplo de 5, en caso de ingresar un valor incorrecto mostraremos un mensaje de error.
La interfaz a implementar es la siguiente:
Primero configuramos las propiedades del objeto CustomValidator con:

Ahora debemos codificar el evento ServerValidate que tiene el objeto CustomValidator1, a
esto lo hacemos desde la ventana de cdigo y lo podemos generar automticamente
haciendo doble clic sobre el control en la ventana de diseo:
using System;
using System.Linq;
using System.Web;

{
{
protected void
CustomValidator1_ServerValidate(object source,
ServerValidateEventArgs args)
{
int valor;
valor = int.Parse(TextBox1.Text);
if (valor % 5 == 0)
args.IsValid = true;
else
args.IsValid = false;
}
}
El parmetro args tiene una propiedad fundamental llamada IsValid que debemos asignarle
el resultado de nuestra validacin. En nuestro ejemplo almacenamos el nmero ingresado
en la variable valor, luego mediante el operador % (resto de una divisin) verificamos si es
cero, en caso afirmativo inicializamos la propiedad IsValid del objeto args con el valor true,
en caso contrario, es decir que el nmero ingresado no sea un mltiplo de 5 almacenamos
el valor false.
Cuando se presiona el botn confirmar tenemos:
EventArgs e)
{
if (IsValid)
{
}
}
Control: RegularExpressionValidator
El control RegularExpressionValidator permite validar el valor de un campo de un formulario

con un patrn especfico, por ejemplo un cdigo postal, un nmero telefnico, una direccin
de mail, una URL etc.
El planteo de un RegularExpression es bastante compleja, pero el Visual Studio .Net
provee una serie de expresiones regulares preconfiguradas.
Para probar este control, haremos una pgina que solicite el ingreso de un mail y
mostraremos un error en caso que el usuario ingrese un mail mal formado.
La interfaz visual de la pgina es la siguiente:
Al objeto de la clase RegularExpressionValidator le configuramos las propiedades con los

siguientes valores:
Si ejecutamos el programa podremos ver que al abandonar el foco del TextBox aparecer
el mensaje de error en caso de ingresar un mail incorrecto:
using System;
using System.Linq;
using System.Web;

{
{
}

EventArgs e)
{
if (IsValid)
{
}
}
}
Control: ValidationSummary
Cuando tenemos formularios con gran cantidad de controles puede llegar a ser dificultoso
ubicar los errores en la pgina. El Framework de .Net trae otra clase llamada
ValidationSummary que muestra todos los errores de la pgina agrupados en una parte de
pantalla. Para utilizar el control ValidationSummary es necesario fijar el valor de la
propiedad ErrorMessage para cada control de validacin que tiene la pgina. Es importante
no confundir la propiedad Text que aparece en la misma posicin donde la disponemos con
la propiedad ErrorMesage que contiene el mensaje de error que mostrar el control
ValidationSummary.
Para probar este control haremos una pgina que solicite la carga del nombre de usuario y
su clave en forma obligatoria (mostrando un mensaje de error en caso de dejar vaco los
TextBox)
La interfaz de la pgina es la siguiente:
Debemos disponer los siguientes objetos sobre el formulario:
1 Button, 2 TextBox, 2 RequiredFieldValidator y un objeto de la clase ValidationSummary.
La propiedad text de los objetos RequiredFieldValidator las inicializamos con un (*)
asterisco y las propiedades ErrorMessage con las cadenas: ?Debe ingresar el nombre de
usuario? y ?Debe ingresar la clave? respectivamente. En cuanto al objeto de la clase
ValidationSummary no debemos hacer ninguna configuracin especifica, solo ubicarlo
dentro de la pgina.
Para el evento clic del botn codificamos:
using System;
using System.Linq;
using System.Web;

{
{

EventArgs e)
{
if (IsValid)
{
Response.Redirect("Default.aspx");
}
}
}
Si se ingresan los dos datos se redirecciona a la primer pgina.
Cuando ejecutamos la pgina si no ingresamos los valores en los TextBox al presionar el
botn aparecen los mensajes de error:
Upload de archivos al servidor
Conceptos.
Una actividad muy comn en un sitio web es el envo de archivos desde el cliente y su
almacenamiento el el servidor.
Upload
Componente FileUpload
La componente FileUpload encapsula el envo y recepcin de un archivo en el servidor

web.
Confeccionaremos una serie de pginas web para aprender a utilizar los mtodos y
propiedades de la clase FileUpload (Crear un sitio web llamado ejercicio017)
Crear un webform (Default.aspx) e implementar la siguiente interfaz:
Disponemos en el webform un objeto de la clase FileUpload que se encuentra en la
pestaa de componentes ?Estndar?
Para el evento clic del botn "confirmar" implementamos el siguiente cdigo:
using System;
using System.Linq;
using System.Web;

{
{

EventArgs e)
{
FileUpload1.SaveAs(Server.MapPath(".") + "/" +
FileUpload1.FileName);
Label1.Text = "Archivo subido";
}
}
El mtodo SaveAs permite grabar el archivo que se subi al servidor. Debemos indicarle el
camino del directorio donde se almacena y el nombre del archivo. Para obtener el path
donde se almacena la pgina ASPX actual el objeto Server tiene el mtodo MapPath y para
obtener el nombre del archivo la propiedad llamada FileName.
Con esta nica lnea tenemos registrado en el servidor el archivo que se envi desde el
navegador.
Almacenar el archivo en un subdirectorio.
Es una buena costumbre evitar almacenar los archivos que suben los usuarios en la misma
carpeta donde se encuentran la pginas dinmicas ASPX.
Para almacenar los archivos en otro directorio primero debemos crear el directorio (por
ejemplo creemos una carpeta llamada 'imagenes' en el directorio donde se aloja el sitio,
presionamos el botn izquierdo dentro del "Explorador de soluciones" y seleccionamos
Agregar -> Nueva carpeta)
Creamos un nuevo webform (Default2.aspx), definimos una interfaz visual idntica al primer
formulario y escribimos el siguiente cdigo para el evento clic del objeto Button:
using System;
using System.Linq;
using System.Web;

{
{

EventArgs e)
{
FileUpload1.SaveAs(Server.MapPath(".") +
"/imagenes/" + FileUpload1.FileName);
}
}
La carpeta imagenes debemos crearla en forma manual desde el administrador de archivos
del sistema operativo. Luego cada archivo que se suba al servidor se almacenar en dicha
carpeta.
Ejecutemos la pgina y subamos un par de archivos. Si no aparecen los archivos hay que
presionar el cono de "Actualizar" del "Explorador de soluciones".
Mostrar propiedades del archivo subido.
Crearemos un tercer webform (Default3.aspx) para ver como accedemos a distintas

propiedades de la clase FileUpload.
Disponemos sobre el webform un objeto de la clase FileUpload, un Button y cuatro Label.
Mostraremos el tamao del archivo en bytes, el nombre del archivo y finalmente el tipo de
archivo.
El cdigo fuente para el evento clic es:
using System;
using System.Linq;
using System.Web;

{
{

EventArgs e)
{
FileUpload1.SaveAs(Server.MapPath(".") +
"/imagenes/" + FileUpload1.FileName);
Label2.Text =
FileUpload1.PostedFile.ContentLength.ToString();
Label3.Text = FileUpload1.FileName;
Label4.Text =
FileUpload1.PostedFile.ContentType;
}
}
La propiedad PostedFile del control FileUpload almacena en:
ContentLength (el tamao del archivo en bytes)
ContentType (El tipo de archivo)
El tamao del archivo nos puede ser til si queremos limitar el peso del mismo.
Validar la existencia de otro archivo con el mismo nombre.
Puede suceder que en la carpeta donde se almacena el archivo exista otro con el mismo
nombre. Esto conlleva a que se pise el archivo antiguo por el nuevo.
Veamos otro webform donde validamos que no exista otro archivo con el mismo nombre,
en caso afirmativo no permitimos su almacenamiento e informamos de tal situacin:
using System;
using System.IO;
using System.Linq;
using System.Web;

{
{

EventArgs e)
{
if (File.Exists(Server.MapPath(".") + "/" +
FileUpload1.FileName))
{
Label1.Text = "Existe un archivo con dicho
nombre en el servidor";
}
else
{
FileUpload1.SaveAs(Server.MapPath(".") + "/"
+ FileUpload1.FileName);
}
}
}
El mtodo esttico Exists retorna true si ya existe un archivo con el nombre que le pasamos
como parmetro, en caso negativo retorna false.
En caso que no exista el archivo procedemos a efectuar la registracin del mismo en la
carpeta de nuestro sitio.
Ejercicio Resuelto
En la base de datos 'base1' crear las tablas:
autos (patente char(6) primary key,
propietario varchar(50),
precio float,
codigomarca int,
foto varchar(100),
modelo int)
marcas (codigo int identidad primary key,
)
No olvidar de definir el campo codigo de la tabla marcas de tipo identidad para que se
genere automticamente.
Desde el Visual Studio .Net proceder a crear un sitio web vaco (ejercicio018) y agregar el
primer Web Form que contendr el men de opciones para efectuar:
a ? Confeccionar el mantenimiento de la tabla marcas (altas, bajas y
modificaciones (utilizar un GridView)
b ? Confeccionar una pgina para efectuar el alta de autos.
c ? Consulta de un auto ingresando su patente (mostrar todos los datos, incluido
la foto)
d ? Seleccionar de un DropDownList una marca y luego mostrar todas las fotos de
autos de dicha marca.
e ? Implementar el borrado de un auto ingresando su patente.
f ? Ingresar un rango de aos y luego mostrar todas las fotos de autos en dicho
rango.
La pgina Default.aspx tiene 6 HyperLink:
Punto a
a ? Confeccionar el mantenimiento de la tabla marcas (altas, bajas y modificaciones ?

utilizar un GridView
Crear un Web Form llamado abmmarcas.aspx el cual debe permitir implementar las altas,
bajas y modificaciones de la tabla marcas.
Mediante un GridView implementamos las bajas y modificaciones. Codificamos por otro
lado el alta.
Debemos disponer un SQLDataSource asociado a la tabla marcas y configurar las
propiedades ConnectionString, InsertQuery y SelectQuery. Tambin disponemos un
GridView e inicializamos la propiedad "Elegir origen de datos" con el SQLDataSource que
hemos insertado.
La interfaz visual a implementar es:
Para el evento click del botn "Alta" debemos:
using System;
using System.Linq;
using System.Web;
public partial class abmmarcas : System.Web.UI.Page

{
{

EventArgs e)
{
dsmarcas.InsertParameters["descripcion"].DefaultValue =
TextBox1.Text;
dsmarcas.Insert();
TextBox1.Text = "";
}
}
Luego la interfaz en tiempo de ejecucin debe quedar:
Punto b
Confeccionar una pgina para efectuar el alta de autos donde implementaremos el upload
de la foto. Debemos crear una interfaz visual similar a esta (llamar al Web Form
altaautos.aspx):
Configuramos el SqlDataSource de marcas : dsmarcas
asocindolo con la tabla marcas, luego el DropDownList1 lo vinculamos a este DataSource
para que muestre todas las marcas.
El SelectQuery del objeto dsmarcas:
Por otro lado creamos el dsautos y configuramos el InsertQuery:
Para el evento click del alta procedemos a inicializar los parmetros y a efectuar el insert en
la tabla autos.
Adems hacemos el upload del archivo de la foto con el objetivo de que la foto quede
almacenada en forma permanente en el servidor:
using System;
using System.Linq;
using System.Web;
public partial class altaautos : System.Web.UI.Page

{
{

EventArgs e)
{
FileUpload1.SaveAs(Server.MapPath(".") + "/" +
FileUpload1.FileName);
dsautos.InsertParameters["patente"].DefaultValue
= TextBox1.Text;
dsautos.InsertParameters["propietario"].DefaultValue =
TextBox2.Text;
dsautos.InsertParameters["precio"].DefaultValue
= TextBox3.Text;
dsautos.InsertParameters["modelo"].DefaultValue
= TextBox4.Text;
dsautos.InsertParameters["codigomarca"].DefaultValue =
DropDownList1.SelectedValue;
dsautos.InsertParameters["foto"].DefaultValue =
FileUpload1.FileName;
dsautos.Insert();
Label1.Text = "Los datos fueron cargados";
TextBox1.Text = "";
TextBox2.Text = "";
TextBox3.Text = "";
TextBox4.Text = "";
}
}
Punto c
Consulta de un auto ingresando su patente (mostrar todos los datos, incluido la foto)
Creamos un nuevo Web Form llamado: 'consultaporpatente.aspx' e implementamos una
interfaz que nos permita ingresar la patente de un auto y nos muestre mediante una Label y
un objeto de la clase Image los datos de dicho vehculo:
Debemos configuramos la propiedad SelectQuery del dsautos con el siguiente comando
SQL para recuperar los datos:
Recordar que cada vez que creamos un parmetro en el comando SQL debemos presionar
el botn "Actualizar parmetros".
El cdigo del evento click de "Consultar" queda definido por:
using System;
using System.Linq;
using System.Web;
public partial class consultaporpatente :

System.Web.UI.Page
{
{

EventArgs e)
{
dsautos.SelectParameters["patente"].DefaultValue
= TextBox1.Text;
dsautos.DataSourceMode =
(SqlDataReader)dsautos.Select(DataSourceSelectArguments.
Empty);
{
Image1.ImageUrl =
registro["foto"].ToString();
Label1.Text = "Propiegario" +
registro["propietario"] + "<br>" +
"Precio:" + registro["precio"]
+ "<br>" +
"Modelo:" + registro["modelo"]
+ "<br>" +
"Marca:" +
registro["descripcion"];
}
else
{
Label1.Text = "No existe un auto con dicha
patente";
}
}
}
Y tenemos como resultado una pgina en tiempo de ejecucin similar a:
Punto d
Seleccionar de un DropDownList una marca y luego mostrar todas las fotos de autos de
dicha marca.
Creamos un Web Form llamado fotospormarca.aspx y desarrollamos una interfaz similar a
la siguiente:
Configuramos el SelectQuery del dsmarcas con la consulta de la tabla marcas:
select codigo, descripcion from marcas
Por otro lado configuramos el origen de datos del DropDownList1 para que se muestren
todas las marcas y podamos posteriormente recuperar el cdigo de la marca seleccionada.
Tambin iniciamos la propiedad SelectQuery del objeto dsautos:
select foto from autos where codigomarca=@codigomarca
Luego cuando se presiona el botn "Mostrar" debemos recuperar todas las fotos de autos
que pertenecen a la marca seleccionada:
using System;
using System.Linq;
using System.Web;
public partial class fotospormarca : System.Web.UI.Page

{
{

EventArgs e)
{
dsautos.SelectParameters["codigomarca"].DefaultValue =
DropDownList1.SelectedValue;
SqlDataReader registros =
Empty);
this.Label1.Text = "";
while (registros.Read() == true)
{
Label1.Text = Label1.Text + "<img src=\"" +
registros["foto"] +
"\"><br>";
}
}
}
Como podemos ver debemos generar los elementos HTML img con cada una de las fotos
(no podemos utilizar un objeto Image ya que pueden haber varios autos que pertenecen a
la misma marca)
En pantalla en tiempo de ejecucin se debe mostrar algo similar a:
Punto e
Implementar el borrado de un auto ingresando su patente.

Creamos un Web Form llamado "borrarauto.aspx" y diseamos una interfaz similar a esta:
Debemos consultar la tabla autos para recuperar el nombre del archivo almacenado del
auto, para ello inicializamos la propiedad SelectQuery con la siguiente consulta:
select foto from autos where patente=@patente
Luego tambin debemos implementar la propiedad DeleteQuery:
delete from autos where patente=@patente
Cuando se presiona el botn borrar procedemos a ejecutar los dos comandos SQL:
using System;
using System.IO;
using System.Linq;
using System.Web;
public partial class borrarauto : System.Web.UI.Page

{
{

EventArgs e)
{
dsautos.DeleteParameters["patente"].DefaultValue
= TextBox1.Text;
int cant;
cant = dsautos.Delete();
if (cant == 0)
this.Label1.Text = "No existe un auto con el
valor de patente ingresado";
else
{
this.Label1.Text = "Se borro el auto con
dicha patente";
dsautos.SelectParameters["patente"].DefaultValue =
TextBox1.Text;
SqlDataReader registro;
registro =
Empty);
File.Delete(Server.MapPath(".") + "/" +
registro["foto"]);
}
}
}
Punto f
Ingresar un rango de aos y luego mostrar todas las fotos de autos en dicho rango.
Creamos un Web Form llamado "consultarango.aspx" con una interfaz similar a:
Configuramos la propiedad SelectQuery del SqlDataSource con el comando SQL:
select foto from autos where modelo>=@modelo1 and modelo<=@modelo2
Para el evento click del botn procedemos a mostrar todas las fotos de autos cuyos
modelos se encuentran comprendidos entre los dos valores ingresados:
using System;
using System.Linq;
using System.Web;
public partial class consultarango : System.Web.UI.Page

{
{

EventArgs e)
{
dsautos.SelectParameters["modelo1"].DefaultValue
= TextBox1.Text;
dsautos.SelectParameters["modelo2"].DefaultValue
= TextBox2.Text;
SqlDataReader registros =
Empty);
Label1.Text = "";
while (registros.Read() == true)
{
Label1.Text = Label1.Text + "<img src=\"" +
registros["foto"] +
"\"><br><br>";
}
}
}
Ejercicio propuesto
1 ? Se tienen las siguientes tablas:
libros (codigo, titulo, descripcion, fototapa, codigotema)
temas (codigo, descripcion)
a ? Confeccionar el alta de las tablas libros y temas (permitir seleccionar el tema mediante
una lista) Hacer el Upload de la imagen al servidor. Validar que se ingresen
obligatoriamente el titulo, descripcin y seleccin de un archivo.
b ? Ingresar por teclado el cdigo de un libro y luego mostrar la foto de la tapa.
Cookies y Session.
Conceptos.
Introduccin.
Cuando un sitio web necesita identificar un usuario que visita un conjunto de pginas web
puede emplear cookies y variables de sesin.
Como veremos las cookies se almacenan en el cliente (navegador) y son enviadas al
servidor cada vez que le solicitamos una pgina a dicho servidor. En cambio las variables
de sesin se almacenan en el servidor.
Cookies
El protocolo http es un protocolo desconectado. El protocolo http por si mismo no provee al
servidor Web si dos peticiones provienen del mismo navegador. Desde este punto de vista,
para el Servidor Web cada peticin de pgina proviene de un nuevo usuario. Esta
caracterstica puede ser un inconveniente para ciertos sitios Web.
Netscape introdujo las cookies en su primera versin de navegador. Desde entonces, el
Wold Wide Web Consortium (W3C) ha sumado las cookies al estandar. Muchos
navegadores ahora pueden utilizar las cookies.
Las Cookies son pequeas piezas de informacin que el servidor solicita que el navegador
las registre en el equipo del cliente. De acuerdo a la especificacin original de Netscape
una cookie no puede contener ms de 4 Kb (el tamao se refiere a la combinacin del
nombre y valor de la cookie)
cookie persistente : Creacin y acceso.
Una cookie persistente tiene una fecha de caducidad de la misma. Cuidado: No podemos
garantizar que la cookie existir por el tiempo que hemos fijado al crearla, ya que el
navegador puede en cualquier momento borrarla o inclusive el usuario del equipo cliente
puede manualmente borrar las cookies.
Crear un sitio web ejercicio019.
Haremos dos pginas, en una cargaremos el valor de la cookie y en la segunda la
imprimiremos.
La interfaz y cdigo de la primer pgina es:
Para el evento Clic del botn "Crear cookie" escribimos el siguiente cdigo:
using System;
using System.Linq;
using System.Web;
{
{

EventArgs e)
{
HttpCookie cookie1 = new HttpCookie("edad",
TextBox1.Text);
cookie1.Expires = new DateTime(2018, 12, 25);
Response.Cookies.Add(cookie1);
Label1.Text = "Se cre la cookie";
}
}
Creamos una cookie con el nombre ?edad? y el valor almacenado en el TextBox1. Fijamos
como fecha de caducidad de la cookie el 25 de diciembre de 2018, por ltimo llamamos al
mtodo add del objeto Cookies.
La segunda pgina tiene por objetivo recuperar la cookie en caso que se haya creado
previamente, la interfaz y cdigo de la misma es:
using System;
using System.Linq;
using System.Web;

{
{
if (Request.Cookies["edad"] == null)
{
Label1.Text = "No existe la cookie edad";
}
else
{
Label1.Text =
this.Request.Cookies["edad"].Value;
}
}
}
En el evento Load de la pgina verificamos si existe la cookie, en caso de existir la
recuperamos de la propiedad Cookies del objeto Request.
1 ? Mostrar el ltimo mail ingresado en un control TextBox.
Agregar una tercer y cuarta pgina a nuestro sitio web.

El objeto del siguiente ejemplo es la creacin de una pgina que solicite el ingreso del mail
de una persona, si en otro momento ya lo haba ingresado mostrarlo precargado en el
control TextBox.
Emplearemos una cookie persistente para almacenar el mail ingresado.
La pgina y el cdigo es el siguiente:
Luego codificamos para el evento clic del botn y para el evento Page_Load:
using System;
using System.Linq;
using System.Web;

{
{
if (this.IsPostBack == false)
{
if (Request.Cookies["mail"] != null)
{
TextBox1.Text =
Request.Cookies["mail"].Value;
}
}
}

EventArgs e)
{
HttpCookie cookie1 = new HttpCookie("mail",
TextBox1.Text);
cookie1.Expires = new DateTime(2018, 12, 25);
}
}
En el mtodo Load de la pgina verificamos si es la primera vez que pedimos la pgina (es
decir que no se recarga por presionar el botn) y si existe la cookie, en dicho caso
cargamos el contenido de la propiedad Text del control TextBox.
Luego de ingresar un mail en el control TextBox y presionar el botn ?Confirmar? se crea
una cookie llamada ?mail? y almacena el valor ingresado en el control TextBox.
Seguidamente redirecciona a la pgina ?Default4.aspx?. Si Luego volvemos a ejecutar la
pgina Default3.aspx veremos que el control TextBox aparece inicializado con el ltimo
mail ingresado (Aunque apaguemos y prendamos la mquina el ltimo mail aparecer
dentro del control)
Como podemos ver una cookie es muy til si queremos almacenar datos de configuracin
de un sitio para cada visitante.
cookie de sesin : Creacin y acceso.

La diferencia de una cookie de sesin con una persistente es que las cookies de sesin
permanecen mientras no cerramos la instancia del navegador, luego el cdigo para crear
una cookie de sesin es similar a las cookies persistentes con la salvedad que no debemos
especificar fecha de expiracin:
HttpCookie cookie1=new
HttpCookie("edad",this.TextBox1.Text);
Label1.Text = "Se cre la cookie";
Variables de Sesin
Una variable de sesin permite preservar el valor de una variable a travs de una serie de
pginas. Una variable de sesin se utiliza normalmente para almacenar una preferencia del
usuario, un carrito de compras, informacin de seguridad del usuario, nombres de usuarios,
password, etc.
Las variables de sesin son almacenadas durante el tiempo que el usuario visita el sitio
Web.
Cuando el servidor detecta que el usuario no hace ms peticiones de pginas, la
informacin almacenada en las variables de sesin es automticamente destruida (por
defecto est configurado para que la destruccin de dichas variables suceda luego de 20
minutos de inactividad)
Podemos modificar el tiempo de vida de las variables de sesin inicializando la propiedad
Timeout del objeto Session que tiene toda pgina (el valor que se asigna representa
minutos)
Session.Timeout = 10;
Los datos que podemos almacenar en variables de sesin pueden ser de cualquier tipo:
string, int, ArrayList, etc.
Para ilustrar el uso de variables de sesin haremos una serie de pginas donde en la
primera ingresaremos el nombre de usuario y clave, en la segunda los listaremos, y en esta
dispondremos un hipervnculo para dirigirnos a una tercera pgina, donde mostraremos
nuevamente el contenido de las variables de sesin.
Crear las pginas Default5.aspx y Default6.aspx.
(Default4.aspx):
Esta pgina solicita la carga de los dos datos y redirecciona a la segunda pgina, la interfaz
visual es la siguiente:
El cdigo para el evento Click del botn confirmar es el siguiente:
using System;
using System.Linq;
using System.Web;

{
{

EventArgs e)
{
//Almacenamos las dos variables de sesion
Session["usuario"] = TextBox1.Text;
Session["clave"] = TextBox2.Text;
//Redireccionamos a la siguiente pagina
}
}
Default5.aspx:
Tiene por objetivo mostrar los contenidos de las dos variables de sesin. Adems hay un
hipervnculo (objeto de la clase HyperLink) que llama a la siguiente pgina.
La interfaz visual es:
El cdigo fuente de esta pgina es la siguiente:

using System;
using System.Linq;
using System.Web;

{
{

EventArgs e)
{
//Almacenamos las dos variables de sesion
Session["usuario"] = TextBox1.Text;
Session["clave"] = TextBox2.Text;
//Redireccionamos a la siguiente pagina
}
}
Es decir inicializamos las Label con los contenidos de las variables de sesin que estn
almacenadas en memoria y administradas por el servidor Web.
Default6.aspx:
Por ltimo esta tercer pgina tiene por objetivo mostrar nuevamente el contenido de las
variables de sesin.
La interfaz es:
Y el cdigo fuente del evento Load de la pgina es:

using System;
using System.Linq;
using System.Web;

{
{
Label1.Text =
this.Session["usuario"].ToString();
Label2.Text = this.Session["clave"].ToString();
}
}
Las variables de sesin se verifican su existencia igual que las cookies.
Ejercicio propuesto
1 ? Confeccionar un sitio que muestre noticias Deportivas, Polticas y Culturales. Mediante
una pgina de configuracin permitir que un visitante pueda especificar que tipo de noticias
quiere ver en la portada del sitio (emplear tres cookies)
Creacin de imgenes dinmicas en el servidor.
Conceptos.
Introduccin
Cuando debemos generar imgenes a partir de datos que se extraen de una base de datos
o datos ingresados desde el navegador debemos construir la imagen en dicho momento.
ASP.Net provee de clases orientadas a generar imgenes en memoria y su posterior
materializacin en un archivo.
Imgenes dinmicas
1 - Programa ?Hola Mundo?
Crearemos un sitio web llamado 'ejercicio020' y agregaremos el primer Web Form y le

datemos como nombre holamundo.aspx.
Para crear una imagen en forma dinmica debemos seguir una serie de pasos:
a - Debemos modificar el archivo webform (holamundo.aspx) agregando:
ContentType="image/gif"
<%@ Page ContentType="image/gif" Language="C#" AutoEventWireup="true"
CodeFile="holamundo.aspx.cs" Inherits="holamundo" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
</div>
</form>
</body>
</html>
b ? El archivo holamundo.aspx.cs es:
using System;
using System.Linq;
using System.Web;
//Importamos el espacio de nombre que declara la clase
Bitmap, Graphics, Font y SolidBrush
using System.Drawing;
//Importamos el espacio de nombre que declara la clase
ImageFormat
using System.Drawing.Imaging;
public partial class holamundo : System.Web.UI.Page
{
{
//Creamos un objeto de la clase Bitmap
Bitmap mapabit = new Bitmap(500, 300);
Graphics lienzo;
//Iicializamos la variable de tipo Graphics con
el bitmap creado
lienzo = Graphics.FromImage(mapabit);
//Creamos una fuente
Font fuente1 = new Font("Arial", 40);
//Creamos un pincel
SolidBrush pincel1 = new SolidBrush(Color.Red);
//Graficamos dentro de la imagen
lienzo.DrawString("Hola Mundo", fuente1,
pincel1, 10, 10);
//Enviamos la imagen al navegador que la
solicit
mapabit.Save(Response.OutputStream,
ImageFormat.Gif);
}
}
El resultado de la ejecucin es:
Es importante tener en cuenta que cuando ejecutamos este webform en realidad lo que
retorna es una imagen con formato gif y no un archivo HTML. Fcilmente podemos
comprobarlo tratando de ver el cdigo fuente de la pgina presionando el botn derecho del
mouse dentro del navegador.
2 ? Insercin de una imagen dinmica en un webform.

Para la incorporacin de la imagen en una pgina propiamente dicha debemos hacer lo
siguiente:
Creamos una segunda pgina llamada paginaholamundo.aspx con un cdigo similar a este:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="paginaholamundo.aspx.cs"
Inherits="paginaholamundo" %>
<!DOCTYPE html>
<title></title>
</head>
<body>
<div>
<img src="holamundo.aspx" alt="prueba de imagen dinmica" />
</div>
</form>
</body>
</html>
Es decir que con el elemento HTML img indicamos en la propiedad src el nombre del
archivo que genera la imagen.
3 ?Generacin de un Captcha.
Captcha es el acrnimo de Completely Automated Public Turing text to tell Computers and
Humans Apart (Prueba de Turing pblica y automtica para diferenciar a mquinas y
humanos)
Se trata de una prueba desafo-respuesta utilizada en computacin para determinar cundo
el usuario es o no humano.
Confeccionaremos una imagen con un nmero aleatorio entre 1000 y 9999 y para dificultar
su lectura por un programa automtico de lectura lo rayaremos con lneas de distintos
colores.
Por ltimo incorporaremos almacenaremos el valor en una variable de sesin y validaremos
el valor que ingresa el usuario en un control de tipo TextBox.
a - Primero generamos un grfico dinmico (captcha.aspx.cs y captcha.aspx):
Tener en cuenta que el archivo captcha.aspx solo debemos agregar la propiedad
ContentType indicando que generar una imagen en formato gif):
CodeFile="captcha.aspx.cs" Inherits="captcha" %>
<!DOCTYPE html>
<title></title>
</head>
<body>
<div>
</div>
</form>
</body>
</html>
Luego el cdigo de la clase ser:
using System;
using System.Linq;
using System.Web;
public partial class captcha : System.Web.UI.Page

{
{
Graphics lienzo;
int nro;
Random r = new Random();
nro = r.Next(1, 10000);
lienzo.DrawString(nro.ToString(), fuente1,
pincel1, 4, 4);
//Dibujar lineas
for (int f = 1; f <= 10; f++)
{
int x1 = r.Next(1, 100);
int y1 = r.Next(1, 40);
int x2 = r.Next(1, 100);
int y2 = r.Next(1, 40);
Pen lapiz1 = new
Pen(Color.FromArgb(r.Next(1, 255), r.Next(1, 255),
r.Next(1, 255)));
lienzo.DrawLine(lapiz1, x1, y1, x2, y2);
}
Session["codigo"] = nro.ToString();
ImageFormat.Gif);
}
}
Hacemos el import de los dos espacios de nombres:
En el mtodo Page_Load creamos un objeto de la clase BitMap indicando el ancho y el alto
en pxeles.
Obtenemos una referencia de la imagen almacenndola en una variable de tipo Graphics.
Graphics lienzo;
Generamos un valor aleatorio:
int nro;
Random r = new Random();
nro = r.Next(1, 10000);
Imprimimos el nmero dentro de la imagen:
lienzo.DrawString(nro.ToString(), fuente1, pincel1, 4, 4);
Dibujamos 10 lneas de distintos colores en forma aleatoria tapando parcialmente el
nmero aleatorio:
for (int f = 1; f <= 10; f++)
{
int x1 = r.Next(1, 100);
int y1 = r.Next(1, 40);
int x2 = r.Next(1, 100);
int y2 = r.Next(1, 40);
Pen lapiz1 = new Pen(Color.FromArgb(r.Next(1, 255), r.Next(1, 255),
r.Next(1, 255)));
lienzo.DrawLine(lapiz1, x1, y1, x2, y2);
}
Almacenamos el valor en una variable de sesin para poder recuperarlo en otra pgina y
poder compararlo con el que ingresa el usuario por teclado:
Session["codigo"] = nro.ToString();
Enviamos la imagen al navegador que lo solicit:
mapabit.Save(Response.OutputStream, ImageFormat.Gif);
b ? Creamos un formulario web (formulariocaptcha.aspx) donde insertamos el Captcha
(imagen) y disponemos adems un control de tipo textbox y un button:
Debemos generar un webform semejante a este:
Disponemos un objeto de la clase Image e inicializamos la propiedad ImageUrl con el
nombre del archivo que genera el grfico dinmico llamado captcha.aspx.
Para el evento Click del objeto Button1 disponemos el siguiente cdigo:
using System;
using System.Linq;
using System.Web;
public partial class formulariocaptcha :

System.Web.UI.Page
{
{
}
EventArgs e)
{
if (Session["codigo"].ToString() ==
this.TextBox1.Text)
{
Label1.Text = "Ingres el codigo correcto";
}
else
{
Label1.Text = "Incorrecto";
}
}
}
Luego mediante un if controlamos el valor del captcha y el valor ingresado por el usuario en
el textbox1. Mostramos en un label el resultado de la comparacin.
Cuando ejecutamos podemos ver que la imgen dinmica aparece en el formulario:
4 ?Grfico de tarta.
Para implementar un grfico de tarta debemos emplear el mtodo FillPie de la clase

Graphics.
Desarrollaremos una aplicacin que solicite en un webform (crear el archivo
formulariotarta.aspx) tres valores enteros por teclado y llamaremos a un grfico dinmico
que mostrar un grfico de tarta rescatando los valores del webform.
El webform enva mediante parmetros los datos ingresados.
El webform tiene la siguiente interfaz:
Y el cdigo que debemos implementar para el evento Click del objeto Button es:
using System;
using System.Linq;
using System.Web;
public partial class formulariotarta :

System.Web.UI.Page
{
{

EventArgs e)
{
this.Response.Redirect("graficotarta.aspx?v1=" +
this.TextBox1.Text +
"&v2=" +
"&v3=" +
this.TextBox3.Text);
}
}
Es decir redireccionamos al archivo graficotarta.aspx pasando 3 parmetros en la cabecera
de la llamada.
El archivo que genera la imagen dinmica (graficotarta.aspx.cs) es el siguiente:
using System;
using System.Linq;
using System.Web;
public partial class graficotarta : System.Web.UI.Page

{
{
Graphics lienzo;
float valor1 =
float.Parse(this.Request.QueryString["v1"]);
float valor2 =
float valor3 =
float total = valor1 + valor2 + valor3;
float grados1 = valor1 / total * 360;
lienzo.FillPie(pincel1, 100, 100, 400, 400, 0,
grados1);
SolidBrush pincel2 = new SolidBrush(Color.Blue);
lienzo.FillPie(pincel2, 100, 100, 400, 400,
grados1, grados2);
SolidBrush pincel3 = new
SolidBrush(Color.Green);
lienzo.FillPie(pincel3, 100, 100, 400, 400,
grados1 + grados2, grados3);
//Referencias
lienzo.FillRectangle(pincel1, 600, 500, 20, 20);
Font fuente = new Font("Arial", 10);
lienzo.DrawString(valor1.ToString(), fuente,
pincel1, 630, 500);
pincel2, 630, 530);
pincel3, 630, 560);
ImageFormat.Gif);
}
}
Tambin recordemos que el archivo (graficotarta.aspx) agregar la propiedad contenttype:
CodeFile="graficotarta.aspx.cs" Inherits="graficotarta" %>
Veamos el algoritmo para mostrar el grfico de tarta dentro de la imagen. En el mtodo
Load generamos la imagen. Creamos un objeto de la clase Bitmap y obtenemos la
referencia al objeto de la clase Graphics contenido en el mismo:
Graphics lienzo;
Recuperamos los tres valores ingresados en el webform:
float valor1 = float.Parse(this.Request.QueryString["v1"]);
Calculamos la cantidad de grados que le corresponde a cada valor y dibujamos el trozo de
tarta respectivo:
float total = valor1 + valor2 + valor3;
lienzo.FillPie(pincel1, 100, 100, 400, 400, 0, grados1);
lienzo.FillPie(pincel2, 100, 100, 400, 400, grados1, grados2);
SolidBrush pincel3 = new SolidBrush(Color.Green);
lienzo.FillPie(pincel3, 100, 100, 400, 400, grados1 + grados2, grados3);
Dibujamos los recuadros de referencias con el valor que le corresponde a cada trozo de
tarta:
Font fuente = new Font("Arial", 10);
lienzo.DrawString(valor1.ToString(), fuente, pincel1, 630, 500);
mapabit.Save(Response.OutputStream, ImageFormat.Gif);
El resultado del grfico es:
4 ?Grfico de barra horizontal.
Para implementar un grfico de barra horizontal debemos emplear el mtodo FillRect de la

clase Graphics. Desarrollaremos una aplicacin que solicite en un webform
(formulariobarrahorizontal.aspx) tres valores enteros por teclado y llamaremos a un grfico
dinmico que mostrar un grfico de barra rescatando los valores del webform.
El webform enva mediante parmetros los datos ingresados.
El interfaz para la carga de los tres valores enteros en un webform es similar al problema
del grfico de tarta.
El cdigo que debemos implementar para el evento Click del objeto Button es:
using System;
using System.Linq;
using System.Web;
public partial class formulariobarrahorizontal :

System.Web.UI.Page
{
{

EventArgs e)
{
this.Response.Redirect("graficobarrahorizontal.aspx?v1="
+ this.TextBox1.Text +
"&v2=" +
"&v3=" +
this.TextBox3.Text);
}
}
Es decir redireccionamos al archivo graficobarrahorizontal.aspx pasando 3 parmetros en
la cabecera de la llamada.
El archivo que genera la imagen dinmica (graficobarrahorizontal.aspx.cs) es la siguiente:
using System;
using System.Linq;
using System.Web;
public partial class graficobarrahorizontal :

System.Web.UI.Page
{
{
Graphics lienzo;
float valor1 =
float valor2 =
float valor3 =
float mayor = this.RetornarMayor(valor1, valor2,
valor3);
float largo1 = valor1 / mayor * 400;
lienzo.FillRectangle(pincel1, 50, 50, 50 +
largo1, 80);
SolidBrush(Color.Green);
largo2, 80);
largo3, 80);
//Cantidades
SolidBrush(Color.Black);
lienzo.DrawString(valor1.ToString(), fuente1,
pincel4, 60, 80);
pincel4, 60, 160);
pincel4, 60, 260);
ImageFormat.Gif);
}
private float RetornarMayor(float x1, float x2,

float x3)
{
if (x1 > x2 && x1 > x3)
return x1;
else
if (x2 > x3)
return x2;
else
return x3;
}
}
El mtodo RotornarMayor recibe como parmetros tres float y retorna el mayor de los
mismos:
private float RetornarMayor(float x1, float x2, float x3)
{
if (x1 > x2 && x1 > x3)
return x1;
else
if (x2 > x3)
return x2;
else
return x3;
}
El mtodo Load es el que crea el grfico de barra horizontal propiamente dicho.
Para graficar cada barra:
lienzo.FillRectangle(pincel1, 50, 50, 50 + largo1, 80);
Debemos dividir el valor correspondiente con respecto al mayor de los tres. Este valor
como mximo puede ser 1. Luego multiplicamos este valor por 400 (este valor representa
el largo de barra mayor)
Graficamos mediante el mtodo FillRectangle.
Mostramos los valores enteros que les corresponde a cada barra:
SolidBrush pincel4 = new SolidBrush(Color.Black);
lienzo.DrawString(valor1.ToString(), fuente1, pincel4, 60, 80);
Ejercicios propuestos
1 ? Confeccionar un grfico dinmico que genere un grfico de barras verticales.
2 ? Confeccionar un grfico dinmico que genere una barra porcentual (mostrar los
porcentajes que les corresponde a cada trozo fuera de la barra)
3 ? Generar una imagen a partir de otra y agregarle un texto en forma dinmica. En
algunos casos cuando se quiere proteger la propiedad de imgenes es aplicarles un texto
que indica que la imagen no puede ser usada en otro sitio para fines comerciales.
4 ? Confeccionar un algoritmo que permita ingresar los datos personales y luego genere
una tarjeta personal con dichos datos:
ej:.
Master Page
Conceptos.
Introduccin
Una Master Page o Pgina Principal es una estructura base para un conjunto de pginas
pertenecientes a un mismo sitio Web. Este esqueleto base se almacena en un archivo
independiente y luego es heredado por otras pginas que requieren esa estructura base.
Un ejemplo donde utilizar una pgina Master Page es la definicin de la cabecera y el pie
del sitio, luego todas las otras pginas del sitio heredan de dicha pgina. La ventaja
fundamental en este ejemplo es que si hay cambios en la cabecera del sitio solo debemos
hacerlos en la pgina principal y con esto se propaga en todas las pginas que heredan de
la misma.
1 ? Problema 1
Problema:Crear un sitio web llamado ejercicio021 que permita mostrar un conjunto de

direcciones web agrupados por tema. Disponer una lista de hipervnculos con los siguientes
temas: Buscadores ? Peridicos ? Blog
Mostrar en la parte inferior de la pgina un mensaje de Copyright.
Para crear un sitio que utilice una Master Page debemos seguir una serie de pasos:
a ? Creamos un nuevo sitio web (ejercicio021): Archivo -> Nuevo Sitio Web? y
seleccionamos la plantilla " Sitio web vaco "
b ? En la ventana del ?Explorador de soluciones? presionamos el botn derecho del mouse
y seleccionamos ?Agregar nuevo elemento?? y seleccionamos ?Pgina maestra?(en ingles
Master Page) ,dejamos el nombre por defecto "MasterPage.master"
Las pginas Master Page tienen extensin master en lugar de aspx.
El cdigo generado en forma automtico es el siguiente:
<%@ Master Language="C#" AutoEventWireup="true"
CodeFile="MasterPage.master.cs" Inherits="MasterPage"
%>
<!DOCTYPE html>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8"/>
<title></title>
<asp:ContentPlaceHolder id="head" runat="server">
</asp:ContentPlaceHolder>
</head>
<body>
<div>
<asp:ContentPlaceHolder id="ContentPlaceHolder1"
runat="server">
</div>
</form>
</body>
</html>
Lo primero que vemos que es distinto con un WebForm es la directiva Master en lugar de
Page:
CodeFile="MasterPage.master.cs" Inherits="MasterPage" %>
Ahora agregaremos los hipervnculos en la parte superior y el pi de pgina:
CodeFile="MasterPage.master.cs" Inherits="MasterPage"
%>
<!DOCTYPE html>
charset=utf-8"/>
<title></title>
<asp:ContentPlaceHolder id="head" runat="server">
</head>
<body>
<div>
<a href="Default.aspx">Buscadores.</a>-
<a href="Default2.aspx">Peridicos.</a>-
<a href="Default3.aspx">Blogs.</a>
<hr />
<asp:ContentPlaceHolder id="ContentPlaceHolder1"
runat="server">
<h3>Copyright 2015</h3>
</div>
</form>
</body>
</html>
Luego veremos que todas las pginas que hereden de esta mostrarn los tres
hipervnculos en la parte superior y el mensaje de Copyright en la parte inferior.
c ? Agregar un Web Forms que herede del Master Page que hemos creado. En la ventana
del ?Explorador de soluciones? presionamos el botn derecho del mouse y seleccionamos
?Agregar nuevo elemento?? y seleccionamos ?Web Forms?. Es importantsimo ahora
seleccionar el checkbox ?Seleccionar la pgina maestra?, tambin podemos cambiar el
nombre por defecto de la pgina (podemos llamarla Default.aspx):
Luego de presionar el botn Agregar y si seleccionamos correctamente ?Seleccionar la
pgina maestra? aparecer un nuevo dilogo para seleccionar el Master Page del cual
hereda nuestro Web Form:
El cdigo generado en forma automtico es el siguiente:
<%@ Page Title="" Language="C#"
MasterPageFile="~/MasterPage.master"
AutoEventWireup="true"
CodeFile="Default.aspx.cs" Inherits="_Default" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head"

Runat="Server">
</asp:Content>
<asp:Content ID="Content2"
ContentPlaceHolderID="ContentPlaceHolder1"
Runat="Server">
</asp:Content>
Como podemos observar no contiene los elementos HTML de la cabecera y el cuerpo, ya
que se heredan de la Master Page.
El cdigo propio de esta pgina debemos disponerlo en la marca asp:Content, en nuestro
ejemplo agregaremos una lista de enlaces a los distintos buscadores:

Runat="Server">
</asp:Content>
Runat="Server">
<a href="http://www.google.com">Google</a><br />

<a href="http://www.yahoo.com">Yahoo</a><br />
<a href="http://www.live.com">Live</a><br />
</asp:Content>
d - De igual forma creamos las otras pginas (Default2.aspx y Default3.aspx):
Default2.aspx
CodeFile="Default2.aspx.cs" Inherits="Default2" %>

Runat="Server">
</asp:Content>
Runat="Server">
<a href="http://www.lanacion.com.ar">La Nacin</a><br />

<a href="http://www.clarin.com.ar">El Clarin</a><br />
<a href="http://www.lavoz.com.ar">La Voz</a><br />
</asp:Content>
Default3.aspx:
CodeFile="Default3.aspx.cs" Inherits="Default3" %>
Runat="Server">
</asp:Content>
Runat="Server">
<a
href="http://www.microsiervos.com">Microsiervos</a><br
/>
<a href="http://www.alt1040.com">Alt 1040</a><br />
<a href="http://www.puntogeek.com">PuntoGeek</a><br />
</asp:Content>
Ahora cuando ejecutamos y solicitamos la pgina Default.aspx el resultado es el siguiente:
Como podemos observar al contenido definido en el archivo Default.aspx (los tres

hipervnculos a los buscadores) se a aadido todo lo definido en la Master Page (es decir
los hipervnculos a las categoras ?Buscadores?, ?Peridicos? y ?Blogs?, adems del
mensaje en la parte inferior de la pgina)
Luego cuando solicitamos las pginas Default2.aspx y Default3.aspx vemos que todas
tienen el contenido definido en el archivo MasterPage:
AJAX con ASP.Net
Conceptos.
Introduccin
Hasta ahora, hemos aprendido a crear pginas web que utilizan el modelo postback. Con el
postback, las pginas estn perpetuamente reenvindose al servidor web y regenerndose.
Como desventaja del modelo postback tenemos que hay un parpadeo del contenido de la
pgina cuando tiene que refrescarse. Adems se tiene el problema que se reenvan todos
los datos al servidor.
Recientemente, una nueva generacin de aplicaciones web ha comenzado a aparecer que
se comportan ms como las aplicaciones de Windows que las tradicionales pginas web.
Estas aplicaciones se refrescan en forma rpida y sin parpadeos. Entre los ejemplos
notables incluyen el correo electrnico basado en web como Gmail y aplicaciones de la
cartografa como Google Maps.
Esta nueva generacin de aplicaciones web utiliza un conjunto de prcticas de diseo y
tecnologas conocidas como Ajax.
Una de las caractersticas fundamentales de Ajax es la capacidad para actualizar parte de
la pgina, mientras que deja el resto intacto.
AJAX son las siglas de Asynchronous JavaScript And XML. No es un lenguaje de
programacin sino un conjunto de tecnologas (HTML-JavaScript-CSS-DHTML-
PHP/ASP.NET/JSP-XML) que nos permiten hacer pginas de internet ms interactivas.
La caracterstica fundamental de AJAX es permitir actualizar parte de una pgina con
informacin que se encuentra en el servidor sin tener que refrescar completamente la
pgina. De modo similar podemos enviar informacin al servidor.
Veremos como ASP.Net nos esconde la complejidad de Ajax y nos permite una fcil
transicin entre aplicaciones web tradicionales y el nuevo modelo.
ASP.NET AJAX
Hay una variedad de formas de aplicar el Ajax en cualquier aplicacin Web, incluyendo
ASP.NET. Para ponerlo en prctica Ajax sin utilizar libreras, es necesario que se tenga una
comprensin profunda de JavaScript, porque es el lenguaje JavaScript el que se ejecuta en
el navegador, que solicita la nueva informacin del servidor web cuando sea necesario y la
actualizacin de la pgina en consecuencia.
Si bien JavaScript no es terriblemente complejo, es muy difcil de programar correctamente,
por dos razones:
- La aplicacin de los principales detalles de JavaScript vara de navegador a navegador,
que significa que necesita una enorme cantidad de experiencia para escribir una buena
pgina web que se ejecuta igual de bien en todos los navegadores.
- JavaScript es un lenguaje muy laxo que tolera muchos pequeos errores. La captura de
estos errores y la eliminacin de ellos es un proceso tedioso. An peor, el error puede ser
fatal en algunos navegadores y daina en otros, lo que complica la depuracin.
En este captulo, usted NO va a usar JavaScript directamente. Por el contrario, utilizar un
modelo de nivel superior llamado ASP.NET AJAX.
ASP.NET AJAX le da un conjunto de componentes del lado del servidor y los controles
ASP.NET tradicionales que puede utilizar en el diseo de su pgina web. Estos
componentes hacen automticamente todos el cdigo JavaScript que necesita para
obtener el efecto deseado. El resultado es que puede crear una pgina con Ajax. Por
supuesto, usted no obtendr el mximo control para personalizar hasta el ltimo detalle de
su pgina, pero usted recibir una gran funcionalidad con un mnimo de esfuerzo.
Extensiones Ajax
El Visual Studio .Net agrega una pestaa que agrupa los controles referidos a Ajax:
Para poder utilizar ASP.NET AJAX es necesario un control de tipo ScriptManager. Este
control es el cerebro de ASP.NET AJAX, Cuando disponemos un control de tipo
ScriptManager en el formulario aparece un cuadro gris, pero cuando ejecutemos dicha
pgina no aparecer, es decir el control ScriptManager no genera etiquetas HTML.
El control ScriptManager genera todo el cdigo JavaScript necesario para las llamadas
asncronas desde el navegador al servidor web.
Cada pgina que utiliza ASP.NET AJAX requiere solo una instancia de la clase
ScriptManager, indistintamente la cantidad de regiones que vallamos a actualizar
posteriormente.
Refresco parcial de pgina.
Confeccionaremos un problema sin utilizar AJAX y luego lo resolveremos utilizando AJAX y

veremos las ventajas que presenta.
El problema a resolver es mostrar un video del sitio de youtube.com, dispondremos un
botn que cuando se presione recuperar los comentarios existentes para dicho video
(para hacer el problema ms corto evitaremos extraer los comentarios de una base de
datos)
>
Crear un sitio web llamado ejercicio022 y agregar un Web Form llamado Default.aspx
Disponemos en vista de cdigo las marcas HTML que nos provee el sitio youtube.com para
insertar en nuestra pgina el video. Luego la pgina Default en vista de cdigo queda:
<%@ Page Language="C#" AutoEventWireup="true"
<!DOCTYPE html>
charset=utf-8"/>
<title></title>
</head>
<body>
<div>
<iframe width="420" height="315"
src="https://www.youtube.com/embed/OE8WzYNRPNU"
frameborder="0" allowfullscreen></iframe>
</div>
</form>
</body>
</html>
Hemos dispuesto el cdigo suministrado por youtube.com.

Ahora en vista de Diseo agregamos un Button y una Label.:
El cdigo a implementar al presionar el botn es:
using System;
using System.Linq;
using System.Web;

{
{

EventArgs e)
{
Label1.Text = "1 - Muy buen video. <br> 2 -
Correcto. <br>3 - De lo mejor.";
}
}
Es decir cargamos el contenido de la Label con los comentarios. Como podrn ver al
ejecutar la aplicacin si estamos viendo el video y presionamos el botn de ?Ver
comentarios? el contenido de la pgina se recarga, es decir debemos comenzar de nuevo a
ver el video (esta situacin es poco agradable para el visitante del sitio)
Ahora crearemos otra pgina y utilizaremos ASP.NET AJAX para no tener que refrescar
toda la pgina sino la Label donde deben aparecer los comentarios.
Creamos una segunda pgina (Default2.aspx), agregamos tambin el cdigo suministrado
por youtube.com.
Debemos primero insertar un objeto de la clase ScriptManager y un objeto de la clase
UpdatePanel.
Todo lo contenido en el control UpdatePanel se refrescar sin tener que recargar la pgina
por completo. Disponemos entonces dentro del UpdatePanel1 la Label y el botn para
?Recuperar comentarios?, la interface visual creada es:
Para el evento click del botn realizamos el mismo cdigo hecho para la pgina anterior:
using System;
using System.Linq;
using System.Web;

{
{
}

EventArgs e)
{
Label1.Text = "1 - Muy buen video. <br> 2 -
Correcto. <br>3 - De lo mejor.";
}
}
Si ejecutamos la pgina Default2.aspx veremos que la experiencia del usuario visitante
ser mejor. Probemos de iniciar el video y luego presionar el botn ?Ver comentarios?,
como observaremos el video no se detiene y luego de un corto tiempo tenemos en la
pgina los comentarios dispuestos en dicho video.
La idea bsica es dividir su pgina web en una o ms regiones distintas, cada una de las
que se envuelve dentro de un UpdatePanel invisibles en tiempo de ejecucin. Cuando un
evento ocurre en un control que se ubicado dentro de un UpdatePanel, y este evento
normalmente desencadena una pgina completa postback, el UpdatePanel intercepta el
evento y realiza una llamada asincrnica. Aqu est un ejemplo de cmo esto sucede:
1. El usuario hace clic en un botn dentro de un UpdatePanel.
2. El UpdatePanel intercepta en el lado del cliente el clic.
Ahora, ASP.NET AJAX realiza una llamada al servidor en lugar de una pgina completa
postback.
3. En el servidor, se ejecuta su ciclo de vida en forma normal, con todos los eventos
habituales.
4. ASP.NET AJAX recibe todo el HTML y se actualiza cada UpdatePanel y los cambios que
no estn dentro de un UpdatePanel se ignoran.

Conceptos ASP NET

Încărcat de

Informații document

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

Conceptos ASP NET

Încărcat de

Drepturi de autor:

Formate disponibile

Conceptos.

Inmediatamente aparece un dilogo donde debemos seleccionar el lenguaje a

Para nuestro primer ejemplo implementaremos el ?Hola Mundo? para ello en el

public partial class _Default : System.Web.UI.Page

public partial class _Default : System.Web.UI.Page

En nuestro Web Form disponemos un objeto de la clase Label y un objeto de la

Luego para el evento Button1_Click actualizamos el contenido de la propiedad Text

public partial class _Default : System.Web.UI.Page

protected void Button1_Click(object sender,

Controles Label, Button y TextBox.

public partial class _Default : System.Web.UI.Page

protected void Button1_Click(object sender,

Para probar el funcionamiento del control RadioButton crearemos un nuevo sitio

public partial class _Default : System.Web.UI.Page

protected void Button1_Click(object sender,

public partial class _Default : System.Web.UI.Page

protected void Button1_Click(object sender,

El control ListBox permite crear una lista de valores.

public partial class _Default : System.Web.UI.Page

public partial class _Default : System.Web.UI.Page

ABM (Altas, Bajas y Modificaciones)

Creamos luego la tabla usuarios:

Definicin de la cadena de conexin con la base de datos en el archivo Web.config

Web.config es el archivo principal de opciones de configuracin para una aplicacin web en

public partial class alta : System.Web.UI.Page

El cdigo del evento click del botn es:

public partial class consulta : System.Web.UI.Page

protected void Button1_Click(object sender,

Seleccionamos del Explorador de soluciones la pgina baja.aspx y procedemos a elaborar

public partial class baja : System.Web.UI.Page

protected void Button1_Click(object sender,

Por ltimo implementaremos la modificacin de datos. Seleccionamos del Explorador de

Para efectuar la modificacin de datos de un usuario procederemos primero a la bsqueda

public partial class modificacion : System.Web.UI.Page

protected void Button1_Click(object sender,

protected void Button2_Click(object sender,

Clase SQLDataSource (ABM - Altas, Bajas y Modificaciones)

Conexin con la base de datos

public partial class alta : System.Web.UI.Page

protected void Button1_Click(object sender,

Seleccionamos del Explorador de soluciones la pgina consulta.aspx y procedemos a

public partial class consulta : System.Web.UI.Page

Seleccionamos del Explorador de soluciones la pgina baja.aspx y procedemos a elaborar

public partial class baja : System.Web.UI.Page

Por ltimo implementaremos la modificacin de datos. Seleccionamos del Explorador de

public partial class modificacion : System.Web.UI.Page

protected void Button1_Click(object sender,

protected void Button2_Click(object sender,

Clase SQLDataSource (ABM - Altas, Bajas y Modificaciones)

Conexin con la base de datos

public partial class alta : System.Web.UI.Page

protected void Button1_Click(object sender,

Seleccionamos del Explorador de soluciones la pgina consulta.aspx y procedemos a

public partial class consulta : System.Web.UI.Page

Seleccionamos del Explorador de soluciones la pgina baja.aspx y procedemos a elaborar

public partial class baja : System.Web.UI.Page

Por ltimo implementaremos la modificacin de datos. Seleccionamos del Explorador de

public partial class modificacion : System.Web.UI.Page

protected void Button1_Click(object sender,

protected void Button2_Click(object sender,

Clase SQLDataSource (ABM con varias tablas)

Creamos la siguiente interfaz para poder cargar nombres de rubros:

public partial class altarubro : System.Web.UI.Page

protected void Button1_Click(object sender,