Tutorial ASP .NET

TUTORIAL ASP .NET – JUAN CAMILO SACANAMBOY - UNIVERSIDAD ICESI

TUTORIAL ASP.NET: CONTROLES BÁSICOS

 Este tutorial tiene como objetivo principal el desarrollo de una
aplicación Web (Para una distribuidora de juguetes), siguiendo el
modelo MVC, bajo la plataforma .NET. Se hará uso de algunos
controles básicos de ASP .NET para la creación del sitio Web y se
realizará la respectiva integración con una base de datos local para
todo lo referente a la persistencia.

 Para el desarrollo del tutorial se trabajó sobre Visual Studio 2010.

 El tutorial contiene los siguientes temas:

o Creación de la base de datos a partir de un modelo relacional
(ADO .NET Entity Framework).

o Creación de los DataSet que permitirán realizar operaciones
sobre la base de datos.

o Creación del proyecto Web donde va a estar toda la interfaz
gráfica de la aplicación.

o Acceso a un servicio Web externo.


CREACIÓN DE LA SOLUCIÓN

Lo primero es crear un nuevo proyecto. En la nueva ventana, desplegar el menú de
“Visual C#” y crear una “Aplicación web ASP .NET” como se muestra en la siguiente
imagen:

Imagen 1. Creación de la solución.

En el explorador de soluciones se puede observar que se ha creado una solución y
un proyecto llamados “LaJugueteria”. En nuestro caso, el proyecto “LaJugueteria”
es el proyecto Web de nuestra aplicación, es decir la vista.


CREACIÓN DE LA BASE DE DATOS
Ahora procedemos a crear nuestra base de datos. En este punto hay más de una
opción: una es crear una base de datos en SQLServer. De esta manera se ahorra
este paso del tutorial. La otra manera, la cual se mostrará a continuación, es
crearla a partir de un modelo.

Damos clic derecho sobre la solución y le agregamos un nuevo proyecto.
Desplegamos nuevamente el menú de “Visual C#” y elegimos crear una “Aplicación
de Consola”.


En el explorador de soluciones vamos al proyecto “Modelo”, clic derecho y
agregamos un nuevo elemento. Elegimos un “ADO .NET Entity Data Model”.


Seleccionamos un modelo vacío y se nos crea una estructura en el proyecto
“Modelo”.

A continuación, creamos nuestro modelo. Para el tutorial se hizo el siguiente
modelo:


Luego de crear el modelo, presionamos clic derecho en cualquier parte de la zona
de trabajo y elegimos “Generar base de datos desde modelo…”.

Elegimos “Nueva conexión…”. En la nueva ventana en el campo “Origen de datos”
damos clic en “Cambiar” y seleccionamos “Microsoft SQL Server Compact 3.5” , le
damos un nombre a la base de datos y presionamos “Crear…”


A continuación se abre una nueva ventana para verificar la ubicación de la base de
datos y si así desea ponerle una contraseñar por seguridad. Para este tutorial no es
necesario, simplemente presionamos Aceptar. Comprobamos que la conexión se
haya realizado satisfactoriamente.

Se genera el script. Presionamos clic derecho y ejecutamos el SQL.

Se nos abre una nueva ventana donde procedemos a buscar la base de datos que
creamos anteriormente. Si no se ha cambiado la ruta, generalmente se encuentra
en la carpeta “Documentos” de Windows. Luego clic en “Conectar”.


Si todo va bien, se genera correctamente la base de datos. De lo contrario, repetir
los pasos desde ejecutar el SQL.

Como podemos observar, en el explorador de servidores se creó una nueva
conexión con el nombre de nuestra base de datos. Actualizamos presionando el
ícono que se encuentra en la parte superior y la desplegamos para ver su
contenido. Observamos que las tablas se han creado correctamente.


Con esto hemos terminado la creación de nuestra base de datos. Ahora vamos a
encargarnos de crear unos “controles” para poder acceder a ella desde nuestra
aplicación Web.

CREACIÓN DE LOS DATASET
De acuero al MSDN, un dataset es “…una caché de memoria interna de datos
recuperados de un origen de datos, representa un componente fundamental de la
arquitectura de ADO.NET.”

Los dataset integran unas funcionalidades y elementos que van a ser muy útiles
para la integración de la base de datos con el proyecto Web.

