Pasos para Crear Un Sitio Web ASP-Fácil

1. Pasos para crear un sitio web ASP.
Net con el Visual Studio 2015 con C#

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
using
using
using
using
using
System;
System.Collections.Generic;
System.Linq;
System.Web;
System.Web.UI;
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
using
using
using
using
using
System;
System.Linq;
System.Web;
System.Web.UI;

{
{
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
using
using
using
using
using
System;
System.Linq;
System.Web;
System.Web.UI;

{
{
}
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
using
using
using
using
using
System;
System.Linq;
System.Web;
System.Web.UI;

{
{
}
{
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
using
using
using
using
using
System;
System.Linq;
System.Web;
System.Web.UI;

{
{
}
{
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
using
using
using
using
using
System;
System.Linq;
System.Web;
System.Web.UI;

{
{
}
{
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
using
using
using
using
using
System;
System.Linq;
System.Web;
System.Web.UI;

{
{
}
{
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;

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
using
using
using
using
using
System;
System.Linq;
System.Web;
System.Web.UI;

{
{
}
{
Label1.Text = "";
if (DropDownList1.Items[0].Selected)
{
int suma = x1 + x2;
}
else
{
int resta = x1 - x2;
Label1.Text = "La diferencia:" + resta + "<br>";
}
else
{
int multi = x1 * x2;
Label1.Text = "El producto:" + multi + "<br>";
}
else
{
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.
2. Creacin, lectura y escritura de archivos de texto.

En muchas situaciones es necesario almacenar informacin en el servidor, tenemos dos alternativas,
si la cantidad de datos a almacenar es pequea podemos utilizar un archivo de texto para ello (en la
prxima clase veremos como almacenar en una base de datos)
Un archivo de texto no requiere grandes recursos del servidor.
Creacin y carga del archivo de texto.
Confeccionaremos un libro de visitas de un sitio web.
Crear un sitio web llamado ejercicio008 y luego agregar tres web form (Default.aspx, carga.aspx y
listado.aspx), en la pgina principal (Default.axpx) dispondremos de dos hipervnculos (HyperLink)
que sacamos del Cuadro de herramientas, el primero ir al formulario de carga y el segundo al listado
del contenido del archivo.
La pgina Default.aspx:
Para los controles HyperLink debemos inicializar las propiedades Text con el mensaje a mostrar en
el hipervnculo y mediante la propiedad NavigateUrl indicamos a que pgina se llama al ser
presionado:
El primer control HyperLink nos lleva al formulario web que permite cargar el nombre del visitante,
su pas y los comentarios.
El formulario web requiere tres objetos de la clase TextBox, al tercero donde se ingresan los
comentarios debemos inicializar la propiedad TextMode con el valor MultiLine.
Disponemos un control de tipo HyperLink para poder retornar a la pgina principal (Default.aspx)
Cuando se presiona el botn confirmar procedemos a almacenar los datos del formulario en el
archivo de texto, si existe los agregamos al final, en caso que no exista se crea el archivo.
Mostramos finalmente en una label que se almacenaron los datos.
El cdigo completo para registrar los datos es:
using
using
using
using
using
using
using
System;
System.IO;
System.Linq;
System.Web;
System.Web.UI;
public partial class carga : System.Web.UI.Page

{
{
}
{
StreamWriter arch = new StreamWriter(Server.MapPath(".") +
"/visitas.txt", true);
arch.WriteLine("Nombre:" + TextBox1.Text);
arch.WriteLine("<br>");
arch.WriteLine("Pais:" + TextBox2.Text);
arch.WriteLine("Comentarios<br>");
arch.WriteLine(TextBox3.Text);
arch.WriteLine("<hr>");
arch.Close();
Label1.Text = "Datos Registrados";
}
}
Primero importamos el espacio de nombres donde est declarada la clase StreamWriter:
using System.IO;
Cuando se presiona el botn confirmar creamos un objeto de la clase StreamWriter y le pasamos en
el constructor el path y nombre del archivo a abrir o crear segn sea el caso.
Para obtener el directorio actual utilizamos el mtodo MapPath del objeto Server:
StreamWriter
arch
=
new
StreamWriter(Server.MapPath(".")
+
"/visitas.txt", true);
El valor true que le pasamos en el constructor significa que si el archivo no existe en el servidor en
la carpeta especificada se procede a su creacin y en el caso que si existe se procede a su apertura
y posicionado del puntero de archivo al final del mismo.
El mtodo WriteLine de la clase StreamWriter permite almacenar una lnea en el archivo de texto y
el posterior ingreso en forma automtica del salto de lnea:
arch.WriteLine("Nombre:" + TextBox1.Text);
arch.WriteLine("Pais:" + TextBox2.Text);
arch.WriteLine("Comentarios<br>");
arch.WriteLine("<hr>");
Cuando finalizamos de trabajar con el archivo procedemos a cerrarlo:
arch.Close();
Lectura del archivo de texto.
Creamos una pgina donde mostraremos todos los datos almacenados en el archivo de texto
visitas.txt.
El archivo de texto almacena los datos de los visitantes y las elementos HTML bsicas para hacer
los saltos de lnea y lneas separadoras entre comentarios, solo nos queda leer el archivo e ir
almacenndolo en la Label para que lo muestre.
Podemos disponer un control de tipo HyperLink para retornar a la pgina principal.
El cdigo necesario para leer y cargar los datos en la Label1 es:
using
using
using
using
using
using
using
System;
System.IO;
System.Linq;
System.Web;
System.Web.UI;
public partial class listado : System.Web.UI.Page

{
{
StreamReader arch = new StreamReader(Server.MapPath(".") +
"/visitas.txt");
Label1.Text = arch.ReadToEnd();
arch.Close();
}
}
Importamos el espacio de nombres donde est declarada la clase StreamReader:

using System.IO;
El algoritmo de lectura lo implementamos en le mtodo Page_Load que se ejecuta primero al
cargarse la pgina.
Procedemos a realizar la apertura del archivo, indicando el camino donde se encuentra:
StreamReader
arch
=
new
StreamReader(Server.MapPath(".")
"/visitas.txt");
El mtodo ReadToEnd() de la clase StreamReader retorna el contenido de todo el archivo de texto:

Label1.Text = arch.ReadToEnd();
Finalmente procedemos a cerrar el archivo:
arch.Close();
Contador de pginas vistas.
Confeccionaremos ahora un simple contador de pginas utilizando un archivo de texto de una sola
lnea. Cada vez que un navegador solicite la pgina mostraremos el contador.
Crear un nuevo sitio web llamado ejercicio009 y crear un nico web form llamado Default.aspx.
Escribir el texto "Contador:" directamente en la pgina y a su lado disponer una Label:
En la Label mostraremos el valor del contador que se almacena en el archivo de texto.

En el evento Page_Load hacemos todo el algoritmo:
using
using
using
using
using
using
using
System;
System.IO;
System.Linq;
System.Web;
System.Web.UI;

{
{
if (File.Exists(Server.MapPath(".") + "/contador.txt"))
{
StreamReader arch1 = new StreamReader(Server.MapPath(".")
+ "/contador.txt");
string valor = arch1.ReadToEnd();
int contador = int.Parse(valor);
contador++;
arch1.Close();
StreamWriter arch2 = new StreamWriter(Server.MapPath(".")
+ "/contador.txt");
arch2.WriteLine(contador.ToString());
arch2.Close();
Label1.Text = contador.ToString();
}
else
{
StreamWriter arch = new StreamWriter(Server.MapPath(".") +
"/contador.txt");
arch.WriteLine("1");
arch.Close();
Label1.Text = "1";
}
}
}
Mediante un if verificamos si existe el archivo que almacena el contador (la clase File tiene un mtodo
esttico llamado Exists que retorna true si existe el archivo en la carpeta indicada):
if (File.Exists(Server.MapPath(".") + "/contador.txt"))
En caso que el archivo existe procedemos a abrirlo con el objetivo de leer su contenido:
StreamReader arch1 = new StreamReader(this.Server.MapPath(".")
+ "/contador.txt");
string valor = arch1.ReadToEnd();
int contador = int.Parse(valor);
contador++;
arch1.Close();
Luego procedemos a crearlo nuevamente y almacenar el valor que acabamos de leer, previo a
incrementarlo en uno (mostramos en la Label el valor del contador actual):
StreamWriter arch2 = new StreamWriter(Server.MapPath(".") +
"/contador.txt");
arch2.WriteLine(contador.ToString());
arch2.Close();
Label1.Text = contador.ToString();
Si el archivo no existe procedemos a crearlo almacenando el valor 1:
StreamWriter arch = new StreamWriter(Server.MapPath(".")
"/contador.txt");
arch.WriteLine("1");
arch.Close();
this.Label1.Text = "1";
Agenda de actividades.
Implementaremos un tercer problema utilizando como estructura de datos un archivo de texto.
Crearemos un sitio web llamado ejercicio010 (sitio web ASP.Net vaco) y agregaremos un Web Form
(Default.aspx) donde implementaremos una agenda.
Crear una interfaz visual similar a esta para administrar la agenda de actividades:
Disponemos del "Cuadro de herramientas" un objeto de la clase "Calendar", uno de tipo TextBox e
iniciamos su propiedad TextMode con el valor MultiLine y finalmente un Button.
Si queremos modificar la piel del objeto "Calendar" presionamos el botn derecho del mouse sobre
el objeto y elegimos la opcin "Formato Automtico..."
Debemos seleccionar el objeto Calendar y definir el evento "Selection_Changed" que se dispara
cuando el operador selecciona una fecha:
El cdigo fuente para el evento "Selection_Changed", "Page_Load" y "Button1_Click" es:
using
using
using
using
using
using
using
System;
System.IO;
System.Linq;
System.Web;
System.Web.UI;

{
{
string fecha = Calendar1.TodaysDate.Day.ToString() +
Calendar1.TodaysDate.Month.ToString() +
Calendar1.TodaysDate.Year.ToString();
if (File.Exists(Server.MapPath(".") + "/" + fecha))
{
"/" + fecha);
TextBox1.Text = arch.ReadToEnd();
arch.Close();
}
}
{
string fecha = Calendar1.SelectedDate.Day.ToString() +
Calendar1.SelectedDate.Month.ToString() +
Calendar1.SelectedDate.Year.ToString();
StreamWriter arch = new StreamWriter(Server.MapPath(".") + "/"
+ fecha, true);
arch.Close();
}
protected void Calendar1_SelectionChanged(object sender, EventArgs
e)
{
{
"/" + fecha);
arch.Close();
}
else
TextBox1.Text = "";
}
}
Si lo ejecutamos podemos cargar actividades para el da seleccionado:
Cuando se presiona el botn "Guardar" se ejecuta:

{
StreamWriter arch = new StreamWriter(Server.MapPath(".") + "/" +
fecha, true);
arch.Close();
}
Primero generamos una fecha con la fecha seleccionada en el objeto "Calendar". Creamos un
archivo con nombre igual a la fecha seleccionada y finalmente grabamos todo el contenido del objeto
TextBox.
Para el evento "SelectionChanged" del control "Calendar" recuperamos la fecha seleccionada y
verificamos si existe un archivo con dicha fecha, en caso afirmativo procedemos a leer el archivo y
mostrarlo en el TextBox:
protected void Calendar1_SelectionChanged(object sender, EventArgs e)
{
{
StreamReader arch = new StreamReader(Server.MapPath(".") + "/"
+ fecha);
arch.Close();
}
else
TextBox1.Text = "";
}
Finalmente en el evento "Page_Load" recuperamos la fecha actual y si hay un archivo con dicho
nombre lo mostramos:
{
string fecha = Calendar1.TodaysDate.Day.ToString() +
Calendar1.TodaysDate.Month.ToString() +
Calendar1.TodaysDate.Year.ToString();
{
StreamReader arch = new StreamReader(Server.MapPath(".") + "/"
+ fecha);
arch.Close();
}
}
Si presionamos el botn derecho dentro del "Explorador de soluciones" donde dice "ejercicio010"
podemos seleccionar la opcin "Actualizar carpeta" y comprobar que se han creado un archivo por
cada fecha donde guardamos actividades:
Ejercicio propuesto
1 ? Confeccionar un sitio que permita ingresar los datos del curriculum de una persona y
almacenarlos en un archivo de texto.
3. Clases SQLConnection y SQLCommand (ABM - Altas, Bajas y Modificaciones)

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
varchar(30)
mail
varchar(70)
Clave primaria
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"?>
<!-Para obtener ms informacin sobre cmo configurar la aplicacin de
ASP.NET, visite
http://go.microsoft.com/fwlink/?LinkId=169433
-->
<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
using
using
using
using
using
using
System;
System.Data.SqlClient;
System.Linq;
System.Web;
System.Web.UI;
public partial class alta : System.Web.UI.Page

{
{
}
{
string s =
System.Configuration.ConfigurationManager.ConnectionStrings["cadenacon
exion1"].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:
using System.Data.SqlClient;
Al presionar el botn, primero extraemos la cadena de conexin que tenemos almacenada en el
archivo Web.config:
string
s
=
System.Configuration.ConfigurationManager.ConnectionStrings["cadenaconexi
on1"].ConnectionString;
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
using
using
using
using
using
using
System;
System.Linq;
System.Web;
System.Web.UI;
public partial class consulta : System.Web.UI.Page

{
{
}
{
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:
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
using
using
using
using
using
using
System;
System.Linq;
System.Web;
System.Web.UI;
public partial class baja : System.Web.UI.Page

{
{
}
{
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
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
using
using
using
using
using
using
System;
System.Linq;
System.Web;
System.Web.UI;
public partial class modificacion : System.Web.UI.Page

{
{
}
{
string s =
conexion.Open();
SqlCommand comando = new SqlCommand("select nombre,clave,mail
from usuarios " +
" where nombre='" + this.TextBox1.Text + "'", conexion);
{
this.TextBox2.Text = registro["clave"].ToString();
this.TextBox3.Text = registro["mail"].ToString();
}
else
nombre";
conexion.Close();
}
{
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.
4. Clase SQLDataSource (ABM - Altas, Bajas y Modificaciones)
ABM (Altas, Bajas y Modificaciones)

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:
nombre varchar(30)
Clave primaria
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:
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
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.
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?.
Ahora codificamos el evento clic del botn de alta:
using
using
using
using
using
using
System;
System.Linq;
System.Web;
System.Web.UI;
public partial class alta : System.Web.UI.Page

{
{
}
{
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
Seleccionamos del Explorador de soluciones la pgina consulta.aspx y procedemos a 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
using
using
using
using
using
using
System;
System.Linq;
System.Web;
System.Web.UI;
public partial class consulta : System.Web.UI.Page

{
{
}
{
SqlDataSource1.SelectParameters["nombre"].DefaultValue =
TextBox1.Text;
SqlDataSource1.DataSourceMode = SqlDataSourceMode.DataReader;
SqlDataReader datos;
datos =
(SqlDataReader)SqlDataSource1.Select(DataSourceSelectArguments.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:
using System.Data.SqlClient;
Para poder recuperar los datos mediante un objeto de la clase SqlDataReader debemos configurar
el SqlDataSource indicando a la propiedad DataSourceMode el siguiente valor:
Ahora cuando llamemos al mtodo select del SqlDataSource lo hacemos con la siguiente sintaxis:
datos
=
mediante un if:
if (datos.Read())
Si el mtodo Read retorna true luego podemos acceder a la fila recuperada con el select.
Bajas
Seleccionamos del Explorador de soluciones la pgina baja.aspx y procedemos a elaborar la
siguiente interfaz visual:
Inicializamos la propiedad ConnectionString del SqlDataSource1 con la conexin que habamos

creado e inicializamos la propiedad DeleteQuery:
using
using
using
using
using
using
System;
System.Linq;
System.Web;
System.Web.UI;
public partial class baja : System.Web.UI.Page

{
{
}
{
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
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. 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:
select clave,mail from usuarios where nombre=@nombre
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
using
using
using
using
using
using
System;
System.Linq;
System.Web;
System.Web.UI;
public partial class modificacion : System.Web.UI.Page

{
{
}
{
SqlDataSource1.SelectParameters["nombre"].DefaultValue =
TextBox1.Text;
SqlDataReader datos;
datos =
if (datos.Read())
{
TextBox2.Text = datos["clave"].ToString();
TextBox3.Text = datos["mail"].ToString();
}
else
Label1.Text = "No existe un usuario con dicho nombre";
}
{
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;
cant = SqlDataSource1.Update();
5. Clase SQLDataSource (ABM con varias tablas)
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:
Crearemos un sitio web en el Visual Studio llamado ejercicio013.

Crearemos 5 Web Form y les daremos los nombres:
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 debemos
inicializar las propiedades Text (es el texto que mostrar el hipervnculo en el navegador y la
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
using
using
using
using
using
System;
System.Linq;
System.Web;
System.Web.UI;
public partial class altarubro : System.Web.UI.Page

{
{
}
{
SqlDataSource1.InsertParameters["descripcion"].DefaultValue =
TextBox1.Text;
SqlDataSource1.Insert();
Label1.Text = "Se efectu la carga";
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:
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 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

SqlDataSourceArticulos y configurar su ConnectionString:
Configuramos la propiedad InsertQuery para implementar el alta de articulo:
darle
como
nombre
Ahora ya hemos dado todos los pasos para configurar el alto de artculos, debemos implementar el
evento clic del botn de alta:
using
using
using
using
using
using
System;
System.Linq;
System.Web;
System.Web.UI;
public partial class altaarticulos : System.Web.UI.Page

{
{
}
{
SqlDataSourceArticulos.InsertParameters["descripcion"].DefaultValue =
TextBox1.Text;
SqlDataSourceArticulos.InsertParameters["precio"].DefaultValue
= TextBox2.Text;
SqlDataSourceArticulos.InsertParameters["codigorubro"].DefaultValue =
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):
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 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.
El cdigo del evento clic es:
using
using
using
using
using
using
using
System;
System.Linq;
System.Web;
System.Web.UI;
public partial class consultaarticulos : System.Web.UI.Page

{

{
}
{
SqlDataSource1.SelectParameters["codigo"].DefaultValue =
TextBox1.Text;
SqlDataReader registros;
registros =
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";
}
}
Para poder recuperar los datos mediante un objeto de la clase SqlDataReader debemos configurar
el SqlDataSource indicando a la propiedad DataSourceMode el siguiente valor:
Ahora cuando llamemos al mtodo select del SqlDataSource lo hacemos con la siguiente sintaxis:
registros
=
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:
Inicializamos la propiedad ConnectionString del SqlDataSource1 con la conexin que habamos

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

{

{
}
{
SqlDataSource1.DeleteParameters["codigo"].DefaultValue =
TextBox1.Text;
int cant;
cant = SqlDataSource1.Delete();
if (cant == 1)
Label1.Text = "Se borr el artculo";
else
Label1.Text = "No existe el codigo";
}
}
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 artculos.
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
using
using
using
using
using
using
System;
System.Linq;
System.Web;
System.Web.UI;
public partial class modificacionarticulos : System.Web.UI.Page

{
{
}
{
SqlDataSourceArticulos.SelectParameters["codigo"].DefaultValue
= TextBox1.Text;
SqlDataSourceArticulos.DataSourceMode =
SqlDataSourceMode.DataReader;
registros =
(SqlDataReader)SqlDataSourceArticulos.Select(DataSourceSelectArguments
.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";
}
{
SqlDataSourceArticulos.UpdateParameters["descripcion"].DefaultValue =
TextBox2.Text;
SqlDataSourceArticulos.UpdateParameters["precio"].DefaultValue
= TextBox3.Text;
SqlDataSourceArticulos.UpdateParameters["codigorubro"].DefaultValue =
SqlDataSourceArticulos.UpdateParameters["codigo"].DefaultValue
= TextBox1.Text;
int cant;
cant = SqlDataSourceArticulos.Update();
if (cant == 1)
Label2.Text = "Se modifico el artculo";
else
Label2.Text = "No existe el codigo";
}
}
6. Control GridView
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
codigo int Clave primaria e identidad.
precio float
codigorubro int
Tabla: rubros
codigo int Clave primaria e identidad
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,
ru.descripcion as descrirubro
from articulos as ar
join rubros as ru on ru.codigo=ar.codigorubro
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
using
using
using
using
using
System;
System.Linq;
System.Web;
System.Web.UI;

{
{
}
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].Text;
}
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.
7. Controles de validacin
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"?>

<!-Para obtener ms informacin sobre cmo configurar la aplicacin de
ASP.NET, visite
http://go.microsoft.com/fwlink/?LinkId=169433
-->
<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
using
using
using
using
using
System;
System.Linq;
System.Web;
System.Web.UI;

{
{
}
{
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
using
using
using
using
using
System;
System.Linq;
System.Web;
System.Web.UI;
public partial class Default2 : System.Web.UI.Page

{
{
}
{
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
using
using
using
using
using
System;
System.Linq;
System.Web;
System.Web.UI;

{
{
}
{
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
using
using
using
using
using
System;
System.Linq;
System.Web;
System.Web.UI;

{
{
}
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:

{
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.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
{
{
}
{
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
using
using
using
using
using
System;
System.Linq;
System.Web;
System.Web.UI;

{
{
}
{
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:
8. Upload de archivos al servidor
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
using
using
using
using
using
System;
System.Linq;
System.Web;
System.Web.UI;

{
{
}
{
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
using
using
using
using
using
System;
System.Linq;
System.Web;
System.Web.UI;

{
{
}
{
FileUpload1.SaveAs(Server.MapPath(".") + "/imagenes/" +
}
}
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
using
using
using
using
using
System;
System.Linq;
System.Web;
System.Web.UI;

{
{
}
{
FileUpload1.SaveAs(Server.MapPath(".") + "/imagenes/" +
Label2.Text = FileUpload1.PostedFile.ContentLength.ToString();
Label3.Text = FileUpload1.FileName;
Label4.Text = FileUpload1.PostedFile.ContentType;
}
}
La
propiedad
PostedFile
del
ContentLength (el tamao del archivo en bytes)
ContentType (El tipo de archivo)
control
FileUpload
almacena
en:
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
using
using
using
using
using
using
System;
System.IO;
System.Linq;
System.Web;
System.Web.UI;

{
{
}
{
if (File.Exists(Server.MapPath(".") + "/" +
FileUpload1.FileName))
{
Label1.Text = "Existe un archivo con dicho nombre en el
servidor";
}
else
{
}
}
}
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
using
using
using
using
using
System;
System.Linq;
System.Web;
System.Web.UI;
public partial class abmmarcas : System.Web.UI.Page

{
{
}
{
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
using
using
using
using
using
System;
System.Linq;
System.Web;
System.Web.UI;
public partial class altaautos : System.Web.UI.Page

{
{
}
{
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 =
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
using
using
using
using
using
using
System;
System.Linq;
System.Web;
System.Web.UI;
public partial class consultaporpatente : System.Web.UI.Page

{
{
}
{
dsautos.SelectParameters["patente"].DefaultValue =
TextBox1.Text;
dsautos.DataSourceMode = SqlDataSourceMode.DataReader;
SqlDataReader registro =
(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
using
using
using
using
using
using
System;
System.Linq;
System.Web;
System.Web.UI;
public partial class fotospormarca : System.Web.UI.Page

{
{
}
{
dsautos.SelectParameters["codigomarca"].DefaultValue =
SqlDataReader registros =
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
using
using
using
using
using
using
using
System;
System.IO;
System.Linq;
System.Web;
System.Web.UI;
public partial class borrarauto : System.Web.UI.Page

{
{
}
{
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 =
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
using
using
using
using
using
using
System;
System.Linq;
System.Web;
System.Web.UI;
public partial class consultarango : System.Web.UI.Page

{
{
}
{
dsautos.SelectParameters["modelo1"].DefaultValue =
TextBox1.Text;
dsautos.SelectParameters["modelo2"].DefaultValue =
TextBox2.Text;
SqlDataReader registros =
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.
9. Cookies y Session.
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
using
using
using
using
using
System;
System.Linq;
System.Web;
System.Web.UI;

{
{
}
{
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
using
using
using
using
using
System;
System.Linq;
System.Web;
System.Web.UI;

{
{
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
using
using
using
using
using
System;
System.Linq;
System.Web;
System.Web.UI;

{
{
if (this.IsPostBack == false)
{
if (Request.Cookies["mail"] != null)
{
TextBox1.Text = Request.Cookies["mail"].Value;
}
}
}
{
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
using
using
using
using
using
System;
System.Linq;
System.Web;
System.Web.UI;

{
{
}
{
//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
using
using
using
using
using
System;
System.Linq;
System.Web;
System.Web.UI;

{
{
}
{
//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
using
using
using
using
using
System;
System.Linq;
System.Web;
System.Web.UI;
{
{
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)
10. Creacin de imgenes dinmicas en el servidor.

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
using
using
using
using
using
using
using
System;
System.Linq;
System.Web;
System.Web.UI;
System.Drawing;
System.Drawing.Imaging;
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();
}
}
Hacemos el import de los dos espacios de nombres:
using System.Drawing;
using System.Drawing.Imaging;
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:
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
using
using
using
using
using
System;
System.Linq;
System.Web;
System.Web.UI;
public partial class formulariocaptcha : System.Web.UI.Page

{

{
}
{
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
using
using
using
using
using
System;
System.Linq;
System.Web;
System.Web.UI;
public partial class formulariotarta : System.Web.UI.Page

{
{
}
{
this.Response.Redirect("graficotarta.aspx?v1=" +
this.TextBox1.Text +
"&v2=" + this.TextBox2.Text +
"&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
using
using
using
using
using
using
using
System;
System.Linq;
System.Web;
System.Web.UI;
System.Drawing;
public partial class graficotarta : System.Web.UI.Page

{
{

Graphics lienzo;
float valor1 = float.Parse(this.Request.QueryString["v1"]);
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);
530);
560);
}
}
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:
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);
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);
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
using
using
using
using
using
System;
System.Linq;
System.Web;
System.Web.UI;
public partial class formulariobarrahorizontal : System.Web.UI.Page

{
{
}
{
this.Response.Redirect("graficobarrahorizontal.aspx?v1=" +
this.TextBox1.Text +
"&v2=" + this.TextBox2.Text +
"&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
using
using
using
using
using
using
using
System;
System.Linq;
System.Web;
System.Web.UI;
System.Drawing;
public partial class graficobarrahorizontal : System.Web.UI.Page

{
{
Graphics lienzo;
float mayor = this.RetornarMayor(valor1, valor2, valor3);
float largo1 = valor1 / mayor * 400;
lienzo.FillRectangle(pincel1, 50, 50, 50 + largo1, 80);
//Cantidades
SolidBrush pincel4 = new SolidBrush(Color.Black);
lienzo.DrawString(valor1.ToString(), fuente1, pincel4, 60,
80);
160);
260);
}
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:

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:.
11. Master Page
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>
<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:
Ahora agregaremos los hipervnculos en la parte superior y el pi de pgina:

<!DOCTYPE html>
<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"

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:

</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
Default2.aspx
forma
creamos
las
otras
pginas
(Default2.aspx
Default3.aspx):

CodeFile="Default2.aspx.cs" Inherits="Default2" %>
</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" %>
</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:
12. AJAX con ASP.Net
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>

<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
Ahora en vista de Diseo agregamos un Button y una Label.:
por
El cdigo a implementar al presionar el botn es:
using
using
using
using
using
using
System;
System.Linq;
System.Web;
System.Web.UI;

{
{
}
youtube.com.

{
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;
{
{
}
{
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.

Pasos para Crear Un Sitio Web ASP-Fácil

Загружено:

Сведения о документе

Оригинальное название

Авторское право

Доступные форматы

Поделиться этим документом

Поделиться или встроить документ

Параметры публикации

Этот документ был вам полезен?

Это неприемлемый материал?

Авторское право:

Доступные форматы

Pasos para Crear Un Sitio Web ASP-Fácil

Загружено:

Авторское право:

Доступные форматы

1. Pasos para crear un sitio web ASP.

Net con el Visual Studio 2015 con C#

En la parte izquierda tenemos el ?Cuadro de herramientas?, en esta aparecen las componentes

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

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

Captura del evento click de un objeto de la clase Button.

Creamos tambin el Web Form Default.aspx:

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

Controles Label, Button y TextBox.

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

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

La codificacin del evento click del botn es:

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

El control ListBox permite crear una lista de valores.

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

int suma = x1 + x2;

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

En el navegador tenemos como resultado:

2. Creacin, lectura y escritura de archivos de texto.

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

El cdigo necesario para leer y cargar los datos en la Label1 es:

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

Importamos el espacio de nombres donde est declarada la clase StreamReader:

El mtodo ReadToEnd() de la clase StreamReader retorna el contenido de todo el archivo de texto:

En la Label mostraremos el valor del contador que se almacena en el archivo de texto.

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

El cdigo fuente para el evento "Selection_Changed", "Page_Load" y "Button1_Click" es:

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

Cuando se presiona el botn "Guardar" se ejecuta:

3. Clases SQLConnection y SQLCommand (ABM - Altas, Bajas y Modificaciones)

Creamos luego la tabla usuarios:

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

Luego el cdigo a ejecutar cuando se presiona el botn ?Borrar? de la pgina es:

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

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

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

4. Clase SQLDataSource (ABM - Altas, Bajas y Modificaciones)

ABM (Altas, Bajas y Modificaciones)

Seleccionamos la solapa ?Explorador de servidores? y presionamos botn derecho sobre

Debemos seleccionar el nombre del servidor y posteriormente el nombre de la base de datos.

Seleccionamos el control SqlDataSource1 del formulario y en la ventana de ?Propiedades?

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

Configuramos el SqlDataSource1, luego de seleccionarlo con el mouse modificamos la propiedad

El cdigo del evento clic es:

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

Inicializamos la propiedad ConnectionString del SqlDataSource1 con la conexin que habamos

Luego el cdigo a ejecutar cuando se presiona el botn ?Borrar? de la pgina es:

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

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

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

5. Clase SQLDataSource (ABM con varias tablas)

Ahora tenemos creadas las dos tablas con la siguiente estructuras:

Crearemos un sitio web en el Visual Studio llamado ejercicio013.

Para el evento clic del botn insertamos el siguiente cdigo:

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

Del cuadro de herramientas seleccionamos un control de la clase SqlDataSource (tener en cuenta

Ahora seleccionamos el DropDownList1 y en el men que aparece en el mismo objeto seleccionamos

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