UNIVERSIDAD NACIONAL DE SAN AGUSTIN

INGENIERIA INDUSTRIAL
ALUMNOS:

FRANCISCO ZEGARRA QUIROA

FREDY BEDREGAL TICONA
BRYHAM OMAR FREITAS BACA

CREAR PAGINA WEB EN VISUAL STUDIO 2010

Crear paginas web en

Visual Studio
Se proporciona una introduccin al entorno de desarrollo web en
Microsoft Visual Studio 2010 y en Microsoft Visual Web Developer
Express. Este tutorial gua al usuario a travs de la creacin de una
pgina web sencilla de ASP.NET y muestra las tcnicas bsicas para
crear una nueva pgina, agregar controles y escribir cdigo.
Las tareas ilustradas en este tutorial incluyen:
Crear un proyecto de sitio web del sistema de archivos.
Familiarizarse con Visual Studio.
Crear una pgina ASP.NET de un solo archivo.
Agregar controles.
Agregar controladores de eventos.
Ejecutar pginas usando el servidor web integrado en Visual Studio
para pruebas.

Requisitos previos

Para poder completar este tutorial, necesitar:

Microsoft Visual Studio 2010 o Microsoft Visual Web Developer
Express.Para obtener informacin sobre descargas, visite el sitio web
del Centro de desarrollo de Visual Studio.

Nota
Si usa Microsoft Visual Studio 2010, en este tutorial se presupone que seleccion
la coleccin de configuraciones Desarrollo web la primera vez que inici Microsoft
Visual Studio 2010.Para obtener ms informacin, vea Cmo: Seleccionar
configuraciones de entorno de desarrollo web.

.NET Framework se instala automticamente cuando se instala

Microsoft Visual Studio 2010 o Microsoft Visual Web Developer
Express.

Crear un proyecto de sitio web y una pgina

En esta parte del tutorial crear un proyecto de sitio web y le

agregar una pgina nueva.Tambin agregar texto HTML y ejecutar
la pgina en el explorador web.
Para este tutorial, crear un proyecto de sitio web de sistema de
archivos que no le exige trabajar con Microsoft Internet Information
Services (IIS).En lugar de esto, crear y ejecutar la pgina en el
sistema de archivos local.
Un proyecto de sitio web de sistema de archivos almacena pginas y
otros archivos en una carpeta elegida por el usuario en alguna
ubicacin de su equipo.A continuacin se mencionan otras opciones
de proyecto web:
Un proyecto de sitio web de IIS local, que almacena sus archivos en
una subcarpeta de la raz de IIS local (normalmente,
\inetpub\wwwroot\).
Un proyecto de sitio FTP, que almacena los archivos en un servidor
remoto al que se tiene acceso a travs de Internet utilizando el
Protocolo de transferencia de archivos (FTP).

Un proyecto de sitio web de ISS remoto, que almacena los archivos en

un servidor remoto al que se puede tener acceso a travs de una red
local.
Un proyecto de aplicacin web, que es similar a un proyecto de sitio
web de sistema de archivos excepto que el usuario lo compila antes
de la implementacin y lo implementa como un archivo de biblioteca
de vnculos dinmicos (.dll).Para obtener ms informacin sobre la
diferencia entre los proyectos de sitio web y los proyectos de
aplicacin web, vea Proyectos de aplicacin web frente a proyectos de
sitio web.

Para crear un sitio web del sistema de archivos

Abra Microsoft Visual Studio 2010 o Microsoft Visual Web Developer
Express.
En el men Archivo, haga clic en Nuevo sitio Web.
Aparecer el cuadro de dilogo Nuevo sitio web tal y como se
muestra en la siguiente ilustracin:

En Plantillas instaladas, haga clic en Visual Basic o en C# y, a

continuacin, seleccione Sitio web ASP.NET.
Cuando se crea un proyecto de sitio web, se especifica una
plantilla.Cada plantilla crea un proyecto web que contiene diferentes
archivos y carpetas.En este tutorial, crear un sitio web basado en la
plantilla Sitio web ASP.NET, que crea archivos y carpetas que
normalmente se usan en sitios web ASP.NET.

