ACTIVIDAD DE APRENDIZAJE 1

Fundamentos de aplicaciones web con asp.net

(SEMANA 1-2) VIA-10

Módulo : Gestión de aplicaciones para

internet y producción multimedia.
Unidad Didáctica : Taller Programación Web.
Créditos : 5
N° de Horas Semanal : 10
Capacidad terminal : Implementar aplicaciones para
Internet e intranet.
Criterio de Evaluación : 1
Elemento de la capacidad terminal :
Implementar páginas web
desde asp.net y Creación de formularios Web
Contenidos Básicos:
1. Introducción a la Plataforma ASP.NET

 Propiedades importantes para proyectos en ASP.NET. Ventajas

 Conceptos previos: WebSite, Página Web, Servidor Web
 Pasos para crear una aplicación en ASP.NET ; archivos creados al momento
de construir la aplicación web. Arquitectura del WebSite
2. Formularios web

 Los webform: concepto, características estructura, recuperar datos de un

formulario.
 Diseño de sitios web con código HTML e incluirlos en proyecto de ASP.NET
3. Creación y Administración de Sitios Web

 Sitios web IIS Locales

 Sitios web basados en Sistemas de Archivos
 Sitios web remotos
4. Programando con ASP.NET

 Del lado cliente: mezcla HTML con código de bloques ejecutables

 Del lado servidor empleando web server control de asp.net
Manejo de eventos en las páginas: Crear Procedimientos de evento
del lado cliente y lado servidor

1. Introducción a la Plataforma ASP.NET

 Propiedades importantes para proyectos en ASP.NET. Ventajas
 Conceptos previos: WebSite, Página Web, Servidor Web
 Pasos para crear una aplicación en ASP.NET ; archivos creados al momento
de construir la aplicación web. Arquitectura del WebSite
ASP.NET es un ……………………… desarrollado y comercializado por………………...
Es usado por programadores para construir …………………………dinamicos,
……………………… y ………………………...es la tecnología sucesora de la tecnología
………………………………….
ASP.NET es una ……………………………. que permitea los programadores crear paginas web.
……………………………………………., desde websites personales hasta aplicaciones web empresariales. Todo
lo que necesitas para empezar es instalar VisualStudio.NET.
Las paginas de ASP.NET, conocidas oficialmente como ……………………………….son el
principal medio de construccion para el desarrollo de aplicaciones web. Los formularios web
estan contenidos en archivos con una extensión…………………..; estos archivos tipicamente
contienen etiquetas HTML XML estatico, y tambien etiquetas definiendo Controles Web que se
procesan del lado del ………………… y los desarrolladores pueden colocar el còdigo
…………………… y ………………………….. requerido por la pagina web.

Propiedades Importantes para Proyectos en ASP.NET

Propiedades detalle

Mejor rendimiento ( ) 1.Autenticacion de Windows y configuración

por aplicación las aplicaciones están a salvo
Compatibilidad con herramientas de primer 2.el clr permite independencia del lenguajes
nivel ( )
Eficiencia y flexibilidad ( ) 3.separa lógica de presentación controla
eventos en modelo de visua lbasic
Simplicidad ( ) 4.basta copiar archivos para implementar
aplicaciones en el servidor
Facilidad de uso ( ) 5.compilacion just-in-time
Seguridad ( ) 6.Arrastre de controles,edición Wysiwyg

 Conceptos previos: WebSite, Página Web, Servidor

Web,INTERNET,paginas estaticas y dinamicas : COLOQUE EN LA
COLUMNA SEGÚN CORRESPONDA A LA DESCRIPCION
DEFINICION DESCRIPCION

Las paginas son ejecutadas POR el browser

generalmente están realizadas con
java script

documento electrónico adaptado

particularmente para el Web este puede ser
consultado por cualesquier persona que se
conecte a internet
Red mundial de comunicaciones
sitio (localización) en la World Wide Web que
contine documentos (páginas web)
organizados gerárquicamente gráficos, texto,
 audio, vídeo, y otros materiales dinámicos o
