Temas de esta unidad : Creación de Controles Web ... 2.pdf · formulario Web Form con ASP.NET...

15
[ASP.NET EN VISUAL STUDIO] DESARROLLO DE APLICACIONES DE INTERNET Unidad 2 1 | Página Temas de esta unidad : Creación de Controles Web Personalizados Validación de entradas de usuarios Creación, lectura y escritura de archivos de texto Conceptos - Creacion de Controles Web Personalizados Muchas veces cuando creamos un sitio web que requiere de la inclusión de ciertos elementos reutilizables, recurrimos a tediosos pasos para hacer esto arrastrando y colocando elementos webs prediseñados que en la mayoría de las ocasiones no se adaptan a nuestras necesidades, es por eso que en Visual Studio .Net podemos crear elementos o controles web personalizados por nosotros mismos para hacer más cómodo y mucho más rápido el diseño de nuestro sitio web sin la necesidad de colocar reiteradamente controles web para programarlos a ejecutar una determinada acción dentro de nuestro sitio web. Para crear un Control Web personalizado procedemos a insertar un nuevo elemento en nuestro Explorador de Soluciones: 1. Desde el Explorador de Soluciones de nuestro sitio web en Visual studio 2010, hacemos click derecho y cuando aparezca la ventana de Dialogo de Añadir Nuevo Elemento, seleccionaremos la opción de Web User Control o Control Web de Usuario y hacemos click en Ok. Unidad 2

Transcript of Temas de esta unidad : Creación de Controles Web ... 2.pdf · formulario Web Form con ASP.NET...

[ASP.NET EN VISUAL STUDIO] DESARROLLO DE APLICACIONES DE INTERNET

Unidad 2 1 | P á g i n a

Temas de esta unidad :

Creación de Controles Web Personalizados

Validación de entradas de usuarios

Creación, lectura y escritura de archivos de texto

Conceptos - Creacion de Controles Web Personalizados Muchas veces cuando creamos un sitio web que requiere de la inclusión de ciertos elementos

reutilizables, recurrimos a tediosos pasos para hacer esto arrastrando y colocando elementos

webs prediseñados que en la mayoría de las ocasiones no se adaptan a nuestras necesidades,

es por eso que en Visual Studio .Net podemos crear elementos o controles web personalizados

por nosotros mismos para hacer más cómodo y mucho más rápido el diseño de nuestro sitio

web sin la necesidad de colocar reiteradamente controles web para programarlos a ejecutar

una determinada acción dentro de nuestro sitio web.

Para crear un Control Web personalizado procedemos a insertar un nuevo elemento en nuestro

Explorador de Soluciones:

1. Desde el Explorador de Soluciones de nuestro sitio web en Visual studio 2010, hacemos

click derecho y cuando aparezca la ventana de Dialogo de Añadir Nuevo Elemento,

seleccionaremos la opción de Web User Control o Control Web de Usuario y hacemos

click en Ok.

Unidad 2

[ASP.NET EN VISUAL STUDIO] DESARROLLO DE APLICACIONES DE INTERNET

Unidad 2 2 | P á g i n a

2. Inmediatamente aparecerá otra pestaña en la parte superior de nuestro Diseñador en

Visual Studio, con el nombre de WebUserControl.ascx.

3. Dentro del diseñador podemos ahora crear nuestro control web personalizado,

imaginemos que necesitamos insertar un control web para seleccionar la fecha desde un

control de Calendario y copiarla automáticamente en un TextBox cuya propiedad

deberá ser ReadOnly, luego de haberse accionado un Push Button.

4. Una vez insertados los controles mencionados solo nos queda programarlos.

[ASP.NET EN VISUAL STUDIO] DESARROLLO DE APLICACIONES DE INTERNET

Unidad 2 3 | P á g i n a

5. El código que necesitamos será colocado en el Evento SelectionChanged del Control de

Calendario, y colocaremos otro código para mostrar el Calendario que ocultaremos una

vez que se ha insertado la fecha seleccionada, mediante un Push Button.