Para empezar, creamos un nuevo proyecto de tipo “Aplicación de consola”. Con
esto, ya tenemos 3 proyectos dentro de nuestra solución.

Ahora vamos a proceder a crear nuestro dataset. Presionamos clic derecho sobre el
proyecto control y agregamos un nuevo elemento. Esta vez al desplegar los
elementos de C#, seleccionamos el menú “Datos” y dentro de este seleccionamos
“Conjunto de datos” y lo agregamos al proyecto.


A continuación se nos crea una nueva estructura en el proyecto “Control”. A
continuación arrastramos las tablas de nuestra base de datos desde el “Explorador
de servidores” hasta la zona de trabajo del dataset. Si pregunta “¿Desea copiar el
archivo al proyecto y modificar la conexión?”, se selecciona NO. Aquí se nos va a
generar un modelo asociado al que diseñamos. A partir de este modelo es que el
dataset realiza la conexión con la base de datos. Volvemos a actualizar la base de
datos con el ícono en el “Explorador de servidores”.

Como podemos observar, se nos han creado unos adaptadores asociados a cada
una de nuestras tablas. Los métodos definidos por estos adaptadores son los que
nos van a permitir interactuar con la base de datos. Los adaptadores tienen unas


funciones básicas que vienen predeterminadas. Por lo tanto, dependiendo de la
complejidad de nuestras consultas, tendremos que hacer unas cuantas
modificaciones a éstas.

DESARROLLO DEL SITIO WEB
Dentro del proyecto “LaJugueteria”, tenemos que abrir el archivo “Global.asax” y
añadir la siguiente línea de código dentro del método “void ApplicationStart(object
sender, EventArgs e)”. Esto es debido a que ASP .NET no tiene una compatibilidad
predeterminada con una base de datos “Microsoft Compact Server 3.5”.

Ahora abrimos el archivo “Site.Master” y en la barra inferior del panel de trabajo
seleccionamos “Diseño”.

Básicamente, el “Site.Master” es una página madre que nos sirve de plantilla para
las que vamos a crear de aquí en adelante, debido a que las vamos a asociar hacia


esta. Como se puede observar en el proyecto Web, también se crearon dos archivos
llamados “Default.aspx” y “About.aspx”. Observando la imagen anterior, podemos
verificar que estas son el contenido que hay en cada una de las pestañas.

1. Registro de juguetes

Para crear nuestra primera página damos clic derecho sobre el proyecto Web y
agregamos un nuevo elemento. Esta vez agregamos un elemento “Formulario Web
Forms que usa página maestra” del menú “Web” y le ponemos como nombre
“Registro Juguetes”. A continuación, le asociamos como página maestra nuestra
“Site.Master” y se nos crea nuestra página web en blanco. Añadimos los controles
desde el “Cuadro de herramientas” para que la página quede como la imagen
siguiente. Nota: Se debe tener en cuenta el “ID” de los TextField y el DropdownList
para posteriormente ser llamados en los eventos.


Debido a que queremos enlazar las marcas disponibles al DropDownList desde un
archivo XML, agregamos un nuevo elemento al proyecto. Esta vez, vamos al menú
“Datos” y seleccionamos “Archivo XML”. Copiamos el siguiente contenido en el
archivo:
<?xml version="1.0" encoding="utf-8" ?>

<marcas>
<marca Id="1" Name="Matel"></marca>
<marca Id="2" Name="Fisher Price"> </marca>
<marca Id="3" Name="Coquito"></marca>
<marca Id="5" Name="Hasbro"></marca>
<marca Id="4" Name="Baby Toy"></marca>
</marcas>

Ahora, para asociar el archivo XML al elemento, presionamos sobre la flecha del
DropDownList y seleccionamos “Elegir origen de datos…”

En la nueva ventana seleccionamos “<Nuevo origen de datos…>”, esperamos a
que se abra la nueva ventana. En esta nueva ventana, seleccionamos “Archivo
XML” y aceptar. En la nueva ventana seleccionamos “Examinar…” en el campo
“Archivo de datos” y buscamos nuestro archivo XML dentro de nuestro proyecto.
Presionamos “Aceptar” y aparece la siguiente ventana.