estáticos

Aquí los datos son enviados al servidor

para que los procese y nos devuelva un
resultado. Pueden estar en lenguaje,
asp,asp.net, php, jsp ,cgi (servidores
unix)

pasos para crear un website en asp.net

 Para crear un nuevo
proyecto ASP.NET utilice
el menú
Archivo·Nuevo·Sitio
Web
En la ventana que
aparece elegimos
cualquiera de los 3
tipos de ubicación

Ubicación : ……………………………………………………………………….

Sistemas de archivo: …………………………………………..

HTTP:
…………………………………………………………………………………………………
………………………………………………………………………………………….

FTP: ……………………………………………………………………..

¿Qué archivos se crean al momento de implementar el website?

extensión Descripción del archivo
.sin, .suo
.Vproj,.csproj
.aspx,.asmx
.vb o .cs
.asax
.dll
.config
Arquitectura del website

El “perímetro” de una aplicación Web es determinada por su estructura de directorios,

comienza por su directorio raíz, el cual contiene:
 La página o WebForm de inicio( archivos………………)
 Archivo de code-behind :archivos asociado a webforms contienen código del servido
(ejempl :*………………………)
 El archivo de configuración ……………………………. con formato XML(Configuaracion a nivel de
cliente) Machine.config (configuración del servidor)
 Global .asax (eventos a nivel de……………………….)
 El directorio BIN :Contiene el assembly de la aplicación (*.dll), los componentes externos
2. FORMULARIOS WEB
Es una página expresada en lenguaje de marcas que es compilada y ejecutada
dinámicamente en el …………………………………. para generar la salida solicitada
por el …………………………… (explorador ó dispositivo).Los Web Forms son
páginas Web programables que sirven como interfaz de usuario (IU) para un proyecto
de aplicación Web utilizando ASP.NET.
Se denominan habitualmente páginas …………………………….o páginas………..
Los formularios Web Forms tienen una extensión ……………… y funcionan como
contenedores para el texto y los controles que deseamos mostrar en el navegador.
Características :están frecuentemente formados por dos archivos distintos: el archivo
.aspx contiene la ……………………..para el formulario Web Form, mientras que el
archivo .aspx.vb o .aspx.cs, denominado página de código subyacente contiene el
……………………. de soporte. .
Funcionamiento de un formulario
 Las solicitudes son atendidas por …………….. y según la extensión son
canalizados a un isapi de ASP.NET (aspnet_isapi.dll)
 La pagina es procesada por ASP.NET y produce una respuesta (Response) que
es enviada de regreso al ………………………………...
3. CREACION Y ADMINISTRACION DE SITIOS WEB
……………….Es un programa servidor de páginas Web Soporta fichero ASP y lo
necesitarás para visualizar las páginas ASP que crees.Software que escuche peticiones
Busca la pagina solicitadaLo ‘despacha’ para que alguien lo proceseDevuelve el
resultado al clienteEjemplos
Internet Information Server ( IIS ),ApacheXSP
4. PROGRAMANDO CON ASP.NET

Cómo implementar código

 2. Creación y Administración de Sitios
Web
Visual Studio.Net 2010 aumenta nuestras opciones a la hora de localizar los sitios web
durante el desarrollo. Estas ubicaciones pueden ser :

 Sitios web IIS Locales

 Sitios web basados en Sistemas de Archivos
 Sitios web FTP

Sitios Web IIS LOCALES( HTTP)

• En el modelo de sitio Web HTTP, Visual Studio crea un directorio virtual bajo lIS y utiliza lIS para
interceptar las peticiones durante el tiempo de desarrollo. Bajo este modelo, el archivo de la solución (el archivo sin)
reside en un directorio especificado debajo del directorio de configuración del proyecto de Visual Studio. El código
fuente del proyecto se almacena en el directorio virtual de IIS (es decir, \Inetpub\wwwroot).Una razón para crear un
sitio Web local es para probar una aplicación con la versión local de JIS, por ejemplo, si necesitarnos probar
determinadas características como los grupos de aplicaciones, los filtros ISAPI o la autenticación basada en I-ITTP.
Aunque se puede acceder a un sitio desde otros ordenadores