En el cuadro Ubicacin web, seleccione Sistema de archivos y, a

continuacin, escriba el nombre de la carpeta en la que desea
guardar las pginas del sitio web.
Por ejemplo, escriba el nombre de carpeta C:\BasicWebSite.
Haga clic en Aceptar.
Visual Studio crea un proyecto web que incluye la funcionalidad
preintegrada para el diseo (una pgina maestra, las pginas de
contenido About.aspx y Default.aspx y una hoja de estilos en
cascada), para Ajax (archivos de script de cliente) y para la
autenticacin (pertenencia de ASP.NET).Cuando se crea una nueva
pgina, Visual Web Studio muestra de forma predeterminada la
pgina en la vista Cdigo, donde se pueden ver los elementos HTML
de la pgina.En la siguiente ilustracin se muestra la vista Cdigo
fuente de una pgina web.

Un paseo por el entorno de desarrollo web de

Visual Studio

Antes de seguir trabajando en la pgina, es conveniente que se

familiarice con el entorno de desarrollo de Visual Studio.En la
ilustracin siguiente se muestran las ventanas y herramientas que
estn disponibles en Visual Studio y Microsoft Visual Web Developer
Express.
Nota

En este diagrama, se muestran las ventanas predeterminadas y las ubicaciones

ventanas.El men Ver permite mostrar ventanas adicionales as como reorganizar y
ventanas segn las preferencias del usuario.Si la disposicin de las ventanas ya ha
del usuario, no coincidir con la que se refleja en la ilustracin.
El entorno de Visual Studio

Para familiarizarse con el diseador web

Examine la ilustracin anterior y relacione el texto con la lista
siguiente, que describe las ventanas y herramientas que se utilizan
con ms frecuencia.No todas las ventanas y herramientas visibles se
muestran aqu, slo las marcadas en la ilustracin anterior.
Barras de herramientas.Proporcionan los comandos que permiten dar
formato al texto, buscar texto, etc.Algunas barras de herramientas
slo estn disponibles cuando se trabaja en la vista Diseo.
Ventana Explorador de soluciones.Muestra los archivos y carpetas del
sitio Web.

Ventana Documento.Muestra los documentos en los que se est

trabajando en ventanas con fichas.Puede pasar de un documento a
otro haciendo clic en las fichas.
Ventana Propiedades.Permite cambiar la configuracin de la pgina,
los elementos HTML, los controles y otros objetos.
Fichas de vistas.Presentan distintas vistas del mismo documento.La
vista Diseo es un rea de edicin prcticamente WYSIWYG.La
vista Cdigo
fuente es
el
editor
HTML
de
la
pgina.La
vista Dividir muestra
la
vista Diseo y
la
vista Cdigo del
documento.Trabajar con las vistas Diseo y Cdigo fuente ms
adelante en este tutorial.Si prefiere abrir las pginas web en la
vista Diseo, en el men Herramientas haga clic en Opciones,
seleccione el nodo Diseador HTML y cambie la opcin Iniciar pginas
en.
Cuadro de herramientas.Proporciona los controles y elementos HTML
que se pueden arrastrar a la pgina.Los elementos del Cuadro de
herramientas se agrupan por funcionamiento comn.
Explorador de servidores/Explorador de bases de datos.Muestra las
conexiones de las bases de datos.Si el Explorador de servidores no
est visible, en el men Ver, haga clic en Explorador de servidores o
en Explorador de bases de datos.
Nota
La ventana Explorador de servidores se denomina Explorador de bases de
datos en Microsoft Visual Web Developer Express.Para ver todos los
elementos de men disponibles en Microsoft Visual Web Developer
Express, en el men Herramientas, haga clic en Configuracin y, a
continuacin, enConfiguracin para expertos.

Crear una nueva pgina de formularios Web