En el campo para mostrar seleccionamos “Name” y en el campo de datos
seleccionamos “Id”. Luego presionamos aceptar. Con esto, el archivo XML quedó
asociado al elemento DropDownList.

Para que esta sea la nueva página principal primero debemos abrir el “Site.Master”
y dirigirnos hacia las pestañas. A continuación dar clic en la flecha superior derecha
y elegir “Editar elementos de menú…”.

En el editor de menú, damos clic sobre el botón superior del panel izquierdo
llamado “Agregar un elemento de raíz” y a este le editamos el campo “Text” y
buscamos su “NavigateUrl” dentro del proyecto (Es decir, la página a la cual el
menú se va a redireccionar).


Lo último que queda es dar clic derecho sobre la página en el explorador de
soluciones y seleccionar “Establecer como página principal”. En este punto ya
podríamos ejecutar la aplicación y ver nuestra página principal cargando el archivo
XML en su DropDownList.

Lo que nos queda por hacer para terminar el registro de juguetes es asociarlo con
la base de datos. Para ello, nos dirigimos al proyecto “Control” y agregamos un
nuevo elemento. Esta vez agregamos una “Clase” de C# y le llamamos
“ADJuguetes”. Este será el adaptador que nos permitirá acceder a las funciones de
la tabla “Juguetes” en nuestra base de datos. La clase queda de la siguiente
manera.
using System;
using System.Collections.Generic;


using System.Linq;
using System.Text;
//Se debe agregar esta referencia
using Control.DataSet1TableAdapters;

namespace Control
{
public class AD_Juguetes
{
//Adaptador para interactuar con la tabla Juguetes
private static JuguetesTableAdapter adapter = new JuguetesTableAdapter();

public static string RegistrarJuguete(string idJuguete, string nombreJuguete,
int edadMinima, int edadMaxima, int unidadesMaxDisponibles, string idMarca)
{
string mensaje;

try
{
//El parámetro "1" corresponde al nit de la distribuidora.
//Se pone "1" porque en este tutorial solamente existe una distribuidora.
//El método "Insert" ya está definido en el adapter

adapter.Insert(idJuguete,nombreJuguete,edadMinima,edadMaxima,unidadesMaxDisponibles,"1",idMarca);
mensaje = "El juguete se registró";
}
catch (SystemException ex)
{

mensaje = "El juguete no pudo ser registrado";
}
return mensaje;
}

}
}

Luego de crear el adapter de los juguetes con la función que nos interesa, debemos
relacionarlo con nuestro proyecto Web. Para ello, debemos agregar como
referencia al proyecto “LaJugueteria”, el proyecto “Control”. Presionamos clic
derecho sobre el proyecto “LaJugueteria” y seleccionamos “Agregar referencia”. En
la nueva ventana dentro de la pestaña “Proyectos”, seleccionamos nuestro
proyecto “Control”. Con esta referencia podremos tener acceso a nuestros
adaptadores.

Ahora bien, volvamos a nuestra página “Registro Juguetes.aspx” y asignémosle al
botón “Registrar” la responsabilidad de registrar un nuevo juguete de acuerdo al
evento del clic. Para ello, damos doble clic sobre el botón y Visual Studio nos envía
al método del evento. Se debe agregar un “using Control” en la parte superior de
ésta clase para poder acceder al adaptador que se creó anteriormente. A
continuación se procede a completar el evento de la siguiente manera.


protected void btnRegistrar_Click(object sender, EventArgs e)
{
String idJuguete = txtIdJuguete.Text;
String nombreJuguete = txtNombreJuguete.Text;
int edadMinima = Int32.Parse(txtEdadMinima.Text);
int edadMaxima = Int32.Parse(txtEdadMaxima.Text);
int unidadesMaxDisponibles = Int32.Parse(txtUnidadesMaximas.Text);
String marcaJuguete = listaMarcas.SelectedItem.Value;

string resultado = Control.AD_Juguetes.RegistrarJuguete(idJuguete, nombreJuguete,
edadMinima, edadMaxima, unidadesMaxDisponibles, marcaJuguete);
mensajeRegistro.Text = resultado;
}

Para hacer la primera prueba, debemos llenar las siguientes tablas de la base de
datos:

Distribuidoras: Crear una distribuidora con Nit = “1”.