Sitios Web FTP

Además de crear sitios basados en HTTP, podernos utilizar Visual Studio para administrar sitios Web disponibles a
través de un servidor FTP. Por ejemplo, si utilizamos una empresa remota de alojamiento para alojar el sitio Web, un
servidor FTP ofrece una forma apropiada para mover archivos entre la ubicación de desarrollo y la ubicación del
alojamiento.
Visual Studio se conecta a cualquier servidor FTP para el que tenga’ privilegios de lectura y escritura. Una vez
conectado, utilizamos Visual Studio para administrar el contenido del servidor FTP remoto

Sitio Web basado en el sistema de archivos

 El sitio Web basado en el sistema de archivos es la opción más orientada hacia el
desarrollador.

. Los sitios Web basados en el sistema de archivos dependen del servidor Web integrado en
Visual Studio para ejecutar sitios Web durante el desarrollo. Cuando especificarnos un sitio
Web basado en el sistema de archivos, podemos decirle a Visual Studio que lo ponga en
cualquier lugar en el sistema de archivos o en una carpeta compartida en otro ordenador.

Este método permitirá crear proyectos web sin necesidad de tener instalado el IIS gracias al
servidor web de visual studio
El servidor Web de Visual Studio
Hasta Visual Studio 2005, el entorno de desarrollo utilizaba lIS directamente para servir las páginas. Eso significaba
que los desarrolladores necesitaban tener IIS completamente activado en sus ordenadores para poder realizar el
desarrollo correctamente, lo cual podía crear un compromiso de seguridad. Visual Studio 2010 incluye su propio
servidor Web integrado que nos permite desarrollar aplicaciones Web de forma efectiva aunque no tengamos
instalado JIS en el ordenador de desarrollo.
 1. Programando con ASP.NET

Qué son los procedimientos de eventos

Cuando un usuario interactúa con un formulario Web Form, se genera un evento.

Diseñamos nuestra aplicación Web para realizar una determinada tarea cuando se
genera el evento. Un procedimiento de evento es la acción que ocurre en respuesta al
evento generado.
Muchos formularios Web Forms permiten al usuario introducir información y hacer
clic en un botón Enviar. Se genera un evento cuando el usuario hace clic en el botón
Enviar. Por ejemplo, un procedimiento de evento podría ser enviar la información del
usuario a una base de datos Microsoft SQL Server. Existen dos tipos de procedimientos
de evento: en el lado del cliente y en el lado del servidor. Ambos tienen ventajas e
inconvenientes.

- Procedimientos de evento en el lado del cliente

A diferencia de los procedimientos de evento en el lado del cliente, los

procedimientos de evento en el lado del servidor requieren el envío de información al
servidor Web para su proceso. Aunque el uso de procedimientos de evento en el lado
del servidor supone un coste en tiempo, son mucho más potentes que los
procedimientos de evento en el lado del cliente. Los procedimientos de evento en el
lado del servidor están formados por código compilado que reside en el servidor Web.
Los procedimientos de evento en el lado del servidor pueden utilizarse para gestionar
eventos que son generados desde los controles de servidor Web y HTML. Los
procedimientos de evento en el lado del servidor tienen acceso a recursos del servidor
que normalmente no están disponibles para los procedimientos de evento en el lado
del cliente.

Los procedimientos de evento en el lado del cliente resultan útiles para eventos que
deseamos que ocurran inmediatamente porque no requieren un viaje de ida y vuelta
al servidor Web (envío de información al servidor Web y espera de una respuesta).