Forms de ASP.NET
Cuando se crea un nuevo sitio web mediante la plantilla de
proyecto Sitio web ASP.NET, Visual Studio agrega una pgina ASP.NET
(pgina de formularios Web Forms) denominada Default.aspx.Puede
utilizar la pgina Default.aspx como pgina principal de su sitio

web.Sin embargo, en este tutorial, crear una nueva pgina y

trabajar con ella.

Para agregar una pgina al sitio Web

Cierre la pgina Default.aspx.Para ello, haga clic con el botn
secundario en la pestaa que muestra el nombre del archivo y, a
continuacin, haga clic en Cerrar.
En el Explorador de soluciones, haga clic con el botn secundario en
el sitio web, (por ejemplo, C:\BasicWebSite) y, a continuacin, haga
clic en Agregar nuevo elemento.
Se abrir el cuadro de dilogo Agregar nuevo elemento.En la
ilustracin siguiente se muestra un ejemplo del cuadro de
dilogo Agregar nuevo elemento.

En la lista de plantillas, seleccione Formulario Web Forms.

En el cuadro Nombre, escriba FirstWebPage.
Cuando cre el proyecto de sitio web, especific un lenguaje
predeterminado basado en la plantilla de proyecto que seleccion.Sin
embargo, cada vez que se crea una pgina o un componente nuevo
para el sitio web, se puede seleccionar el lenguaje de programacin

para esa pgina o componente.Puede utilizar diferentes lenguajes de

programacin en el mismo sitio Web.
Desactive la casilla Colocar el cdigo en un archivo independiente.
En este tutorial va a crear una pgina de un solo archivo con cdigo y
HTML en la misma pgina.El cdigo para las pginas ASP.NET se
puede ubicar en la pgina o en un archivo de clase independiente.
Haga clic en Agregar.
Visual Studio crea la nueva pgina y la abre.

Agregar HTML a la pgina

En esta parte del tutorial, agregar texto esttico a la pgina.

Para agregar texto a la pgina

En la parte inferior de la ventana de documento, haga clic en la
ficha Diseo para pasar a la vista Diseo.
La Vista de diseo muestra la pgina en la que se est trabajando en
modo WYSIWYG.En este momento, no hay texto ni controles en la
pgina, por lo que est en blanco, aparte de una lnea discontinua
que
forma
un
rectngulo.Este
rectngulo
representa
un
elemento div en la pgina.
Haga clic en el interior del rectngulo formado por la lnea
discontinua.
Escriba "Welcome to Visual Web Developer" y, a continuacin,
presione ENTRAR dos veces.
La siguiente ilustracin muestra el texto que escribi en la Vista de
diseo.

Cambie a la vista Cdigo fuente.

Puede ver el cdigo HTML que ha creado escribiendo en la Vista de
diseo, como se muestra en la ilustracin siguiente.

Ejecutar la pgina

Antes de continuar agregando controles a la pgina, puede intentar

ejecutarla.Para ejecutar una pgina, necesita un servidor web.En un
sitio Web de produccin, se utiliza IIS como servidor web.Sin
embargo, para probar una pgina, puede usar el servidor de
desarrollo de Visual Studio, que se ejecuta localmente y no requiere
IIS.Para proyectos de sitio web de sistema de archivos, el servidor
web predeterminado en Visual Studio 2010 y Microsoft Visual Web
Developer Express es el servidor de desarrollo de Visual Studio.

Para ejecutar la pgina

En el Explorador de soluciones, haga clic con el botn secundario del
mouse en FirstWebPage.aspx y seleccione Establecer como pgina
principal.
Presione CTRL+F5 para ejecutar la pgina.
Visual Studio inicia el servidor de desarrollo de Visual Studio.En la
barra de tareas de Windows aparece un icono que indica que el
servidor de desarrollo de Visual Studio est en ejecucin, como se
muestra en la ilustracin siguiente.

La pgina se muestra en el explorador.Aunque la pgina creada tiene

la extensin de nombre de archivo .aspx, se ejecuta como cualquier
pgina HTML.
Para mostrar una pgina en el explorador, tambin se puede hacer
clic con el botn secundario del mouse en la pgina en el Explorador
de soluciones y seleccionarVer en el explorador.
Cierre el explorador.