Marcas: Llenar todas las marcas en el orden del archivo XML, teniendo en cuenta
que tengan los mismos Id.

Ahora si podemos correr la aplicación para probar el registro de un juguete. Si no
registra el juguete, verificar que la línea que se añadió en el “Global.asax” no se
haya borrado y de lo contrario, volverla a añadir. El resultado debería arrojar lo
siguiente:


Y en la tabla de la base de datos deberíamos poder verificar el registro.

¡Con esto hemos finalizado un registro en la base de datos!

2. Consulta de los juguetes por marca
Para empezar debemos dar click derecho sobre el proyecto Web y agregamos un
nuevo elemento “Formulario Web Forms que usa página maestra”, al igual que lo
hicimos para crear la página web del registro y lo volvemos a asociar a nuestro
“Site.Master”.


Luego se procede a realizar el diseño de la página. Este fue el diseño que se realizó.

Es importante resaltar que se agregó un elemento “GridView” en la sección “Datos”
del cuadro de herramientas de Visual Studio. En este grid view, se va a desplegar
toda la consulta que más tarde vamos a generar.

Una vez más, se enlaza el elemento “DropDownList” al archivo XML como se
mencionó anteriormente. Esta vez le delegaremos la responsabilidad al botón
“Buscar” de enviar el llamado a la consulta.

Vamos a dejar por un momento este proyecto web y nos vamos a encargar de
añadir lo necesario a nuestro “ADJuguetes”, es decir al adaptador de la tabla
“Juguetes” para que nos genere la consulta deseada. Para ello, vamos al proyecto
Web y abrimos nuestro DataSet. Luego, buscamos la tabla juguetes y observamos
que en la parte inferior se encuentra el adaptador (JuguetesTableAdapter) y los
métodos que implementa por ahora.


Debido a que no hay un método específico para lo que deseamos (que es filtrar los
juguetes de acuerdo a su marca), damos click derecho sobre
“JuguetesTableAdapter” y seleccionamos “Agregar Consulta”. En la siguiente
ventana, seleccionamos “Usar instrucciones SQL” y siguiente. Debido a que vamos
a traer toda una consulta, en la siguiente ventana seleccionamos “SELECT que
devuelve filas” y siguiente. En este punto nos aparece un campo para generar
nuestra consulta SQL. Podríamos usar el “Generador de consultas”, pero debido a
que esta es una consulta sencilla, no habrá necesidad de hacerlo. Modificamos la
consulta para que nos retorne la información deseada.

SELECT [Id], [Nombre], [EdadMinima], [EdadMaxima], [UnidadesDisponibles],
[DistibuidoraNit], [MarcaId] FROM [Juguetes] WHERE MarcaId = @MarcaId

De la anterior consulta, cabe resaltar que se pone “@MarcaId” para que el editor
sepa que es un parámetro que se va a recibir para realizar la comparación en el
WHERE.

En la siguiente ventana, solamente dejamos seleccionado el CheckBox que dice
“Devolver una tabla” y le damos un nombre a nuestro método. Luego finalizamos y
con esto le hemos dado una nueva funcionalidad al elemento que representa los
datos de la tabla Juguetes.


Como podemos observar, en nuestro DataSet ahora se ha añadido el método que
acabamos de crear.

Para darle ahora la funcionalidad a nuestro adaptador, debemos crear un nuevo
método en la clase “ADJuguetes” de la siguiente manera.
public static Control.DataSet1.JuguetesDataTable BuscarJuguetesPorMarca(string marcaId)
{
return adapter.BuscarJuguetesPorMarca(marcaId);

}

Simplemente se hace un llamado al método que habíamos creado anteriormente.
Ahora, vamos a enlazar nuestro método con el proyecto Web. Ahora vamos al
proyecto Web y abrimos nuestra página “Nuestros productos.aspx”. Damos doble
click sobre el botón “Buscar” y se nos abre el método encargado del evento del
click. El código quedaría de la siguiente manera.


using System;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using Control;

namespace LaJugueteria
{
public partial class Nuestros_productos : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{

}

protected void btnBuscar_Click(object sender, EventArgs e)
{
string idMarca = marcasConsulta.SelectedItem.Value;
GVJuguetes.DataSource = Control.AD_Juguetes.BuscarJuguetesPorMarca(idMarca);
GVJuguetes.DataBind();
}
}
}