Especificamos un procedimiento de evento en el lado del cliente creando un bloque

<SCRIPT> en la página Web, como muestra el siguiente código:

<SCRIPT language="javascript">
Crear procedimientos de eventos

Crear un procedimiento de evento en el lado del servidor en Visual Studio .NET

implica dos pasos. En el primer paso, creamos el control que genera el evento en el
formulario Web Form. En el segundo, proporcionamos el código necesario en la
página de código subyacente para procesar el evento.

Cuando hacemos doble clic en un control en Visual Studio .NET, Visual Studio .NET
declara una variable (con el mismo nombre que el atributo id del control) y crea una
plantilla para el procedimiento de evento. Cuando utilizamos Visual Basic .NET, Visual
Studio .NET también agrega la palabra clave Handles, que adjunta el procedimiento de
evento al control. La palabra clave Handles permite crear múltiples procedimientos de
evento a un único evento.

El siguiente código HTML muestra un formulario Web Form que tiene un único botón
con un atributo id igual a cmd1; el evento click del botón se gestionará en el servidor:

<form id="form1" method="post" runat="server">

<asp:Button id="cmd1" runat="server"/>

</form>

- Procedimientos de evento en el lado del servidor

Para especificar un procedimiento de evento en el lado del servidor, se utiliza el

atributo runat="server" en la etiqueta script, como muestra el siguiente código:

<SCRIPT language="vb" runat="server">

Debido a que los procedimientos de evento en el lado del servidor requieren un viaje
de ida y vuelta al servidor Web, existen un número limitado de tipos de eventos de
control soportados.

. EVENTOS EN LAS PAGINAS

Los webforms tiene la facultad de reaccionar en forma interactiva a las acciones que realice el
usuario de modo muy similar a la respuesta que obenemos de una ventana Windows.

