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.Collections.Generic; 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.Collections.Generic; using System.Linq; using System.Text; using Control.DataSet1TableAdapters; 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.Collections.Generic; using System.Linq; using System.Text; using Control.DataSet1TableAdapters; 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.Collections.Generic; using System.Linq; using System.Text; using Control.DataSet1TableAdapters; 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); GVJuguetes.DataBind(); break; case 2: GVJuguetes.DataSource = Control.ADJuguetesMesa.BuscarMesaPorMarca(idMarca); GVJuguetes.DataBind(); break; case 3: GVJuguetes.DataSource = Control.ADJuguetesArmar.BuscarArmarPorMarca(idMarca); GVJuguetes.DataBind(); 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.

http://www.webservicex.net/length.asmx


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.Collections.Generic; using System.Linq; using System.Text; using Control.DataSet1TableAdapters; 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.Collections.Generic; 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

Technology

Transcript of Tutorial ASP .NET