Se agrega una referencia al proyecto “Control” y se emplea el método creado en el
adaptador. Luego se asocia con el GridView y se muestra gráficamente. Por último,
se debe asociar la página a una de las pestañas del “Site.Master” como se explicó
anteriormente. En este momento podemos ejecutar la aplicación.

Obtuvimos la consulta del registro que hicimos en la primera parte. ¡Ya tenemos las
consultas por marca!


3. Consulta por tipos de juguetes y acceso a un servicio web externo

Nuevamente agregamos una página web a nuestro proyecto y la asociamos a
nuestro “Site.Master”. El diseño queda de la siguiente manera.

El DropDownList donde se van a mostrar los tipos de juguetes lo deberíamos
cargar desde otro archivo XML, esto debido a que se presentaron dificultades
añadiéndolos desde la base de datos porque al parecer no se le asignaba un
“Value” diferente a cada uno y siempre al seleccionar cualquier elemento quedaba
elegido el primero. El archivo XML sería el siguiente y se debe enlazar al
DropDownList como se explicó previamente.
<?xml version="1.0" encoding="utf-8" ?>

<tipos>
<tipo Id="1" Name="Personaje"></tipo>
<tipo Id="2" Name="Mesa"> </tipo>
<tipo Id="3" Name="Armar"></tipo>
</tipos>


Con esto terminamos la parte visual y nos dirigimos al proyecto “Control” para
crear nuestra consulta. Abrimos nuevamente nuestro DataSet y agregamos una
nueva consulta en la tabla “Juguetes_Armar”. Elegimos “Usar instrucciones SQL”,
siguiente y luego “SELECT que devuelve filas” y siguiente. Escribimos la consulta
que queremos en el campo de texto. Para ello nos podemos ayudar del “Generador
de consultas” que nos permite probar si arroja los resultados que esperamos. La
consulta es la siguiente.

SELECT Juguetes_Armar.NumPiezas, Juguetes_Armar.Id, Juguetes_Armar.DistibuidoraNit,
Juguetes_Armar.MarcaId, Juguetes.Nombre
FROM Juguetes_Armar INNER JOIN
Juguetes ON Juguetes_Armar.Id = Juguetes.Id
WHERE (Juguetes_Armar.MarcaId = @MarcaId) AND (Juguetes.MarcaId = @MarcaId)

Se hace un INNER JOIN para poder obtener el nombre del juguete que solamente
está en la tabla Juguetes. Damos siguiente y posteriormente configuramos la
consulta así.

Luego siguiente y posteriormente finalizar. En la ventana emergente que aparece
damos click en aceptar. Con esto hemos añadido una funcionalidad al objeto que
representa la tabla “Juguetes_Armar”.

Nota: En las tablas “Juguetes_Mesa” y “Juguetes_Personaje” se hace lo mismo
siguiendo los mismos pasos. La diferencia está en las consultas de cada uno. Estas
se muestran a continuación.

Consulta “Juguetes_Mesa”
SELECT Juguetes_Mesa.NumJugadores, Juguetes_Mesa.Id, Juguetes_Mesa.DistibuidoraNit,
Juguetes_Mesa.MarcaId, Juguetes.Nombre
FROM Juguetes_Mesa INNER JOIN
Juguetes ON Juguetes_Mesa.Id = Juguetes.Id
WHERE (Juguetes_Mesa.MarcaId = @MarcaId) AND (Juguetes.MarcaId = @MarcaId)


Consulta “Juguetes_Personaje”
SELECT Juguetes_Personaje.Tamano, Juguetes_Personaje.Id, Juguetes_Personaje.DistibuidoraNit,
Juguetes_Personaje.MarcaId, Juguetes.Nombre
FROM Juguetes_Personaje INNER JOIN
Juguetes ON Juguetes_Personaje.Id = Juguetes.Id
WHERE (Juguetes_Personaje.MarcaId = @MarcaId) AND (Juguetes.MarcaId = @MarcaId)

En este punto ya le hemos añadido a los objetos que representan las anteriores
tablas, la funcionalidad de buscar sus elementos por marca. Ahora deberíamos
crear un adaptador por cada una de estas tablas como se describió antes para
poder acceder a estos servicios.