Los procedimientos de evento son los responsables de manejar estas respuestas a un evento
generado (como un clic o la pulsación de una tecla
 Lado-cliente Lado-servidor

INTERNET
INTERNET
Pág. .HTM

a. Lado-cliente Estos procedimientos son manejados en la computadora del cliente, maquina que es
la que solicita el web form. Estos eventos no envías datos al servidor, más bien el browser
interpreta el código y realiza la acción correspondiente. Pueden ser usados solo con controles
HTM.
b. Lado-servidor Envían la información al servidor requiriendo por lo tanto de un tiempo mayor para
procesarse. Sin embargo, disponen de acceso a los recurso del servidor y se compilan . Estos
eventos responden a eventos generados por los controles Web y HTML que tienen el atributo
runat=”Server” Habría que indicar los controles y eventos que se pueden usar son los limitados
(como los de teclado o movimiento de Mouse)
Qué son los procedimientos de eventos

Cuando un usuario interactúa con un formulario Web Form, se genera un evento.

Diseñamos nuestra aplicación Web para realizar una determinada tarea cuando se
genera el evento. Un procedimiento de evento es la acción que ocurre en respuesta al
evento generado.
Muchos formularios Web Forms permiten al usuario introducir información y hacer
clic en un botón Enviar. Se genera un evento cuando el usuario hace clic en el botón
Enviar. Por ejemplo, un procedimiento de evento podría ser enviar la información del
usuario a una base de datos Microsoft SQL Server. Existen dos tipos de procedimientos
de evento: en el lado del cliente y en el lado del servidor. Ambos tienen ventajas e
inconvenientes.
Crear procedimientos de eventos

Crear un procedimiento de evento en el lado del servidor en Visual Studio .NET implica
dos pasos. En el primer paso, creamos el control que genera el evento en el formulario
Web Form. En el segundo, proporcionamos el código necesario en la página de código
subyacente para procesar el evento.

Cuando hacemos doble clic en un control en Visual Studio .NET, Visual Studio .NET
declara una variable (con el mismo nombre que el atributo id del control) y crea una
plantilla para el procedimiento de evento. Cuando utilizamos Visual Basic .NET, Visual
Studio .NET también agrega la palabra clave Handles, que adjunta el procedimiento de
evento al control. La palabra clave Handles permite crear múltiples procedimientos de
evento a un único evento.

El siguiente código HTML muestra un formulario Web Form que tiene un único botón
con un atributo id igual a cmd1; el evento click del botón se gestionará en el servidor:

<form id="form1" method="post" runat="server">

<asp:Button id="cmd1" runat="server"/>

</form>

El siguiente código Visual Basic .NET muestra la declaración de variables necesaria en la

página de código subyacente:

Protected WithEvents cmd1 As _System.Web.UI.WebControls.Button

En el código anterior, el nombre de la variable debe coincidir con el id del control Web,
y debemos utilizar la palabra clave WithEvents para indicar que este control hace que
se ejecuten los procedimientos de evento. En el siguiente código Visual Basic .NET, que
muestra el procedimiento de evento para el evento Click, la palabra clave Handles
indica que el procedimiento de evento se ejecuta en respuesta al evento Click del
control cmd1:

Private Sub cmd1_Click(ByVal s As System.Object, _ByVal e As System.EventArgs)

Handles cmd1.Click

…...
End Sub

Todos los eventos pasan dos argumentos al procedimiento de evento: el remitente del
evento y una instancia de la clase que guarda los datos del evento. Normalmente, este
último es del tipo EventArgs, y a menudo no contiene ninguna información adicional;
sin embargo, para algunos controles, es de un tipo que es específico para ese control.
Interactuar con controles en procedimientos de eventos

En muchas aplicaciones Web, necesitamos leer y escribir a controles de un formulario.

Podemos hacerlo dentro de los procedimientos de evento en el lado del servidor. En un
procedimiento de evento en el lado del servidor, podemos leer información de un
control de servidor. Por ejemplo, si tenemos el siguiente formulario con un control
Textbox y un control Button:

<FORM id="Form1" runat="server">

<asp:TextBox id="txtName" runat="server" />

<asp:Button id="cmd1" runat="server" />

</FORM>

Cuando el usuario hace clic en el botón, podemos leer el texto que el usuario ha
escrito en el cuadro de texto. El siguiente código asigna la variable de cadena
strGreeting a una concatenación del texto “Hello” y el texto del cuadro de texto
txtName:

Dim strGreeting As String = "Hello " & txtName.Text

Por ejemplo, si un usuario ha escrito "Shannon" en el cuadro de texto txtName, la

variable strGreeting contendrá la cadena de texto "Hello Shannon".

Podemos enviar información directamente a un control de servidor Web utilizando las

propiedades del control. Por ejemplo, supongamos que tenemos un control de servidor
Web denominado Label en la página ASP.NET, como sigue:

<asp:Label id="lblGreeting" runat="server">Greeting</asp:Label>

El siguiente código en el lado del servidor asigna la propiedad Text del control de
servidor Web lblGreeting a una cadena de texto:

lblGreeting.Text = "new text

Ciclo de vida de los eventos de página

El ciclo de vida de los eventos de página consta de los siguientes eventos de página,
que ocurren en el siguiente orden:

Este evento de página inicializa la página creando e inicializando

1. Page_Init
los controles de servidor Web de la página.
Este evento de página se ejecuta cada vez que se solicita la
2. Page_Load
página.
3. Eventos Este evento de página incluye eventos de cambio (por ejemplo,
Control Textbox1_Changed) y eventos de acción (por ejemplo,
Button1_Click).
Este evento de página ocurre cuando la página se cierra o cuando
4. Page_Unload
el control pasa a otra página.

El final del ciclo de vida de los eventos de página incluye el borrado de la página en
memoria. La mayoría de eventos de control no ocurren hasta que el formulario Web
Form se envíe de nuevo al servidor. Por ejemplo, los eventos Change se gestionan
en orden aleatorio en el servidor después de que el formulario haya sido enviado. En
cambio, los eventos Click pueden hacer que el formulario sea enviado al servidor
inmediatamente.

En ASP.NET, los formularios están diseñados para enviar información de retorno a la

página ASP.NET remitente para su procesamiento. Este proceso se denomina
postback. Los postbacks pueden producirse por determinadas acciones del usuario.
De modo predeterminado, únicamente los eventos click Button hacen que el
formulario sea enviado de nuevo al servidor. Sin embargo, si establecemos la
propiedad AutoPostBack de un control a true, forzamos un postback para los
eventos de ese control.

El código de la página de código subyacente es como sigue:

Private Sub ListBox1_SelectedIndexChanged _(ByVal s As System.Object, ByVal e As

System.EventArgs) Handles ListBox1.SelectedIndexChanged
TextBox1.Text=ListBox1.SelectedItem.Value
End Sub

Gestión de los eventos: Page.IsPostback

El evento Page_Load se ejecuta en cada petición de una página, tanto si es la primera
petición de la página o un postback. Debido a que el evento Page_Load se ejecuta con
cada petición de una página, todo el código del evento Page_Load se ejecutará cada
vez que la página sea solicitada. Sin embargo, cuando utilizamos eventos postback, es
posible que no deseemos que se ejecute nuevamente todo el código. Si éste es el caso,
podemos utilizar la propiedad Page.IsPostBack para controlar qué código se ejecuta
únicamente cuando la página se solicita por primera vez, como muestra el siguiente
código:

Private Sub Page_Load(ByVal s As System.Object, _ByVal e As System.EventArgs)

Handles MyBase.Load

If Not Page.IsPostBack Then

'ejecución sólo en la carga de página inicial

End If

'este código se ejecuta en cada petición

End Sub
Arquitectura del website

El “perímetro” de una aplicación Web es determinada por su estructura de directorios,

comienza por su directorio raíz, el cual contiene:

 La página o WebForm de inicio( archivos aspx)

 Archivo de code-behind :archivos asociado a webforms contienen código del servido
(ejempl :*.aspx.vb)
 El archivo de configuración Web.config con formato XML(Configuaracion a nivel de cliente)
Machine.config (configuración del servidor)
 Global .asax (eventos a nivel de aplicacion)
 El directorio BIN :Contiene el assembly de la aplicación (*.dll), los componentes externos
2. FORMULARIOS WEB

Es una página expresada en lenguaje de marcas que es compilada y ejecutada

dinámicamente en el servidor para generar la salida solicitada por el cliente (explorador
ó dispositivo).Los Web Forms son páginas Web programables que sirven como interfaz
de usuario (IU) para un proyecto de aplicación Web utilizando ASP.NET.
Forms se denominan habitualmente páginas ASP.NET o páginas ASPX. Los formularios
Web Forms tienen una extensión .aspx y funcionan como contenedores para el texto y
los controles que deseamos mostrar en el navegador.
Características :están frecuentemente formados por dos archivos distintos: el archivo
.aspx contiene la IU para el formulario Web Form, mientras que el archivo .aspx.vb o
.aspx.cs, denominado página de código subyacente contiene el código de soporte. .
Funcionamiento de un formulario

 Las solicitudes son atendidas por IIS y según la extensión son canalizados a
un isapi de ASP.NET (aspnet_isapi.dll)
 La pagina es procesada por ASP.NET y produce una respuesta (Response) que
es enviada de regreso al cliente.
3. CREACION Y ADMINISTRACION DE SITIOS WEB

Es un programa servidor de páginas Web Soporta fichero ASP y lo necesitarás para

visualizar las páginas ASP que crees.Software que escuche peticiones Busca la pagina
solicitada
Lo ‘despacha’ para que alguien lo proceseDevuelve el resultado al clienteEjemplos
Internet Information Server ( IIS ),Apache
XSP
4. PROGRAMANDO CON ASP.NET
Cómo implementar código