Agregar y programar controles

Ahora agregar controles de servidor a la pgina.Los controles de

servidor, entre los que se incluyen botones, etiquetas, cuadros de
texto y otros controles familiares, proporcionan las funciones tpicas
de procesamiento de formularios para las pginas Web ASP.NET.Sin
embargo, puede programar los controles con cdigo que se ejecuta
en el servidor, no el cliente.

Agregar a la pgina un control Button, un control TextBox y un

control Label y escribir cdigo para controlar el evento Click para el
control Button.

Para agregar controles a la pgina

Haga clic en la pestaa Diseo para cambiar a la Vista de diseo.
Site el punto de insercin al final del texto "Welcome to Visual Web
Developer" y presione ENTRAR al menos cinco veces para ampliar el
espacio del cuadro del elemento div.
En el Cuadro de herramientas, expanda el grupo Estndar.
Arrastre un control TextBox hasta la pgina y colquelo en el centro
del cuadro del elemento div con el texto "Welcome to Visual Web
Developer" en la primera lnea.
Arrastre un control Button hasta la pgina y colquelo a la derecha
del control TextBox.
Arrastre un control Label hasta la pgina y colquelo en una lnea
independiente debajo del control Button.
Site el punto de insercin encima del control TextBox y,
continuacin, escriba el texto "Escriba su nombre:".

Este texto HTML esttico es el ttulo del control TextBox.Puede

mezclar HTML esttico y controles de servidor en la misma pgina.La
siguiente ilustracin muestra cmo aparecen los tres controles en
la Vista de diseo.

Establecer las propiedades de los controles

Visual Studio ofrece distintas maneras de establecer las propiedades
de los controles de la pgina.En esta parte del tutorial, establecer
propiedades en las vistas de diseo ycdigo fuente.

Para establecer
controles

las

propiedades

de

los

Seleccione el control Button y despus, en la ventana Propiedades,

establezca Text en Display Name.El texto que escribi aparece en el
botn en el diseador, tal y como se muestra en la siguiente
ilustracin.
Nota
Si no aparece la ventana Propiedades, presione F4 para mostrarla.

Cambie a la vista Cdigo fuente.

En la vista Cdigo, se muestra el cdigo HTML de la pgina, incluidos
los elementos que Visual Studio ha creado para los controles de
servidor.Los controles se declaran utilizando sintaxis de tipo HTML,
con la excepcin de que las etiquetas utilizan el prefijo asp: e incluyen
el atributo runat="server".
Las propiedades del control se declaran como atributos.Por ejemplo,
cuando estableci la propiedad Text del control Button en el paso 1,
en realidad estableci el atributo Text del marcado del control.
Observe que todos los controles estn dentro de un elemento form,
que
tambin
tiene
el
atributo runat="server".El
atributo runat="server" y el prefijo asp: de las etiquetas de los
controles marcan los controles para que ASP.NET los procese en el
servidor cuando se ejecuta la pgina.El cdigo que se encuentra fuera
de
los
elementos <form
runat="server"> y <script
runat="server"> se enva sin cambios al explorador; este es el motivo
por el que el cdigo ASP.NET debe estar dentro de un elemento cuya
etiqueta de apertura contiene el atributo runat="server".

Site
el
punto
de
etiqueta <asp:Label> y,
ESPACIADORA.

insercin
detrs
de asp:Label en
la
a continuacin, presione la BARRA

Aparece una lista desplegable que muestra las propiedades que se

pueden establecer para un control Label.Esta caracterstica,
denominada IntelliSense, ayuda en la vista Cdigo fuente con la
sintaxis de los controles de servidor, los elementos HTML y otros
elementos de la pgina.La siguiente ilustracin muestra la lista
desplegable de IntelliSense para el control Label.

Seleccione ForeColor y, a continuacin, escriba un signo igual y