A continuación se muestra el código de cada una con sus respectivos métodos de
búsqueda por marca.

Clase ADJuguetesArmar
using System;
using System.Linq;
using System.Text;

namespace Control
{
public class ADJuguetesArmar
{

private static Juguetes_ArmarTableAdapter adapter = new Juguetes_ArmarTableAdapter();

public static Control.DataSet1.Juguetes_ArmarDataTable BuscarArmarPorMarca(String idMarca)
{
return adapter.BuscarArmarPorMarca(idMarca);

}
}
}


Clase ADJuguetesPersonaje

using System;
using System.Linq;
using System.Text;

namespace Control
{
public class ADJuguetesPersonaje
{
private static Juguetes_PersonajeTableAdapter adapter = new Juguetes_PersonajeTableAdapter();

public static Control.DataSet1.Juguetes_PersonajeDataTable BuscarPersonajePorMarca(String
idMarca)
{
return adapter.BuscarPersonajePorMarca(idMarca);

}
}
}

Clase ADJuguetesMesa

using System;
using System.Linq;
using System.Text;

namespace Control
{
public class ADJuguetesMesa
{

private static Juguetes_MesaTableAdapter adapter = new Juguetes_MesaTableAdapter();

public static Control.DataSet1.Juguetes_MesaDataTable BuscarMesaPorMarca(String idMarca)
{

return adapter.BuscarMesaPorMarca(idMarca);
}
}
}

Para poder probar nuestros servicios deberíamos añadir unos cuantos registros a
estas tablas.


Ahora podemos ir al proyecto Web para poder acceder a los servicios. Abrimos
nuestra página web “Tipos de Juguetes.apx” y damos doble click sobre el botón
“Buscar” y añadimos el siguiente código.

protected void btnBuscar_Click(object sender, EventArgs e)
{
string idMarca = marcasJuguetes.SelectedItem.Value;
int tipoJuguete = Int32.Parse(tiposJuguetes.SelectedItem.Value);

switch (tipoJuguete)
{
case 1:
GVJuguetes.DataSource =
Control.ADJuguetesPersonaje.BuscarPersonajePorMarca(idMarca);
break;

case 2:
GVJuguetes.DataSource = Control.ADJuguetesMesa.BuscarMesaPorMarca(idMarca);
break;

case 3:
GVJuguetes.DataSource = Control.ADJuguetesArmar.BuscarArmarPorMarca(idMarca);
break;
}
}

Con esto ya podemos ejecutar y realizar nuestras consultas.


¡Ya podemos consultar juguetes de acuerdo a su tipo y marca! En este momento
vamos a acceder a un servicio Web de conversión de unidades para poder obtener
el tamaño de un juguete tipo Personaje en centímetros (conversión pulgadas-
centímetros);


Hacemos click derecho sobre el proyecto Web y seleccionamos la opción “Agregar
referencia Web”. En el cuadro de diálogo copiamos el siguiente enlace
http://www.webservicex.net/length.asmx en el campo “Dirección URL” y hacemos click en
“Ir”. En este momento .NET intenta acceder al servicio. Le damos un nombre al
servicio y damos click en “Agregar referencia”.

La referencia al servicio Web queda agregada en el proyecto Web bajo la carpeta
“Web References”. Para hacer uso del servicio agregamos unos componentes al
diseño de nuestra página.


Damos doble click sobre el botón Convertir para acceder al servicio Web. El método
queda de la siguiente manera. Nota: El valor en pulgadas corresponde a la primera
columna (columna 0) de cualquier fila seleccionada de juguetes tipo Personaje. Sin
embargo, ponemos 1 por una columna que añadiremos posteriormente.

protected void btn_convertir_Click(object sender, EventArgs e)
{
int codigo_tipo = Int32.Parse(lista_tipos.SelectedItem.Value);

if (GVJuguetes.SelectedRow != null)
{
if (codigo_tipo == 1)
{
int pulgadas = Int32.Parse(GVJuguetes.SelectedRow.Cells[1].Text);
ServiceConvert.lengthUnit servicio = new ServiceConvert.lengthUnit();
double num = servicio.ChangeLengthUnit(pulgadas, ServiceConvert.Lengths.Inches,
ServiceConvert.Lengths.Centimeters);

txt_convertir.Text = num + "";
}
else
{
mensaje.Text = "Solo aplica a los personajes";
}

}
else
{
mensaje.Text = "Seleccione un juguete";
}

}