6. Solo nos queda insertar en nuestro documento web, el nuevo Control Web que hemos

creado. Vemos en ejecución nuestro Control Web

Recuerde: Realizar los ejercicios propuestos al final de esta Unidad

[ASP.NET EN VISUAL STUDIO] DESARROLLO DE APLICACIONES DE INTERNET

Unidad 2 4 | P á g i n a

Conceptos - Validación de entradas de usuarios Controles (RequiredFieldValidator, ValidationSummary, CompareValidator, RegularExpressionValidator

RequiredFieldValidator

Al crear un control de entrada de datos, como un control TextBox, podemos tener ciertas

expectativas del tipo de entrada que el usuario introducirá en ese control. Una entrada de

datos incorrecta, como mínimo, retrasará al usuario, y puede incluso terminar nuestra

aplicación Web.

Para verificar que la entrada de datos cumple nuestras expectativas, debemos compararlo con

el valor, intervalo o formato que esperamos recibir del usuario.

Para crear esta comprobación, enlazamos al menos un control de validación de entrada de

datos con el control de entrada de datos y comparamos la entrada de datos de los usuarios con

nuestras expectativas.

En este módulo, estudiaremos los controles de validación de entrada de datos disponibles en

Microsoft ASP.NET. También estudiaremos cómo aplicar de forma eficaz estos controles a un

formulario Web Form con ASP.NET utilizando Microsoft Visual Studio .NET. En este módulo,

aprenderemos a:

Identificar cuándo es apropiada la validación de entrada de datos en los formularios

Web Forms.

Utilizar controles de validación de entrada de datos para verificar los datos introducidos

por el usuario en un formulario Web Form.

Verificar que todos los controles de validación de una página son válidos.

[ASP.NET EN VISUAL STUDIO] DESARROLLO DE APLICACIONES DE INTERNET

Unidad 2 5 | P á g i n a

1. Lo primero que haremos es crear un nuevo sitio web, en el cual mediante el Explorador

de Soluciones agregaremos un nuevo Web Form para crear nuestra validación con los

controles que hemos mencionados al principio de este módulo.

2. Luego insertaremos en nuestro Web Form 3 TextBox y al lado de estos, insertaremos 3

componentes de tipo RequiredFieldValidator, además de los TextBox también debemos

insertar 3 Labels y un Boton para mostrar las entradas.

3. Nuestro Web Form deberá quedar así como se muestra en la imagen

4. Cada componente RequiredFieldValidator debe modificársele su propiedad, en cuanto

a los respectivos Textos para los Mensajes de Error de validación en cada caso, recuerde

también cambiar en la Propiedad Behavior, la propiedad ControlToValidate en la cual se

deberá colocar el TextBox a validar. Ejemplo: ControlToValidate > TextBox1

5. Resulta obvio no colocar en este ejemplo, el código para el Botón que mostrará los

resultados de las entradas en cada Label. Se sobreentiende que ustedes ya saben cómo

hacerlo.

Recuerde: Realizar los ejercicios propuestos al final de esta Unidad

[ASP.NET EN VISUAL STUDIO] DESARROLLO DE APLICACIONES DE INTERNET

Unidad 2 6 | P á g i n a

ValidationSummary 1. De igual forma para este ejemplo, utilizaremos el mismo Web Form del ejemplo anterior

e insertaremos un Control ValidationSummary debajo de los TextBox de nuestro

formulario.

2. El resultado que obtendremos será el mismo que obtuvimos al ejecutar la aplicación

web anterior al utilizar el RequiredFieldValidator, se mostraran los errores encontrados

por la validación realizadas por la ejecución de la aplicación.

CompareValidator

1. Para utilizar este control de validación, haremos lo siguiente, tomaremos el mismo

Web Form del ejemplo anterior, en este caso vamos a utilizar el Control

CompareValidator para crear una validación entre un TextBox introducido de

manera incorrecta.

2. En este ejemplo, tomaremos para la comparación el TextBox de la fecha de

nacimiento introducida y le colocaremos al lado de la misma el control

CompareValidator.

[ASP.NET EN VISUAL STUDIO] DESARROLLO DE APLICACIONES DE INTERNET

Unidad 2 7 | P á g i n a

3. En la propiedad del CompareValidator insertado en el Web Form, en ErrorMessage,

escribiremos el mensaje que será arrojado al realizarse la comparación.

Ejemplo Fecha Incorrecta

4. Recordemos agregar en el ControlToCompare de la propiedad del control

CompareValidator, el TextBox cuyo valor estamos comparando. Así como también

la propiedad Operator que será de tipo DataTypeCheck , y en la propiedad Type la

del dato evaluado en el TextBox que en este caso será de tipo Date.

5. Ahora probaremos si la página es válida, para hacerlo agregaremos un control Label

en la parte inferior del formulario Web Form, establecer la propiedad ID del control

en el siguiente texto a substituir por el de lblMessage y borrar el valor

predeterminado de su propiedad Text.

6. Abrir el procedimiento de evento Click para el botón Guardar.

7. Modificar el código del procedimiento de evento para probar si los controles de la

página son válidos y, si lo son, escribir un mensaje en el control lblMessage

indicando que la página es válida. El código debería ser como el siguiente:

If Page.IsValid Then lblMessage.Text = "La página es válida" End If

8. Algo que debemos tener en cuenta es que al introducir la fecha en modo de

ejecución, debemos notar que la fecha deberá introducirse en el formato

MM/DD/YY para evitar que nos salga el error en fecha, de lo contrario inténtelo y

vera los resultados.

RegularExpressionValidator

1. Para utilizar este control de validación, haremos lo siguiente, tomaremos el mismo

Web Form del ejemplo anterior, en este caso vamos a utilizar el Control

RegularExpresionValidator para crear una validación entre un TextBox introducido

de manera incorrecta.

[ASP.NET EN VISUAL STUDIO] DESARROLLO DE APLICACIONES DE INTERNET

Unidad 2 8 | P á g i n a

2. En este ejemplo, tomaremos para la comparación el TextBox del campo Cobertura y

le colocaremos al lado el control RegularExpresionValidator.

3. En la propiedad del RegularExpresionValidator insertado en el Web Form, en

ErrorMessage, escribiremos el mensaje que será arrojado al realizarse la

comparación.

4. Recordemos agregar en el ControlToValidate de la propiedad del control

RegularExpresionValidator, el TextBox cuyo valor estamos comparando. Y en el

ValidationExpresion colocamos la siguiente expresión que evaluara el TextBox de la

Cobertura.

\ d + ( \ . \ d { 2 } ) ?

Lectura alterna > Para entender mas de los Componentes de Validacion en este Link

http://misite.obolog.com/controles-validacion-asp-net-102484

Recuerde: Realizar los ejercicios propuestos al final de esta Unidad

[ASP.NET EN VISUAL STUDIO] DESARROLLO DE APLICACIONES DE INTERNET

Unidad 2 9 | P á g i n a

Conceptos [Creación, lectura y escritura de archivos de texto] En muchas situaciones es necesario almacenar información en el servidor, tenemos dos

alternativas, si la cantidad de datos a almacenar es pequeña podemos utilizar un archivo de

texto para ello ya que un archivo de texto no requiere grandes recursos del servidor.

Creación y carga del archivo de texto Crearemos un libro de visitas de un sitio web. En la página principal colocaremos dos hipervínculos (HyperLink), el primero irá al formulario de carga y el segundo al listado del contenido del archivo. La página Default.aspx:

El primer control HyperLink nos lleva

al formulario web que permite cargar

el nombre del visitante, su país y los

comentarios.

El formulario web requiere tres

objetos de la clase TextBox, al tercero

donde se ingresan los comentarios

debemos inicializar la propiedad

TextMode con el valor MultiLine.

Disponemos un control de tipo

HyperLink para poder retornar a la

página principal.

[ASP.NET EN VISUAL STUDIO] DESARROLLO DE APLICACIONES DE INTERNET

Unidad 2 10 | P á g i n a

Para configurar los Hyperlinks

1. seleccione Cargar comentarios en el libro de visitas , luego en la propiedades de este

objeto vaya a la propiedad NavigateUrl haga click en esta y al aparecer la ventana

seleccione la página a la cual deberá redirigirse al ejecutarse el hyperlink y luego

presiones OK

2. En la opción Retornar del Formulario creado deberá modificar la propiedad del

Hyperlink para redirigirse a la página mostrada en el ejemplo.

3. Cuando se presiona el botón Confirmar se procede a almacenar los datos del formulario

en el archivo de texto, si existe el archivo los datos serán agregados al final, en caso que

no exista se crea el archivo.

4. Mostramos finalmente en un Label que se almacenaron los datos.

El código completo para registrar los datos en el archivo es el siguiente:

[ASP.NET EN VISUAL STUDIO] DESARROLLO DE APLICACIONES DE INTERNET

Unidad 2 11 | P á g i n a

5. Primero importamos el espacio de nombres donde está declarada la clase

StreamWriter:

Imports System.IO

6. Cuando se presiona el botón confirmar creamos un objeto de la clase StreamWriter y le

pasamos en el constructor el path y nombre del archivo a abrir o crear según sea el

caso. Para obtener el directorio actual utilizamos el método MapPath del objeto Server:

Dim arch As New StreamWriter(Me.Server.MapPath(".") & "/" & "visitas.txt", True)

7. El valor true que le pasamos en el constructor significa que si el archivo no existe en el

servidor en la carpeta especificada se procede a su creación y en el caso que si existe se

procede a su apertura y posicionado del puntero de archivo al final del mismo.

8. El método WriteLine de la clase StreamWriter permite almacenar una línea en el

archivo de texto y el posterior ingreso en forma automática del salto de línea:

arch.WriteLine("Nombre:" & Me.TextBox1.Text) arch.WriteLine("<br />") arch.WriteLine("Pais:" & Me.TextBox2.Text) arch.WriteLine("<br />") arch.WriteLine("Comentarios<br />") arch.WriteLine(Me.TextBox3.Text) arch.WriteLine("<br />") arch.WriteLine("<hr />")

9. Cuando finalizamos de trabajar con el archivo procedemos a cerrarlo:

arch.Close()

[ASP.NET EN VISUAL STUDIO] DESARROLLO DE APLICACIONES DE INTERNET

Unidad 2 12 | P á g i n a

Lectura del archivo de texto. Creamos una página donde mostraremos todos los datos almacenados en el archivo de texto

visitas.txt.

El archivo de texto almacena los datos de los visitantes y las marcas HTML básicas para hacer

los saltos de línea y líneas separadoras entre comentarios, solo nos queda leer el archivo e ir

almacenándolo en el Label para que lo muestre.

Podemos insertar un control de tipo HyperLink para retornar a la página principal.

El código necesario para leer y cargar los datos en el Label1 es:

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

Imports System.IO

2. Procedemos a realizar la apertura del archivo, indicando el camino donde se encuentra:

Dim arch As New StreamReader(Me.Server.MapPath(".") & "/" & "visitas.txt")

3. Antes de la estructura repetitiva procedemos a leer la primer línea del archivo:

Dim linea As String linea = arch.ReadLine

4. El método ReadLine de la clase StreamReader retorna el contenido de toda una línea

del archivo de texto. En caso que no haya más líneas en el archivo de texto el método

ReadLine retorna el valor Nothing.

[ASP.NET EN VISUAL STUDIO] DESARROLLO DE APLICACIONES DE INTERNET

Unidad 2 13 | P á g i n a

5. El Bucle Do while nos permite recorrer todo el archivo y cargar cada línea leída en el Label1:

Do While Not linea Is Nothing Me.Label1.Text = Me.Label1.Text & linea linea = arch.ReadLine Loop

6. Finalmente procedemos a cerrar el archivo:

arch.Close()

Contador de páginas vistas. Crearemos ahora un simple contador de páginas utilizando un archivo de texto de una sola

línea. Cada vez que un navegador solicite la página mostraremos el contador.

1. Insertaremos debajo del Label de Listado del Libro que ya habíamos creado

anteriormente, una Label para mostrar el valor del contador que se almacena en el

archivo de texto. En el evento Page_Load hacemos todo el algoritmo:

[ASP.NET EN VISUAL STUDIO] DESARROLLO DE APLICACIONES DE INTERNET

Unidad 2 14 | P á g i n a

2. Mediante un if verificamos si existe el archivo que almacena el contador (la clase File

tiene un método estático llamado Exists que retorna true si existe el archivo en la

carpeta indicada):

If File.Exists(Me.Server.MapPath(".") & "/" & "contador.txt") Then

3. En caso que el archivo existe procedemos a abrirlo con el objetivo de leer su única línea:

Dim arch1 As New StreamReader(Me.Server.MapPath(".") & "/" & "contador.txt") Dim conta As Integer conta = arch1.ReadLine conta = conta + 1 arch1.Close()

4. Luego procedemos a crearlo nuevamente y almacenar el valor que acabamos de leer,

previo a incrementarlo en uno (mostramos en el Label el valor del contador actual):

Dim arch2 As New StreamWriter(Me.Server.MapPath(".") & "/" & "contador.txt") arch2.WriteLine(conta) arch2.Close() Me.Label1.Text = conta

5. Si el archivo no existe procedemos a crearlo almacenando el valor 1:

Dim arch As New StreamWriter(Me.Server.MapPath(".") & "/" & "contador.txt") arch.WriteLine("1") arch.Close() Me.Label1.Text = "1"

6. El resultado obtenido será el siguiente:

Recuerde: Realizar los ejercicios propuestos al final de esta Unidad

[ASP.NET EN VISUAL STUDIO] DESARROLLO DE APLICACIONES DE INTERNET

Unidad 2 15 | P á g i n a

Ejercicios propuestos 1 – Crear 3 Controles Web Personalizados, cada uno deberá ser creado por separado.

A. El primero será para insertar mediante un botón el Sexo. B. El segundo será para elegir mediante un DropDown List la profesión. C. El tercero será para calcular los valores introducidos de acuerdo a las opciones

requeridas en sus respectivos botones.

2 – Crear una aplicación web para almacenar mediante un archivo de texto los datos de un Curriculum de una persona.

A. Deberá guardarse en el archivo los datos introducidos mediante el formulario B. Deberá recuperarse mediante lectura todos los datos introducidos. C. Insertar un control Hyperlink para regresar al menú principal donde estarán todos estos

ejercicios a realizar. D. Explique brevemente mediante un Label, para que sirven los archivos de textos creados

y que información contienen.

3 – Crear una aplicación web para almacenar mediante un archivo de texto las operaciones del Control Web “Mi Calculadora Ver. 0.1” creado en el ejercicio no. 1 de esta tarea.

A. Deberá guardarse en el archivo los datos introducidos mediante el formulario B. Deberá recuperarse mediante lectura todos los datos introducidos. C. Insertar un control Hyperlink para regresar al menú principal donde estarán todos estos

ejercicios a realizar. D. Explique brevemente mediante un Label, para que sirven los archivos de textos creados

y que información contienen.

4 – Crear una aplicación web que muestre mediante formulario los Controles de Validación de Entrada de Usuario que son mencionados en este módulo.

A. De ejemplo de cada Control de Validación B. Recuerde colocarle los respectivos mensajes de Error a cada uno. C. Explique brevemente mediante un Label, el funcionamiento de cada Control de

Validación utilizado y que datos fueron comparados en cada caso.

Luego proceder a insertar los 3 controles creados

dentro de un mismo formulario para que al ejecutarse

la aplicación puedan ser visualizados de manera

conjunta.

RECUERDE > Un Control Web Personalizado, al ser

creado deberá tener una extensión de archivo

*.ascx