GUÍA Nº 9 - Programación Aplicada

Ingeniería Electrónica Ing. Néstor Raúl Suarez P.

Página 1 de 28

GUIA N° 9 - DESARROLLO DE UNA APLICACIÓN WEB ASP.NET

OBJETIVO:
Conocer los principios y fundamentos para desarrollar una aplicación web tres capas usado ASP.NET

I. INTRODUCCIÓN

El modelo en capas o niveles, es una arquitectura de software muy utilizada en el desarrollo de

aplicaciones web, especialmente en el ámbito empresarial. La arquitectura más simple que se suele
utilizar en estos contextos es el denominado modelo de “Tres Capas/Niveles”. En el desarrollo de
aplicaciones empresariales y corporativas, el número de capas puede aumentar, sin embargo, la
configuración del proyecto para el desarrollo en visual studio, es prácticamente la misma sin importar
el número de capas.

El modelo de desarrollo web a tres capas o niveles en términos generales se describe cómo se puede
observar a continuación:

II. FUNDAMENTOS DE ASP.NET

La plataforma Microsoft.Net provee un variado conjunto de herramientas para el desarrollo de

aplicaciones Web en los lenguajes de programación soportados (C#, VB, etc). ASP.NET es un
modelo de desarrollo Web unificado que incluye los servicios necesarios para crear aplicaciones
Web empresariales con el código óptimo. ASP.NET forma parte de .NET Framework y al codificar
las aplicaciones ASP.NET están tienen acceso a las clases compatibles de dicho Framework. El
código de las aplicaciones puede escribirse en cualquier lenguaje compatible con el Common
Language Runtime (CLR)

Para el desarrollo de aplicaciones Web en .NET es necesario el uso de un servidor de aplicaciones

web, el cual puede ser propio de Visual Studio o el Servidor Web de Windows llamado Internet
Information Services (IIS). El servidor web de Visual Studio es algo así como un emulador local de
un servidor web para pruebas; mientras que el servidor para información de Internet de Windows
(IIS) corresponde a un servidor web propiamente dicho con el cual se puede subir y configurar un
 GUÍA Nº 9 - Programación Aplicada
Ingeniería Electrónica Ing. Néstor Raúl Suarez P.

Página 2 de 28

sitio web para uso real dentro de una red corporativa o internet. El desarrollador debe entonces desde
el inicio seleccionar bajo cual opción trabajará el desarrollo de la aplicación web.

A continuación se describen los pasos a seguir para la creación, compilación y publicación de una
aplicación Web desarrollada en Visual Studio .NET

III. INSTALACIÓN DEL SERVIDOR WEB IIS EN WINDOWS

Este es un proceso que se realiza obligatoriamente en el equipo desde el cual se le proporcionará

acceso a la red (internet o local) a la aplicación web desarrollada y de manera opcional en equipos
de destinados para desarrollo.

Windows XP: Desde el panel de control seleccione el icono “Agregar o quitar programas” y en la
ventana que aparecerá a continuación seleccione “Agregar o quitar componentes de Windows”

Windows Vista/7/8/10: Desde el panel de control seleccione el icono “Programas y características” y

en la ventana que aparecerá a continuación seleccione “Activar o Desactivar Características de
Windows”

Nota: El Servidor IIS No esta disponible en la mayoría versiones “Home” de Windows

En la nueva ventana que le aparece, desplácese hasta encontrar la opción “Servicios de Internet
Information Server (IIS)” o “Internet Information Services” y seleccione todas las casillas; luego elija
siguiente y siga las instrucciones del asistente. Dependiendo de la versión de Windows se le pedirá
insertar el disco de instalación correspondiente.

Una vez finalizada la instalación se creará en su equipo, en el directorio raíz (C:\) una carpeta con el
nombre “Inetpub”; dentro de ella encontrará otras carpetas. Las páginas y aplicaciones web
desarrolladas se colocarán en la carpeta “wwwroot”. Para probar que el servidor se ha instalado
correctamente, abra un explorador de Internet y en la barra de direcciones escriba http://localhost;
debe aparecer la página de inicio del servidor, la cual contiene algunas instrucciones. Para que todos
cambios surtan efecto es recomendable reiniciar el equipo.

IV. PROYECTO WEB TRES CAPAS EN VISUAL STUDIO .NET

1. En la opción Nuevo proyecto de Visual Studio seleccione la opción: Otros tipos de proyecto –
Solución En Blanco, establezca como nombre de solución “WebTresCapas”.

2. En el explorador de soluciones haga click derecho sobre el proyecto “WebTresCapas”, escoja la

opción agregar nuevo proyecto, web, y agregue una nueva aplicación web ASP.Net (C#) y
nómbrela como “PresentacionWeb”

3. En el explorador de soluciones haga click derecho sobre el proyecto “WebTresCapas”, escoja la

opción agregar nuevo proyecto, agregue una nueva Biblioteca de Clases (C#) y nómbrela como
“Logica”.

4. En el explorador de soluciones haga click derecho sobre el proyecto “WebTresCapas”, escoja la

opción agregar nuevo proyecto, agregue una nueva Biblioteca de Clases (C#) y nómbrela como
“Datos”.
 GUÍA Nº 9 - Programación Aplicada
Ingeniería Electrónica Ing. Néstor Raúl Suarez P.

Página 3 de 28

5. Al final una vez siga todos los pasos de esta guía el proyecto debe verse similar a como se
muestra a continuación:
 GUÍA Nº 9 - Programación Aplicada
Ingeniería Electrónica Ing. Néstor Raúl Suarez P.

Página 4 de 28

V. CAPA DE DATOS

Utilizando el motor de bases de datos MySQL, cree una base de datos y en ella cree una tabla con el
nombre “clientes” con las siguientes características:

Nombre campo Tipo de dato Tamaño del Campo

Primary Key Id_Cliente Autonumérico (Int) Entero
Identificacion Número (Numeric) Entero largo
Nombre Texto (Varchar) 150
Apellido Texto (Varchar) 150
Fijo Texto (Varchar) 50
Celular Texto (Varchar) 50

A continuación se muestran el script en lenguaje SQL que permiten crear una tabla con las
características antes mencionadas en el SGBD MySQL:

Script SQL – Motor: MySQL

CREATE TABLE Clientes (
Id_Cliente INT AUTO_INCREMENT,
identificacion BIGINT,
Nombre VARCHAR(150),
Apellido VARCHAR(150),
Fijo VARCHAR(50),
Celular VARCHAR(50),
PRIMARY KEY (Id_Cliente) );

Una vez implementada la base de datos diríjase a Visual Studio .Net y en el explorador de soluciones
del proyecto ubíquese en la sección “Datos” y siga los siguientes pasos:

1. Agregar al proyecto el componente MySql.Data.dll que permite efectuar las tareas de conexión,
ejecución de SQL y consultas sobre una base de datos MySQL Para agregar este componente copie
el archivo físicamente dentro de la carpeta bin de la sección “Datos” del proyecto, luego desde el
explorador de soluciones de .Net presione click derecho en el Proyecto “Datos” y seleccione la opción
agregar referencia, ubique la pestaña examinar, seleccione el archivo dll (MySql.Data.dll) y
finalmente presione el botón aceptar.

2. Agregue la clase “ConexionMySQL” y en cada bloque de código escriba las instrucciones según
se muestra a continuación

using System.Data;
using MySql.Data.MySqlClient;

namespace Datos
{
public class ConexionMySQL
{
private string sentenciaSQL;
 GUÍA Nº 9 - Programación Aplicada
Ingeniería Electrónica Ing. Néstor Raúl Suarez P.

Página 5 de 28

private string mensaje;

private string CadenaDeConexion = "Database= Directorio; Data Source =

localhost; User Id = UsuarioMySQl; Password= PasswordMySql";

public string Mensaje

{
get { return mensaje; }
set { mensaje = value; }
}

public void SetSentencia(string sentencia)

{ sentenciaSQL = sentencia; }

MySqlConnection conn;
MySqlTransaction miTran;

public ConexionMySQL()
{
conn = new MySqlConnection();
conn.ConnectionString = CadenaDeConexion;
}

public DataSet ConsultarSQL()

{
try
{
conn.Open();
MySqlDataAdapter objRes = new MySqlDataAdapter(sentenciaSQL, conn);
DataSet datos;
datos = new DataSet();
objRes.Fill(datos, "DatosConsultados");
mensaje = "La consulta de datos fue Exitosa";
return datos;
}
catch (Exception MiExc)
{
DataSet datos2 = new DataSet();
mensaje = "Se presento el Siguiente Error en la Consulta " +
MiExc.Message;
return datos2;

}
finally
{
conn.Close();
}
}

public bool EjecutarSQL()

{
try
{
 GUÍA Nº 9 - Programación Aplicada
Ingeniería Electrónica Ing. Néstor Raúl Suarez P.

Página 6 de 28

// Creación de un Objeto de tipo comando

MySqlCommand miComando = new MySqlCommand();
miComando.Connection = conn;
conn.Open();
// Objeto de tipo transacción
miTran = conn.BeginTransaction(IsolationLevel.ReadCommitted);
// Se pasa el nombre de la conexion al Objeto Comando
miComando.Connection = conn;
// SE pasa el nombre de la transaccion al objeto Comando
miComando.Transaction = miTran;
// Se pasa la sentencia SQL al Objeto Comando
miComando.CommandText = sentenciaSQL;
miComando.ExecuteNonQuery();
miTran.Commit(); // Se Confirma la Transacción
mensaje = "Proceso Ejecutado con Exito";
return true;
}
catch (Exception e)
{
miTran.Rollback();
mensaje = "Se presento el siguiente error " + e.Message;
return false;
}
finally
{
conn.Close();
}
}
}
}
VI. CAPA DE LÓGICA DE APLICACIÓN (LÓGICA DEL NEGOCIO)

1. IMPORTANTE: Desde el explorador de soluciones en la parte de la solución llamada “Logica” y

dentro del submenú llamado “References” escoja la opción agregar referencia. En la ventana Agregar
Referencia escoja la pestaña “Proyectos”, seleccione “Datos” en nombre de proyecto y finalmente
presione click en el botón aceptar.

2. Desde el explorador de soluciones en la parte de la solución llamada “Logica” agregue dos nuevas
Clases y llámelas “Operaciones” y “Cliente” respectivamente.

3. Ubique la clase “operaciones” y escriba dentro las instrucciones que se muestran a continuación

namespace Logica
{
public class Operaciones
{
private double numero1;
private double numero2;

public void SetNumero1(double _numero1)

{ numero1 = _numero1; }
 GUÍA Nº 9 - Programación Aplicada
Ingeniería Electrónica Ing. Néstor Raúl Suarez P.

Página 7 de 28

public double GetNumero1()

{ return numero1; }

public void SetNumero2(double _numero2)

{ numero2 = _numero2; }
public double GetNumero2()
{ return numero2; }

public double Sumar()

{ return numero1 + numero2; }

public double Sumar(double num1, double num2)

{ return (num1 + num2); }
}
}

4. Ubique la clase “Cliente” para escribir dentro las instrucciones según se muestran a continuación

sing System.Data;
using Datos;

namespace Logica
{
public class Cliente:ConexionMySQL
{
private long identificacion;
private string nombre;
private string apellido;
private string fijo;
private string celular;

public long Identificacion

{ get { return identificacion; } set { identificacion = value; } }

public string Nombre

{ get { return nombre; } set { nombre = value; } }

public string Apellido

{ get { return apellido; } set { apellido = value; } }

public string Fijo

{ get { return fijo; } set { fijo = value; } }

public string Celular

{ get { return celular; } set { celular = value; } }

public bool InsertarCliente()

{
string cadenaSQLInsertar =
"INSERT INTO Clientes (identificacion,Nombre,Apellido,Fijo,Celular)
VALUES ('" + this.identificacion + "','" + this.nombre + "','" +
this.apellido + "','" + this.fijo + "','" + this.celular + "')";
 GUÍA Nº 9 - Programación Aplicada
Ingeniería Electrónica Ing. Néstor Raúl Suarez P.

Página 8 de 28

SetSentencia(cadenaSQLInsertar);
return EjecutarSQL();
}

public DataSet ConsultarCliente(string Valor, string Columna)

{
string cadenaSQLConsultar = "SELECT * FROM Clientes ";

if (Columna == "Todas")
{
cadenaSQLConsultar = cadenaSQLConsultar + "";
}
else if (Columna == "Identificacion")
{
cadenaSQLConsultar = cadenaSQLConsultar + "WHERE identificacion
= " + Valor;
}
else if (Columna == "Nombre")
{
cadenaSQLConsultar = cadenaSQLConsultar + "WHERE Nombre like '"
+ Valor + "%'";
}
else if (Columna == "Apellido")
{
cadenaSQLConsultar = cadenaSQLConsultar + "WHERE Apellido like
'" + Valor + "%'";
}

SetSentencia(cadenaSQLConsultar);
return ConsultarSQL();
}

public bool ActualizarCliente()

{
string cadenaSQLActualizar =
"UPDATE Clientes SET Nombre = '" + this.nombre + "', Apellido = '" +
this.apellido + "',Fijo='" + this.fijo + "',Celular='" + this.celular +
"' WHERE (identificacion= " + this.identificacion + ")";

SetSentencia(cadenaSQLActualizar);
return EjecutarSQL();
}

public bool EliminarCliente(string identificacion)

{
string cadenaSQLEliminar =
"DELETE FROM Clientes WHERE identificacion = " + identificacion + "";

SetSentencia(cadenaSQLEliminar);
return EjecutarSQL();
} } }
 GUÍA Nº 9 - Programación Aplicada
Ingeniería Electrónica Ing. Néstor Raúl Suarez P.

Página 9 de 28

VII. CAPA DE PRESENTACIÓN WEB

IMPORTANTE: Desde el explorador de soluciones en la parte de la solución llamada “Presentacion”

y dentro del submenú llamado “References” escoja la opción agregar referencia. En la ventana
“Agregar Referencia escoja la pestaña “Proyectos”, seleccione “Logica” y “Datos” en nombre de
proyecto y finalmente presione click en el botón aceptar.

A continuación encontrará el paso a paso correspondiente a la capa de presentación del proyecto,

siga las instrucciones y verifique el funcionamiento de cada uno de los pasos propuestos.

Paso 1. En la sección de “PresentaciónWeb”, cree cuatro nuevas carpetas y llámelas Estilos,

Imágenes, scripts, WebForm y ModuloCliente respectivamente

Paso 2: Copie el código de los archivos de las hojas de estilo que se muestran a continuación y
guárdelos dentro de la carpeta “Estilos”

✓ Archivo “campoinvalido.css”:

input:invalid, textarea:invalid {
background:red;
}

✓ Archivo “estiloindex.css”:

body {margin:0; padding:0;text-align:center;background: #DBEBF6;}

#content {text-align:left;margin:auto;
width:100%; height:100%;position:absolute;}
#cabecera {width:100%;height:20%;background-color:#0FF;}
#menu {width:20%; height:65%; float:left;}
#principal {width:80%;height:65%;float:left;}
#pie {width:100%;height:15%;}

✓ Archivo “menu1.css”:

#button {
width: 11em;
border-right: 1px solid #000;
padding: 0 0 1em 0;
margin-bottom: 1em;
font-family: 'Trebuchet MS', 'Lucida Grande', Verdana, Arial,
sans-serif;
background-color: #90bade;
color: #333;
}

#button ul {
list-style: none;
margin: 0;
padding: 0;
 GUÍA Nº 9 - Programación Aplicada
Ingeniería Electrónica Ing. Néstor Raúl Suarez P.

Página 10 de 28

border: none;
}
#button li {
border-bottom: 1px solid #90bade;
margin: 0;
list-style: none;
list-style-image: none;
}

#button li a {
display: block;
padding: 5px 5px 5px 0.5em;
border-left: 10px solid #1958b7;
border-right: 10px solid #508fc4;
background-color: #2175bc;
color: #fff;
text-decoration: none;
width: 100%;
}

html>body #button li a {
width: auto;
}
#button li a:hover {
border-left: 10px solid #1c64d1;
border-right: 10px solid #5ba3e0;
background-color: #2586d7;
color: #fff;
}