Ahora debemos activarle al GridView la opción de seleccionar las filas. Para ello,
vamos al GridView, seleccionamos la flecha en la parte superior derecha y elegimos
“Editar columnas…”


En la nueva ventana agregamos la opción “Seleccionar” dentro del campo
“CommandField” y presionamos aceptar.

Con esto, nuestro GridView debería lucir de la siguiente manera.

Como podemos observar, se agregó una nueva columna a la izquierda de nuestro
GridView y ahora la columna que representa a las pulgadas del personaje se corre
a la posición 1. Ahora podemos ejecutar la aplicación para verificar que el servicio
web funciona correctamente.


Hacemos la consulta de un juguete tipo personaje, seleccionamos el personaje con
el cual probaremos el servicio y cómo podemos observar, la conversión se realizó
correctamente. ¡Ya pudimos acceder a un servicio web externo!

4. Inventario de la juguetería

Para mostrar el inventario se crea una nueva página web “Inventario.aspx” y
solamente se añade un GridView que es donde se va a desplegar toda la
información de éste. Ahora vamos a nuestro DataSet y buscamos la tabla
“ItemsInventario”. Click derecho sobre la sección donde están los métodos y
“Agregar consulta…”. Seleccionamos “Usar instrucciones SQL” y siguiente. “SELECT
que devuelve filas” y siguiente. Se deja la consulta como se genera y siguiente.
SELECT [Id], [CantidadRetirada], [FechaRetiro], [DistibuidoraNit], [IdJuguete] FROM [ItemsInventario]

Se deja seleccionado solamente “Devolver un DataTable” y se escribe el nombre
del método. Siguiente y finalizar.

Ahora creamos una nueva clase “ADItemInventario” en nuestro proyecto Control y
escribimos el siguiente código.


using System;
using System.Linq;
using System.Text;

namespace Control
{
public class ADItemsInventario
{
private static ItemsInventarioTableAdapter adapter = new ItemsInventarioTableAdapter();

public static Control.DataSet1.ItemsInventarioDataTable ObtenerInventario()
{

return adapter.ObtenerInventario();
}

}
}

Podemos añadir un registro a la tabla ItemsInventario para posteriormente poder
probar esta función.

Ahora vamos al proyecto web “LaJugueteria” y expandimos el archivo
“Inventario.aspx” y hacemos doble click sobre el archivo Inventario.aspx.cs


El código debe quedar de la siguiente manera.
using System;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using Control;

namespace LaJugueteria
{
public partial class Inventario : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
GVInventario.DataSource = Control.ADItemsInventario.ObtenerInventario();
GVInventario.DataBind();

}
}
}

Ahora vamos a nuestro “Site.Master” y agregamos una nueva pestaña para poder
acceder a la página “Inventario”. Con esto ya podemos ejecutar la aplicación y ver
los registros en inventario.

¡Ya tenemos una página con su respectivo inventario!


5. Retiro de inventario

Para poder hacer retiros de inventario, vamos a la página “Tipos de Juguetes.aspx”
y añadamos algunos controles básicos.

Ahora vamos al proyecto control y dentro de la clase “ADItemsInventario” creamos
el método para poder registrar inventario.
public static string RegistrarInventario(int cantRetirada, DateTime fechaRetiro, string
nitDistribuidora, string idJuguete, string idMarca)
{
string mensaje;
try
{
adapter.Insert(cantRetirada, fechaRetiro, nitDistribuidora, idJuguete,
nitDistribuidora, idMarca);
mensaje = "Se registró en inventario";
}
catch (SystemException ex)
{
mensaje = "No se pudo registrar en inventario";
}
return mensaje;
}


Debemos añadir dos funcionalidades más al “ADJuguetes”. Vamos a nuestro
DataSet y ubicamos la tabla “Juguetes” y añadimos dos nuevas consultas.

a) BuscarUnidadesDisponibles
SELECT UnidadesDisponibles, Id, Nombre, EdadMinima, EdadMaxima, DistibuidoraNit, MarcaId