comillas (=").
IntelliSense muestra una lista de colores.
Nota
Puede mostrar una lista desplegable de IntelliSense en cualquier momento
presionando CTRL+J.

Seleccione un color para el texto del control Label.Asegrese de

seleccionar un color suficientemente oscuro para que se pueda leer el
texto sobre un fondo de color blanco.
El atributo ForeColor se completa con el color que ha seleccionado,
incluidas las comillas de cierre.

Programar el control Button

En este tutorial, escribir cdigo que lee el nombre especificado por el
usuario en el cuadro de texto y lo muestra en el control Label.

Para agregar un controlador de eventos de

botn predeterminado
Cambie a la Vista de diseo.
Haga doble clic en el control Button.
Visual Studio cambia a la vista Cdigo y crea un esquema del
controlador de eventos para el evento predeterminado del
control Button, es decir, el evento Click.

Nota

Hacer doble clic en un control en la vista de diseo es solo una de las diversas for
crear controladores de eventos.

Dentro del controlador, escriba Label1 seguido de un punto (.).

Cuando se escribe un punto despus de Label, Visual Studio muestra

una lista de los miembros disponibles para el control Label, tal como
se muestra en la siguiente ilustracin.

Complete el controlador de eventos Click para el botn de manera

que tenga el aspecto mostrado en el ejemplo de cdigo siguiente.
C#
VB
protected void Button1_Click(object sender, System.EventArgs e)
{
Label1.Text = TextBox1.Text + ", welcome to Visual Studio!";
}

Desplcese hasta el elemento <asp:Button>.Observe

elemento <asp:Button> tiene
ahora
atributo onclick="Button1_Click".

que

el
el

Este atributo enlaza el evento Click del botn al mtodo controlador

que codific en el paso anterior.

Los mtodos de control de eventos pueden tener cualquier nombre; el

nombre que se ve es el nombre predeterminado creado por Visual
Studio.Lo importante es que el nombre utilizado para el
atributo onclick debe coincidir con el nombre de un mtodo de la
pgina.

Ejecutar la pgina
Ahora puede probar los controles de servidor en la pgina.

Para ejecutar la pgina

Presione CTRL+F5 para ejecutar la pgina en el explorador.
La pgina se vuelve a ejecutar con el servidor de desarrollo de Visual
Studio.
Escriba un nombre en el cuadro de texto y haga clic en el botn.
El nombre especificado se muestra en el control Label.Tenga en
cuenta que cuando se hace clic en el botn, la pgina se publica en el
servidor web.ASP.NET vuelve a crear la pgina, ejecuta el cdigo (en
este caso, se ejecuta el controlador de eventos Click del
control Button) y enva la nueva pgina al explorador.Si observa la
barra de estado del explorador, puede ver que la pgina realiza un
viaje de ida y vuelta al servidor web cada vez que se hace clic en el
botn.
En el explorador, vea el cdigo fuente de la pgina que est
ejecutando.
En el cdigo fuente de la pgina, solo se ve HTML ordinario; no se ven
los elementos <asp:> con los que ha trabajado en la vista Cdigo
fuente.Cuando la pgina se ejecuta, ASP.NET procesa los controles de
servidor y representa en la pgina los elementos HTML que realizan
las funciones que representan el control.Por ejemplo, el
control <asp:Button> se
representa
como
el
elemento <input type="submit"> HTML.
Cierre el explorador.

Trabajar con controles adicionales

En esta parte del tutorial, trabajar con el control Calendar, que

muestra las fechas mes por mes.El control Calendar es ms complejo

que los controles de botn, cuadro de texto y etiqueta con los que ha
trabajado, e ilustra algunas funciones adicionales de los controles de
servidor.
En
esta
seccin,
agregar
un
control System.Web.UI.WebControls.Calendar a la pgina y le dar
formato.

Para agregar un control Calendar

En Visual Studio, cambie a la vista Diseo.
Desde la seccin Estndar del Cuadro de herramientas, arrastre un
control Calendar hasta
la
pgina
y
colquelo
debajo
del
elemento div que contiene los otros controles:
Aparece el panel de etiquetas inteligentes del calendario.El panel
muestra comandos que ayudan a realizar las tareas ms comunes del
control seleccionado.En la siguiente ilustracin se muestra cmo se
representa el control Calendar en la vista Diseo.

En el panel de etiquetas inteligentes, elija Formato automtico.

Se muestra el cuadro de dilogo Formato automtico, que permite
seleccionar un esquema de formato para el calendario.La siguiente
ilustracin muestra el cuadro de dilogo Formato automtico para el
control Calendar.

En la lista Seleccionar esquema, seleccione Simple y, a continuacin,

haga clic en Aceptar.
Cambie a la vista Cdigo fuente.
Puede ver el elemento <asp:Calendar>.Este elemento es mucho ms
largo que los elementos de los controles sencillos creados
anteriormente.Tambin
incluye
subelementos,
como <WeekEndDayStyle>,
que
representa
las
distintas
configuraciones de formato.En la siguiente ilustracin se muestra el
control Calendar en la vista Cdigo fuente.(El marcado exacto que ve
en la vista Cdigo podra ser ligeramente diferente al de la
ilustracin.)

Programar el control Calendar

En esta seccin, programar el control Calendar para que muestre la
fecha actualmente seleccionada.

Para programar el control Calendar

En vista Diseo, haga doble clic en el control Calendar.
Un nuevo controlador de eventos se crea en la vista Cdigo fuente.
Complete el controlador de eventos SelectionChanged con el cdigo
resaltado siguiente.
C#
VB
protected void Calendar1_SelectionChanged(object sender, System.EventArgs e)
{
Label1.Text = Calendar1.SelectedDate.ToLongDateString();
}

Ejecutar la pgina

Ya puede probar el calendario.

Para ejecutar la pgina

Presione CTRL+F5 para ejecutar la pgina en el explorador.
Haga clic en una fecha del calendario.
La fecha especificada se muestra en el control Label.
En el explorador, vea el cdigo fuente de la pgina.
El control Calendar se ha representado en la pgina como una tabla,
con cada da como un elemento td que contiene un elemento a.
Cierre el explorador.

Pasos siguientes

Este tutorial ha ilustrado las caractersticas bsicas del diseador de

pginas de Visual Studio.Ahora que sabe cmo crear y editar una
pgina web en Visual Studio, puede explorar otras caractersticas.Por
ejemplo, quiz quiera hacer lo siguiente:
Obtener ms informacin sobre cmo seleccionar plantillas de
proyecto.Para obtener informacin detallada, vea Plantillas de Visual
Studio para proyectos web.
Crear pginas web con archivos de cdigo subyacente en lugar de un
script insertado.Para obtener informacin detallada, vea Tutorial:
Crear una pgina web bsica con separacin de cdigo en Visual
Studio.
Obtener ms informacin sobre cmo editar HTML en Visual
Studio.Para obtener informacin detallada, vea Tutorial: Edicin HTML
bsica en Visual Web Developer.
Agregar acceso a datos a las pginas Web.Para obtener informacin
detallada, vea Tutorial: Acceso a datos bsico en pginas web.
Obtener informacin sobre el depurador de pginas Web.Para obtener
informacin detallada, vea Tutorial: Depurar pginas Web en Visual
Web Developer.
Crear pginas Web especficamente diseadas para los telfonos
mviles y otros dispositivos.Para obtener informacin detallada,
vea Sitios web ASP.NET para dispositivos mviles.

Crear un diseo de sitio coherente mediante pginas maestras.Para

obtener informacin detallada, vea Tutorial: Crear y usar pginas
maestras ASP.NET en Visual Web Developer.
Agregar navegacin al sitio para que los usuarios puedan desplazarse
con mayor facilidad entre las pginas.Para obtener informacin
detallada, vea Tutorial: Agregar la funcin de navegacin de sitios
web.
Obtener ms informacin sobre las hojas de estilos en cascada
(CSS).Para obtener informacin detallada, vea Informacin general
sobre el trabajo con CSS.