Paso 3. Agregue a la raíz del proyecto un web form aspx con el nombre “bienvenida.aspx” ,copie el
código que se muestra a continuación y guárdelo

<html>
<head>
<title>Bienvenido</title>
<meta charset="utf8" />
</head>
<body>
<p> BIENVENIDO!</p>
<p> Seleccione una opción del Menú</p>
</body>
</html>

Paso 4. Agregue a la raíz del proyecto un web form aspx con el nombre “cabecera.aspx” , copie el
código que se muestra a continuación y guárdelo

<html>
<head>
<title>Encabezado del Sitio WEb</title>
<meta charset="utf8" />
 GUÍA Nº 9 - Programación Aplicada
Ingeniería Electrónica Ing. Néstor Raúl Suarez P.

Página 11 de 28

</head>
<body bgcolor="#3366ff">
<center>
<img src="Imagenes/Banner1.jpg" />
<h1> Bienvenido a Mi Sitio WEB!!!<h1>
</center>
</body>
</html

*Nota: Ubique una imagen de su preferencia en la carpeta Imagenes para que la utilice en la página
de encabezado del Sitio WEB

Paso 5. Agregue a la raíz del proyecto un web form aspx con el nombre “pie.aspx” , copie el código
que se muestra a continuación y guárdelo:

<html>
<head>
<title>Pie Del Sitio WEB</title>
<meta charset="utf8" />
</head>
<body background="Imagenes/Fondo2.jpg">
<center>
UNIVERSIDAD DISTRITAL FJDC<br />
PROGRAMACIÓN APLICADA<br />
BOGOTA D.C
</center>
</body>
</html>

*Nota: Ubique una imagen de su preferencia en la carpeta Imagenes para que la utilice en la
página de pie del Sitio WEB

Paso 6. agregue a la raíz del proyecto un web form aspx con el nombre “menu.aspx”, copie el código
que se muestra a continuación y guárdelo

<html>
<head>
<title>Menu Principal</title>
<link href="Estilos/menu1.css" rel="stylesheet" type="text/css" />
<meta charset="utf8" />
</head>
<body background="Imagenes/Fondo1.jpg">
<center>
<h3> Menu de Opciones</h3>
<div id="button">
<ul>
<li><a href="bienvenida.aspx" target="principal">Inicio</a></li>
<li><a href="WebForms/ejemplo1.aspx" target="principal">Ejemplo ASP.NET #1 </a></li>
 GUÍA Nº 9 - Programación Aplicada
Ingeniería Electrónica Ing. Néstor Raúl Suarez P.

Página 12 de 28

<li><a href="WebForms/ejemplo2.aspx" target="principal">Ejemplo ASP.NET #2 </a></li>