FROM Juguetes

WHERE (MarcaId = @MarcaId) AND (Id = @Id) AND (DistibuidoraNit = @DistribuidoraNit)

b) RetirarUnidadesJuguetes
UPDATE Juguetes

SET UnidadesDisponibles = @UnidadesDisponibles

WHERE (Id = @Id) AND (DistibuidoraNit = @DistribuidoraNit) AND (MarcaId = @MarcaId)

Se debe tener en cuenta que la consulta b) hace referencia a un tipo de consulta
“Update” y no una “SELECT que devuelve filas”.

Ahora añadimos dos métodos a la clase “ADJuguetes”.

Método BuscarUnidadesDisponibles:
public static int BuscarUnidadesDisponibles(string idJuguete, string idmarca, string
nitdistribuidora)
{

Control.DataSet1.JuguetesDataTable info = adapter.BuscarUnidadesDisponibles(idmarca,
idJuguete, nitdistribuidora);
int unidades = info.First().UnidadesDisponibles;
return unidades;
}

Método RetirarUnidadesJuguetes:
public static void RetirarUnidadesJuguetes(string idJugete, string idMarca, string
nitDistribuidora, int cantidadNueva)
{
adapter.RetirarUnidadesJuguetes(cantidadNueva, idJugete, nitDistribuidora, idMarca);
}

Ahora volvemos al proyecto web y abrimos la página “Tipos de Juguetes.aspx”.
Damos doble clic sobre el botón “Retrirar de inventario” y completamos el método.


protected void btnRetirar_Click(object sender, EventArgs e)
{

if (GVJuguetes.SelectedRow != null)
{

string idJuguete = GVJuguetes.SelectedRow.Cells[2].Text;
string nitdistribuidora = GVJuguetes.SelectedRow.Cells[3].Text;
string idmarca = GVJuguetes.SelectedRow.Cells[4].Text;
int unidadesDisponibles = Control.AD_Juguetes.BuscarUnidadesDisponibles(idJuguete,
idmarca, nitdistribuidora);

try
{
int cantidad = Int32.Parse(txtRetiros.Text);

if (cantidad <= unidadesDisponibles)
{
int nuevaCantidad = unidadesDisponibles - cantidad;
Control.AD_Juguetes.RetirarUnidadesJuguetes(idJuguete, idmarca,
nitdistribuidora, nuevaCantidad);

//Fecha actual del sistema
DateTime fechaActual = DateTime.Now;
Control.ADItemsInventario.RegistrarInventario(cantidad, fechaActual,
nitdistribuidora, idJuguete, idmarca);
mensaje.Text = "La cantidad fue retirada";

}
else
{
mensaje.Text = "No puede retirar esa cantidad";
}
}
catch (SystemException exc)
{
mensaje.Text = "Digite una cantidad numérica";
}

}
else
{

mensaje.Text = "Debe seleccionar un juguete";
}

}

Ahora podemos correr la aplicación y verificar que se puede hacer un retiro de
inventario.


Ahora revisamos el inventario,

Se puede observar que se hizo el registro en inventario y podemos verificar que la
cantidad de unidades disponibles de este juguete disminuyó.


Se puede observar que solamente se disminuyeron 30 unidades. Esto sucedió
porque el registro del retiro de las primeras 5 unidades se hizo directamente en la
base de datos y no se disminuyó la cantidad disponible en la tabla Juguetes.

¡Con esto terminamos la aplicación y por ende el tutorial!

OBSERVACIÓN
Para aquellas personas que son poco crédulas y no ven una clara distinción entre el
modelo, la vista y el control usando los datasets, les planteo una propuesta
diferente que no desarrollé por cuestión de tiempo. La idea consiste en dejar todo
lo referente a los dataset en un proyecto “Modelo” debido a que éstas pueden ser
vistas como entidades del modelo de la base de datos. Para la “Vista”, no hay duda
que el proyecto web no se reemplaza. Pero para el “Control” propongo el uso de
Workflows que permitan tener un mejor control de las actividades que realizan los
dataset.

Tutorial ASP .NET

Más contenido relacionado

La actualidad más candente

Similar a Tutorial ASP .NET

Más de Juan Camilo Sacanamboy

Tutorial ASP .NET