<li><a href="ModuloCliente/MenuCliente.aspx" target="menu">Ejemplo Clientes</a></li>

</ul>
</div>
</center>
</body>
</html>

*Nota: Ubique una imagen de su preferencia en la carpeta Imágenes para que la utilice de fondo
del menú

Paso 7: Copie cada una de las siguientes líneas en un editor y guárdelo con el nombre “index.aspx”
dentro la carpeta principal del proyecto.

<html>
<head>
<title>Mi Pagina Index</title>
<link href="Estilos/estiloindex.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="content">
<div id="cabecera">
<iframe width='100%' height='100%' name='cabecera' scrolling="No"
src='cabecera.aspx'></iframe></div>
<div id="menu" >
<iframe width='100%' height='100%' name='menu' scrolling="Yes"
src='menu.aspx'></iframe></div>
<div id="principal">
<iframe width='100%' height='100%' name='principal' scrolling="Yes"
src='bienvenida.aspx'></iframe></div>
<div id="pie">
<iframe width='100%' height='100%' name='pie' scrolling="No"
src='pie.aspx'></iframe>
</div>
</div>
</body>
</html>

Nota: Observe que en la propiedad “src” de cada iframe se debe colocar el nombre del archivo o
página que se quiere cargar en el iframe.

Paso 8. En la carpeta llamada Scripts agregue una nueva clase y coloque como nombre
“MessageBox.cs” y escriba el código que se muestra a continuación:

using System.Web;
using System.Text;

namespace PresentacionWeb.Scripts
 GUÍA Nº 9 - Programación Aplicada
Ingeniería Electrónica Ing. Néstor Raúl Suarez P.

Página 13 de 28

{
public class MessageBox
{
public static void alert(string msg)
{
string sMsg = msg.Replace("\n", "\\n"); sMsg = msg.Replace("\"", "'");

StringBuilder sb = new StringBuilder();

sb.Append(@"<script language='javascript'>"); sb.Append(@"alert( """ +

sMsg + @""" );"); sb.Append(@"</script>");

HttpContext.Current.Response.Write(sb.ToString());
}
}
}

Paso 9. Ejemplo Web ASP N° 1 (Validaciones Y Mensajes)

En la carpeta WebForms agregue un nuevo web form y coloque como nombre “ejemplo1.aspx” y
diséñelo tal y como se muestra a continuación:

Ubique cada bloque de código para escribir las instrucciones según se muestra a continuación:

using PresentacionWeb.Scripts;

namespace PresentacionWeb.WebForms
{
public partial class ejemplo1 : System.Web.UI.Page
{
protected void Button1_Click(object sender, EventArgs e)
{
bool Validacion = true;

int seleccion = RadioButtonList1.SelectedIndex;

 GUÍA Nº 9 - Programación Aplicada
Ingeniería Electrónica Ing. Néstor Raúl Suarez P.

Página 14 de 28

switch (seleccion)
{
case 0:

if (TextBox1.Text == "")
{
MessageBox.alert("El campo no puede estar vacio");
Validacion = false;
}
break;
case 1:
try
{
int.Parse(TextBox1.Text);
}
catch (Exception ex)
{
MessageBox.alert("El valor introducido no es númerico."
+ ex.Message);
Validacion = false;
}
break;
case 2:

if (TextBox1.Text.Length >= 10)

{
MessageBox.alert("Supero el numero maximo de caracteres");
Validacion = false;
}
break;
case 3:

try
{
int numero = int.Parse(TextBox1.Text); if (numero > 100)
{

MessageBox.alert("Advertencia: El numero ingresado es

mayor que 100");
Validacion = false;
}
}
catch (Exception ex)
{
MessageBox.alert("El valor introducido no es númerico. "
+ ex.Message);
Validacion = false;
}
break;
default:
MessageBox.alert("Seleccione una opción Valida");
break;
}
 GUÍA Nº 9 - Programación Aplicada
Ingeniería Electrónica Ing. Néstor Raúl Suarez P.

Página 15 de 28

if (Validacion ==true )
{
MessageBox.alert("Campo valido segun la selección");
}
}

protected void Button2_Click(object sender, EventArgs e)

{
Response.Redirect("../bienvenida.aspx");
}
}
}
Información Importante: “Redireccionamiento De URL’s”, ASP.net por medio del objeto
“Response” y el método “Redirect” permite realizar redireccionamiento hacia cualquier página HTML
o aspx que se requiera. La sintaxis para su utilización es:

Response.Redirect("pagina.aspx");

Paso 10. Ejemplo Web ASP N° 2 – Estados (Sesiones) y Redireccionamiento ASP.Net

Información Importante: Las sesiones en la Web permiten reconocer e identificar las peticiones de
cada uno de los usuarios que interactúan con un sitio web y así llevar a cabo acciones específicas,
como mostrar información adaptada a él o guardar información de sus gustos o páginas que más
visita. El uso de sesiones proporciona una forma fácil de guardar datos del usuario de forma temporal
para reutilizarlos en el momento que se necesiten. Las sesiones son muy utilizadas para saber si un
usuario a ingresado a través de login (usuario + contraseña) y en cualquier valor que requiera una
variable temporal relacionada a la visita del usuario. En ASP.net las variables de sesión se utilizan
de la siguiente forma:

1. Crear una variable de sesión:

Page.Session["Nombre_Variable"]

2. Leer una variable de sesión:

tipo_dato Valor_recuperado;
if (Page.Session["Nombre_Variable "] != null)
{
Valor_recuperado = (tipo_dato)Page.Session["Nombre_Variable "];
}
3. Cerrar (Borrar) Variables de Sesión

Session.Abandon();

En la carpeta WebForms agregue un nuevo web form y coloque como nombre “ejemplo2.aspx” y
diséñelo tal y como se muestra a continuación:
 GUÍA Nº 9 - Programación Aplicada
Ingeniería Electrónica Ing. Néstor Raúl Suarez P.

Página 16 de 28

Ubique cada bloque de código para escribir las instrucciones según se muestra a continuación:

using Logica;
using PresentacionWeb.Scripts;

namespace PresentacionWeb.WebForms
{
public partial class ejemplo2 : System.Web.UI.Page
{
Operaciones ObjOperaciones = new Operaciones();

protected void Page_Load(object sender, EventArgs e)

{
MessageBox.alert("Este es el LOAD de la pagina");
}

protected void Button1_Click(object sender, EventArgs e)

{
ObjOperaciones.SetNumero1(double.Parse(TextBox1.Text));
ObjOperaciones.SetNumero2(double.Parse(TextBox2.Text));

Page.Session["Numero1"] = double.Parse(TextBox1.Text);
Page.Session["Numero2"] = double.Parse(TextBox2.Text);

protected void Button2_Click(object sender, EventArgs e)

{
TextBox3.Text = ObjOperaciones.Sumar().ToString();

double estado1 = 0;
double estado2 = 0;

if (Page.Session["Numero1"] != null)
{
estado1 = (double)Page.Session["Numero1"];
}
 GUÍA Nº 9 - Programación Aplicada
Ingeniería Electrónica Ing. Néstor Raúl Suarez P.

Página 17 de 28

if (Page.Session["Numero2"] != null)
{
estado2 = (double)Page.Session["Numero2"];
}
TextBox4.Text = ObjOperaciones.Sumar(estado1, estado2).ToString();

protected void Button3_Click(object sender, EventArgs e)

{
Response.Redirect("../bienvenida.aspx");
}
}
}

Paso 11. Ejemplo Web ASP N°3 - Modulo Cliente Con Conexión A Base De Datos

En la carpeta llamada “ModuloCliente” agregue un nuevo WebForm, colóquele como nombre

“MenuCliente.aspx” y escriba el código que se muestra a continuación:

<html>
<head>
<title>Menu Principal</title>
<link href="../Estilos/menu1.css" rel="stylesheet" type="text/css" />
<meta charset="utf-8" />
</head>
<body background="../Imagenes/Fondo1.jpg">
<center>
<h3> Menu de Opciones</h3>
<div id="button">
<ul>

<li><a href="GuardarCliente.aspx" target="principal">Guardar Cliente </a></li>

<li><a href="ActualizarEliminarCliente.aspx" target="principal">Actualizar/Eliminar
Cliente</a></li>
<li><a href="ConsultarClientes.aspx" target="principal">Consultar Clientes/Ver
Todos</a></li>
<li><a href="../menu.aspx" target="menu">Salir</a></li>
</ul>
</div>
</center>
</body>
</html>

Paso 12. En la carpeta llamada “ModuloCliente” agregue un nuevo WebForm, colóquele como
nombre “GuardarCliente.aspx”, realice el diseño y escriba el código que se muestra a continuación:
 GUÍA Nº 9 - Programación Aplicada
Ingeniería Electrónica Ing. Néstor Raúl Suarez P.

Página 18 de 28

using PresentacionWeb.Scripts;
using Logica;

namespace PresentacionWeb.ModuloCliente
{
public partial class GuardarCliente : System.Web.UI.Page
{

protected void Button_Guardar_Click(object sender, EventArgs e)

{
Cliente ObjCliente = new Cliente();

try
{
ObjCliente.Identificacion = long.Parse(TextBox1.Text);
ObjCliente.Nombre = TextBox2.Text;
ObjCliente.Apellido = TextBox3.Text;
ObjCliente.Fijo = TextBox4.Text;
ObjCliente.Celular = TextBox5.Text;

bool respuestaSQL = ObjCliente.InsertarCliente();

if (respuestaSQL == true)
{

MessageBox.alert("Los datos del nuevo cliente fueron insertados

correctamente");
Label1.Text = "Los datos del nuevo cliente fueron insertados
correctamente";

TextBox1.Text = ""; TextBox2.Text = ""; TextBox3.Text = "";

TextBox4.Text = ""; TextBox5.Text = "";
}
else
{
MessageBox.alert(ObjCliente.Mensaje);
Label1.Text = ObjCliente.Mensaje;
 GUÍA Nº 9 - Programación Aplicada
Ingeniería Electrónica Ing. Néstor Raúl Suarez P.

Página 19 de 28

}
}
catch (Exception Ex)
{
MessageBox.alert("Error!: " + Ex.Message + " " + ObjCliente.Mensaje);
Label1.Text = "Error!: " + Ex.Message + " " + ObjCliente.Mensaje;
}
}
}
}

IMPORTANTE: Para validar campos en ASP.NET se pueden hacer uso de las propiedades que
ofrece html5, en este caso en la sección de código de etiquetas del WebForm agregue la referencia
a la hoja de estilos llamada “campoinvalido.css” y las propiedades a cada uno de los TextBox para
que el código quede tal y como se muestra a continuación:

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Guardar</title>
<link href="../Estilos/campoinvalido.css" rel="stylesheet" type="text/css" />
</head>
<body>
<form id="form1" runat="server">
<center>
<div> GUARDAR CLIENTE<br /> <br />
</div>
<table border="1" style="width:40%;">
<tr>
<td>Identificación:</td>
<td>
<asp:TextBox ID="TextBox1" runat="server" type="number"
required="requiered" placeholder="Identificación del cliente"
maxlength = "10" title="Ingrese solo hasta 10
números"></asp:TextBox>
</td>
</tr>
<tr>
<td>Nombre:</td>
<td>
<asp:TextBox ID="TextBox2" runat="server" required="required"
maxlength="50" placeholder="Nombre del cliente" pattern="[A-Za-z
]+" title="Ingrese solo letras"></asp:TextBox>
</td>
</tr>
<tr>
<td>Apellido:</td>
<td>
<asp:TextBox ID="TextBox3" runat="server" required="required"
maxlength="50" placeholder="Apellido del cliente" pattern="[A-
Za-z ]+" title="Ingrese solo letras"></asp:TextBox>
</td>
</tr>
<tr>
 GUÍA Nº 9 - Programación Aplicada
Ingeniería Electrónica Ing. Néstor Raúl Suarez P.

Página 20 de 28

<td>Fijo(Opcional):</td>
<td>
<asp:TextBox ID="TextBox4" runat="server" maxlength="12"
placeholder="Telefono Fijo del cliente" pattern="[0-9]+"
title="Ingrese solo numeros"></asp:TextBox>
</td>
</tr>
<tr>
<td>Celular(Opcional):</td>
<td>
<asp:TextBox ID="TextBox5" runat="server" maxlength="10"
placeholder="Telefono Movil del cliente" pattern="[0-9]+"
title="Ingrese solo numeros"></asp:TextBox>
</td>
</tr>
</table>
<br />
<asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
<br />
<br />
<asp:Button ID="Button_Guardar" runat="server" Text="Guardar"
OnClick="Button_Guardar_Click" />
</center>
</form>
</body>
</html>

Paso 13. En la carpeta llamada “ModuloCliente” agregue un nuevo WebForm, colóquele como
nombre “ActualizarEliminarCliente.aspx”, realice el diseño y escriba el código que se muestra a
continuación:
 GUÍA Nº 9 - Programación Aplicada
Ingeniería Electrónica Ing. Néstor Raúl Suarez P.

Página 21 de 28

using System.Data;
using PresentacionWeb.Scripts;
using Logica;

namespace PresentacionWeb.ModuloCliente
{
public partial class ActualizarEliminarCliente : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (Page.IsPostBack == false)
{
Panel1.Visible = false;
}
}

protected void Button_Consultar_Click(object sender, EventArgs e)

{
Cliente ObjCliente = new Cliente();

try
{
DataSet DatosCliente
ObjCliente.ConsultarCliente(TextBox1.Text,"Identificacion");

DataTable DatosConsultados =
DatosCliente.Tables["DatosConsultados"];

int numregistros = DatosConsultados.Rows.Count;

if (numregistros == 0)
{
MessageBox.alert("No existe en la Base de Datos Cliente con esta
identificación");

Label1.Text = "No existe en la Base de Datos Cliente con esta

identificación";

Panel1.Visible = false;
}
else
{
Panel1.Visible = true;

TextBox2.Text = DatosConsultados.Rows[0]["Nombre"].ToString();
TextBox3.Text = DatosConsultados.Rows[0]["Apellido"].ToString();
TextBox4.Text = DatosConsultados.Rows[0]["Fijo"].ToString();
TextBox5.Text = DatosConsultados.Rows[0]["Celular"].ToString();

Label1.Text = "Datos Consultados Con Exito";

}
}
 GUÍA Nº 9 - Programación Aplicada
Ingeniería Electrónica Ing. Néstor Raúl Suarez P.

Página 22 de 28

catch (Exception Ex)

{
MessageBox.alert("Error!: " + Ex.Message + " " + ObjCliente.Mensaje);
Label1.Text = "Error!: " + Ex.Message + " " + ObjCliente.Mensaje;
}

protected void Button_Actualizar_Click(object sender, EventArgs e)

{
Cliente ObjCliente = new Cliente();

try
{
ObjCliente.Identificacion = int.Parse(TextBox1.Text);
ObjCliente.Nombre = TextBox2.Text;
ObjCliente.Apellido = TextBox3.Text;
ObjCliente.Fijo = TextBox4.Text;
ObjCliente.Celular = TextBox5.Text;

bool respuestaSQL = ObjCliente.ActualizarCliente();

if (respuestaSQL == true)
{
MessageBox.alert("Los datos de este cliente fueron actualizados
correctamente");

Label1.Text = "Los datos de este cliente fueron actualizados

correctamente";

TextBox1.Text = ""; TextBox2.Text = ""; TextBox3.Text = "";

TextBox4.Text = ""; TextBox5.Text = "";
}
else
{
MessageBox.alert(ObjCliente.Mensaje);
Label1.Text = ObjCliente.Mensaje;
}
}
catch (Exception Ex)
{
MessageBox.alert("Error!: " + Ex.Message + " " + ObjCliente.Mensaje);
Label1.Text = "Error!: " + Ex.Message + " " + ObjCliente.Mensaje;
}

Panel1.Visible = false;
}
 GUÍA Nº 9 - Programación Aplicada
Ingeniería Electrónica Ing. Néstor Raúl Suarez P.

Página 23 de 28

protected void Button_Eliminar_Click(object sender, EventArgs e)

{

Cliente ObjCliente = new Cliente();

try
{
bool respuestaSQL = ObjCliente.EliminarCliente(TextBox1.Text);

if (respuestaSQL == true)
{
MessageBox.alert("Los datos de este cliente fueron Eliminados
correctamente");

Label1.Text = "Los datos de este cliente fueron Eliminados

correctamente";

TextBox1.Text = ""; TextBox2.Text = ""; TextBox3.Text = "";

TextBox4.Text = ""; TextBox5.Text = "";
}
else
{
MessageBox.alert(ObjCliente.Mensaje);
Label1.Text = ObjCliente.Mensaje;
}
}

catch (Exception Ex)

{
MessageBox.alert("Error!: " + Ex.Message + " " + ObjCliente.Mensaje);
Label1.Text = "Error!: " + Ex.Message + " " + ObjCliente.Mensaje;
}

Panel1.Visible = false;
}
}
}

IMPORTANTE: Para validar campos en ASP.NET se pueden hacer uso de las propiedades que
ofrece html5, en este caso en la sección de código de etiquetas del WebForm agregue la referencia
a la hoja de estilos llamada “campoinvalido.css” y las propiedades a cada uno de los TextBox para
que el código quede tal y como se muestra a continuación:

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Actualizar-Eliminar</title>
<link href="../Estilos/campoinvalido.css" rel="stylesheet" type="text/css" />
</head>
<body>
<form id="form1" runat="server">
<div>
<center>
<div> ACTUALIZAR/ELIMINAR CLIENTE<br /> <br />
 GUÍA Nº 9 - Programación Aplicada
Ingeniería Electrónica Ing. Néstor Raúl Suarez P.

Página 24 de 28

Identificación:&nbsp;

<asp:TextBox ID="TextBox1" runat="server" type="number"

required="requiered" placeholder="Identificación del cliente" maxlength
= "10" title="Ingrese solo hasta 10 números"></asp:TextBox>

&nbsp;&nbsp;

<asp:Button ID="Button_Consultar" runat="server"

OnClick="Button_Consultar_Click" Text="Consultar" />
<br /><br />

</div>
<asp:Panel ID="Panel1" runat="server" Visible="False">
<table Border="1" style=";width:40%;">
<tr>
<td>Nombre:</td>
<td>
<asp:TextBox ID="TextBox2" runat="server" required="required"
maxlength="50" pattern="[A-Za-z ]+" placeholder="Nombre del
cliente" title="Ingrese solo letras" value=" "></asp:TextBox>

</td>
</tr>
<tr>
<td>Apellido:</td>
<td>

<asp:TextBox ID="TextBox3" runat="server" required="required"

maxlength="50" pattern="[A-Za-z ]+" placeholder="Apellido del
cliente" title="Ingrese solo letras" value=" "></asp:TextBox>

</td>
</tr>
<tr>
<td>Fijo(Opcional):</td>
<td>
<asp:TextBox ID="TextBox4" runat="server" maxlength="12"
placeholder="Telefono Fijo del cliente" pattern="[0-9]+"
title="Ingrese solo numeros"></asp:TextBox>
</td>
</tr>
<tr>
<td>Celular(Opcional):</td>
<td>
<asp:TextBox ID="TextBox5" runat="server" maxlength="10"
placeholder="Telefono Movil del cliente" pattern="[0-9]+"
title="Ingrese solo numeros"></asp:TextBox>
</td>
</tr>
</table>

</asp:Panel>
 GUÍA Nº 9 - Programación Aplicada
Ingeniería Electrónica Ing. Néstor Raúl Suarez P.

Página 25 de 28

<br />
<asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
<br /> <br />
<asp:Button ID="Button_Actualizar" runat="server" Text="Actualizar"
OnClick="Button_Actualizar_Click" Width="100px" />

&nbsp;&nbsp;

<asp:Button ID="Button_Eliminar" runat="server" Text="Eliminar"

Width="100px" OnClick="Button_Eliminar_Click"/>
</center>
</div>
</form>
</body>
</html>

Paso 12. En la carpeta llamada “ModuloCliente” agregue un nuevo WebForm, colóquele como
nombre “ConsultarClientes.aspx”, realice el diseño y escriba el código que se muestra a
continuación:

Nota: Agregue al DropDownList las opciones “Seleccione”,“Identificación","Nombre"-

"Apellido" y "Ver Todos”

using System.Data;
using PresentacionWeb.Scripts;
using Logica;

namespace PresentacionWeb.ModuloCliente
{
public partial class ConsultarClientes : System.Web.UI.Page
{
protected void Button_Consultar_Click(object sender, EventArgs e)
{
try
{
bool OpcionValida = true;
Cliente ObjCliente = new Cliente();
 GUÍA Nº 9 - Programación Aplicada
Ingeniería Electrónica Ing. Néstor Raúl Suarez P.

Página 26 de 28

DataSet DatosCliente = new DataSet();

switch(DropDownList1.SelectedValue)
{
case "Identificación":
{
DatosCliente = ObjCliente.ConsultarCliente(TextBox1.Text,
"Identificacion");
break;
}
case "Nombre":
{
DatosCliente = ObjCliente.ConsultarCliente(TextBox1.Text,
"Nombre");
break;
}
case "Apellido":
{
DatosCliente = ObjCliente.ConsultarCliente(TextBox1.Text,
"Apellido");
break;
}
case "Ver Todos":
{
DatosCliente = ObjCliente.ConsultarCliente("", "Todas");
break;
}
default:
{
MessageBox.alert("Seleccione una opción valida");

OpcionValida = false;
break;
}
}

if (OpcionValida == true)
{
DataTable DatosConsultados =
DatosCliente.Tables["DatosConsultados"];

int numregistros = DatosConsultados.Rows.Count;

if (numregistros == 0)
{
MessageBox.alert("No existe en la Base de Datos Cliente
con el valor buscado");
}
else
{
GridView1.DataSource = DatosConsultados;
GridView1.DataBind();
}
 GUÍA Nº 9 - Programación Aplicada
Ingeniería Electrónica Ing. Néstor Raúl Suarez P.

Página 27 de 28

}
}

catch (Exception ex)

{
MessageBox.alert("No se ha podido efectuar la consulta debido al
siguiente Error: " + ex.Message);
}
} } }
VIII. OPCIONES/FUNCIONES COMPLEMENTARIAS EN ASP.NET

1. CARGAR LISTADOS DESDE BASE DE DATOS EN UN DROPDOWNLIST

En ocasiones es bastante útil cargar un listado de opciones directamente desde la base de datos,
por ejemplo un listado de tipos de documentos, un listado de universidades, Un listado de nombres,
un listado de lo que sea. En lugar de escribir de forma fija la lista en la Interfaz gráfica se puede
cargar el listado de forma dinámica desde la base de datos.

Una ventaja adicional que se pueden manejar dos columnas de forma simultánea, una será visible
el DropDownList y la otra no. Por ejemplo mostrarle al usuario el listado de nombre de universidades
y “por debajo” cuando el usuario seleccione cargar realmente para efectos del programa el “Nit” de
la universidad seleccionada. El código para cargar un listado desde la base de datos en un
DropDownList seria:

protected void Page_Load(object sender, EventArgs e)

{
Clase ObjConsulta = new Clase();
try
{
DataSet DatosConsultados = ObjConsulta.ConsultarTodos();
int numregistros =
DatosConsultados.Tables["TablaConsultada"].Rows.Count;
if (numregistros == 0)
{
MessageBox.alert("No hay datos");
}
else
{
DropDownList1.DataSource = DatosConsultados;
DropDownList1.DataTextField = "Campo1";
DropDownList1.DataValueField = "Campo2";
DropDownList1.DataBind();
}
}
catch (Exception Ex)
{
MessageBox.alert("Error!: " + Ex.Message + " " +
ObjConsulta.Mensaje);
}
}
 GUÍA Nº 9 - Programación Aplicada
Ingeniería Electrónica Ing. Néstor Raúl Suarez P.

Página 28 de 28

En la propiedad DataTextField del DropDownList1 se carga la columna visible al usuario y en

DataValueField la que no va visible, es decir la que va “Por debajo”

Para leer la selección del usuario se puede hacer con cualquiera de las columnas cargadas de la
siguiente forma:

a. Columna Visible: DropDownList1.SelectedItem.Text

b. Columna No Visible: DropDownList1.SelectedValue

2. AUTOPOSTBACK DE ASP.NET

La propiedad AutoPostBack permite ejecutar código de manera automática inmediatamente el

usuario finalice la ejecución del evento principal de un control. Es muy útil en controles tales como
DropDownList, RadioButtonList y CheckBoxList para desencadenar una serie de código con solo la
selección por parte del usuario.

Para activar esta opción se ubica en el control la propiedad AutoPostBack y se establece su valor en
“True”. Al darle Doble Click al control aparecerá el evento que será ejecutado de forma automática y
donde se ha de programar.

Dependiendo de lo que se necesite automatizar es posible que se requiera programar y agregar

código en el load de la página, teniendo en cuenta por ejemplo la propiedad “Page.IsPostBack”

TALLER:
Crear una aplicación Web ASP.NET que satisfaga los siguientes requerimientos:

1. Solicite un número y se calcule simultáneamente las operaciones “Factorial - Seno - Coseno –

Raíz Cuadrada” y genere la serie de Fibonacci.

2. Permita calcular el área y volumen de las figuras geométricas: Cono, Esfera, Cubo y Cilindro. La
página debe mostrar la imagen de la figura geométrica correspondiente

3. Debe tener la opción de almacenar en una base de datos los cálculos obtenidos en dos tablas,
una tabla para los cálculos matemáticos y otra para los cálculos geométricos. Cada vez que se
ingrese un nuevo registro se debe guardar la fecha y hora del cálculo.

4. Debe permitir ver todos los cálculos, consultar por medio de la llave primaria y eliminar registros
que ya están almacenados tanto en la tabla de cálculos matemáticos como en la de cálculos
geométricos.

5. Debe tener un link que lleve a las páginas en formato html correspondientes al Taller de las guías
7 y 8.

Importante:

✓ En los puntos del 1 al 4 se debe aplicar el Paradigma de la Programación Orientada a Objetos