Tutorial: Crear un sitio Web local de IIS en Visual Web Developer

  • Artículo

Actualización: noviembre 2007

En Visual Web Developer puede crear y editar sitios web que mantengan las páginas web y otros archivos en distintas ubicaciones. Entre las opciones para ubicar páginas Web y otros archivos se encuentran las siguientes:

  • En una carpeta en el disco duro local, a la que se hace referencia como sitio Web del sistema de archivos.

  • Como aplicación Web con una copia local de Microsoft Internet Information Services (IIS), a la que se hace referencia como sitio Web de IIS local.

También puede trabajar con sitios web en un servidor remoto. Para obtener más información, vea Tipos de sitios Web en Visual Web Developer.

En este tutorial trabajará con dos sitios Web que se ejecutan en una copia de IIS instalada localmente. Uno de los sitios Web está ubicado físicamente bajo la carpeta raíz de IIS (normalmente, C:\Inetpub\wwwroot). Un segundo sitio Web se encuentra en una práctica carpeta en el disco duro, pero está disponible para IIS a través de un directorio virtual.

Puede utilizar IIS para probar el sitio Web. Si el equipo está configurado para permitir a otros usuarios conectarse, el sitio Web estará disponible para esos usuarios.

Nota:

Aunque no pueda ejecutar IIS en el equipo, puede crear y probar sitios web de ASP.NET si ejecuta Visual Web Developer. Para obtener más información, consulte Tutorial: Crear una página Web básica en Visual Web Developer.

Entre las tareas ilustradas en este tutorial se incluyen las siguientes:

  • Crear una aplicación y una página bajo la raíz de IIS.

  • Crear una aplicación que utilice una raíz virtual de IIS.

  • Utilizar IIS para ejecutar la página.

  • Trabajar con IIS en el Explorador de soluciones.

Requisitos previos

Para realizar este tutorial, debe tener IIS instalado en el equipo de manera local y debe iniciar sesión como usuario con privilegios administrativos. Esto se debe a que trabajar con la metabase de IIS (donde se almacena información sobre las aplicaciones IIS) requiere privilegios administrativos.

Crear un sitio Web bajo la raíz de IIS

En la primera parte del tutorial creará un sitio Web que se ubicará bajo la carpeta predeterminada de IIS (normalmente, \Inetpub\wwwroot).

Para crear un nuevo sitio Web de IIS local bajo la raíz de IIS

  1. Abra Visual Web Developer.

  2. En el menú Archivo, haga clic en Nuevo sitio Web.

    Aparece el cuadro de diálogo Nuevo sitio Web.

  3. En Plantillas instaladas de Visual Studio, haga clic en Sitio Web ASP.NET.

  4. Haga clic en Examinar.

    Aparecerá el cuadro de diálogo Seleccionar ubicación.

  5. Haga clic en IIS local.

  6. Haga clic en Sitio Web predeterminado.

  7. Haga clic el icono para crear un nuevo sitio Web, que se encuentra en la esquina superior derecha.

    Este icono no está etiquetado, pero cuando se mantiene el puntero del mouse sobre él, aparece el texto Crear nueva aplicación Web.

    Se agrega una nueva aplicación con el nombre Sitio Web debajo de Sitio Web predeterminado.

  8. En el cuadro para el nuevo sitio Web, escriba LocalIISWebSite y, a continuación, haga clic en Abrir.

    Aparece el cuadro de diálogo Nuevo sitio Web y el cuadro de Ubicación situado en el extremo derecho muestra https://localhost/LocalIISWebSite.

  9. En la lista Lenguaje, haga clic en el lenguaje de programación con el que prefiera trabajar.

    El lenguaje de programación que ha elegido será el lenguaje predeterminado del sitio Web. Sin embargo, puede utilizar varios lenguajes en la misma aplicación Web creando páginas y componentes en lenguajes de programación diferentes.

  10. Haga clic en Aceptar.

    Visual Web Developercrea el nuevo sitio web y abre una nueva página denominada Default.aspx. Mantenga esta página abierta. Esta página inicial Default.aspx utiliza el modelo de código subyacente de páginas Web. Para obtener más información, vea Modelo de código de las páginas web ASP.NET.

Visual Web Developerno se limita a crear las carpetas y los archivos del sitio web, sino que también interactúa con IIS para crear una aplicación web de IIS para el sitio. Básicamente, Visual Web Developer llama a IIS para crear los metadatos que necesita IIS para poder reconocer la carpeta y las páginas como un sitio web.

Puede examinar lo que Visual Web Developer ha llevado a cabo si observa los archivos y carpetas creados.

Para examinar la estructura del sitio Web de IIS local

  1. En Microsoft Windows, haga clic en Inicio y, a continuación, haga clic en Ejecutar.

    Dentro del cuadro de diálogo Ejecutar, en el cuadro Abrir, escriba C:\Inetpub\wwwroot y, a continuación, haga clic en Aceptar.

    Nota:

    Si IIS se instala en una unidad o en una carpeta diferente, cambie la ruta de acceso según corresponda.

    En \wwwroot se ve ahora una nueva carpeta con el nombre LocalIISWebSite.

  2. En el cuadro de diálogo Ruta de acceso, haga doble clic en LocalIISWebSite.

    Se ve el contenido del sitio Web, que incluye lo siguiente:

    • Una carpeta App_Data, creada automáticamente por Visual Web Developer.

    • Una página Default.aspx.

    • El archivo de código subyacente, que es Default.aspx.cs o Default.aspx.vb, según el lenguaje predeterminado para la aplicación Web.

Puede agregar páginas al sitio Web como lo haría normalmente. No obstante, también puede agregar páginas externamente al sitio web; Visual Web Developer las reconocerá como parte de la aplicación, aunque quizá deba actualizar el Explorador de soluciones para que resulten visibles.

Agregar y programar controles

En esta parte del tutorial agregará a la página controles Button, TextBox y Label y escribirá código para controlar el evento Click para el control Button.

Para agregar controles a la página

  1. En Visual Web Developer, cambie a la página Default.aspx, o ábrala, y, a continuación, cambie a la vista Diseño.

  2. Presione ENTRAR varias veces para dejar espacio.

  3. Arrastre tres controles desde la ficha Estándar en el Cuadro de herramientas a la página: TextBox, Buttony Label, y coloque los controles dentro del elemento div en la página.

    Nota:

    Si no puede ver el Cuadro de herramientas, diríjase al menú Ver y haga clic en Cuadro de herramientas.

  4. Coloque el puntero de inserción delante del cuadro de texto y, a continuación, teclee Escriba su nombre:.

  5. Haga clic en el control Button y, en la ventana Propiedades, establezca Texto como Mostrar nombre.

  6. Haga clic en el control Label y, en la ventana Propiedades, borre Texto.

  7. Haga doble clic en el control Button, que ahora presenta la etiqueta Mostrar nombre.

    Visual Web Developerabre el archivo de código para la página en una ventana independiente en el editor.

    El archivo contiene un controlador esqueleto Click para el control Button.

  8. Complete el controlador Click agregando el código resaltado siguiente, con el que se mostrará la cadena de texto después de que se haga clic en el control Button.

    Nota de seguridad:

    Los datos proporcionados por el usuario en una página Web de ASP.NET pueden incluir secuencias de comandos del cliente malintencionadas. De forma predeterminada, las páginas ASP.NET comprueban las páginas en devolución de datos para garantizar que los datos proporcionados por el usuario no incluyen secuencias de comandos ni elementos HTML. Para obtener más información, vea Información general sobre los ataques mediante secuencias de comandos.

    		 
    Protected Sub Button1_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles Button1.Click
    Label1.Text = Textbox1.Text & ", welcome to Visual Web Developer!"
End Sub

    protected void Button1_Click(object sender, EventArgs e)
{
    Label1.Text = TextBox1.Text + ", welcome to Visual Web Developer!";
}

  9. Guarde los archivos.

    Probará esta página Web más adelante en este tutorial, en la sección "Probar la aplicación Web IIS".

Actualizar el sitio Web fuera de Visual Web Developer

Para comprobar que Visual Web Developer lee la ruta de acceso de IIS, agregue un nuevo archivo a la aplicación desde fuera de Visual Web Developer.

Para actualizar el Web fuera de Visual Web Developer

  1. Con Bloc de notas u otros editor de texto, cree un nuevo archivo que tenga el texto que se muestra a continuación, en función de si utiliza Visual Basic o C#.

    <%@Page language="VB"%>
<script >
Protected Sub Button1_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles Button1.Click
   Button1.Text = "I was clicked!"
End Sub
</script>
<html>
<body>
<form  id="form1">
<asp:button  text="Button1" Id="Button1"
    OnClick="Button1_Click"></asp:button>
</form>
</BODY>
</HTML>

    <%@Page language="C#"%>
<script >
protected void Button1_Click(object sender, System.EventArgs e)
{
   Button1.Text = "I was clicked!";
}
</script>
<html>
<body>
<form  id="form1">
<asp:button  text="Button1" Id="Button1"
    OnClick="Button1_Click"></asp:button>
</form>
</BODY>
</HTML>

  2. Guarde el archivo en la ruta de acceso C:\inetpub\wwwroot\LocalIISWebSite con el nombre TestPage.aspx.

    Nota:

    Si IIS se instala en una unidad o en una carpeta diferente, cambie la ruta de acceso según corresponda.

  3. En Visual Web Developer, en el Explorador de soluciones, haga clic en el nombre del sitio web (https://localhost/LocalIISWebSite/) y, a continuación, en el menú Ver, haga clic en Actualizar.

    La lista de archivos que se encuentran en el sitio Web se actualizará para incluir el archivo agregado. Luego probará las páginas Web.

Probar la aplicación Web de IIS

Ya puede probar el sitio Web.

Para probar el sitio Web IIS local

  1. En Visual Web Developer, abra la página Default.aspx.

  2. Presione CTRL+F5 para ejecutar la página.

    Se abre la página en el explorador. Observe que, en el explorador, la dirección URL es https://localhost/LocalIISWebSite/default.aspx. La solicitud para la página se realiza al host local (sin número de puerto), que controla IIS.

  3. Cuando aparezca la página en el explorador, escriba su nombre en el cuadro de texto y haga clic en Mostrar nombre para asegurarse de que funciona.

  4. En Visual Web Developer, abra la página TestPage.aspx.

  5. Presione CTRL+F5 para ejecutar la página.

    La página se abre en la misma instancia del explorador.

  6. Cuando aparezca la página en el explorador, haga clic en Button1 para asegurarse de que funciona.

  7. Cierre el explorador.

Si tiene la posibilidad de conectarse al equipo desde otro equipo, puede intentar obtener acceso a su sitio como si fuera un sitio público. Si no puede conectarse al equipo desde otro equipo, puede pasar por alto este procedimiento.

Para probar el sitio como un sitio público

  • Escriba desde otro equipo la dirección URL que incluye el nombre del equipo servidor Web, el nombre del sitio Web y default.aspx como página:

    • Si es posible el acceso al equipo a través de una red de área local, utilice el nombre del equipo para el servidor que tiene una dirección URL como la siguiente:

      http://server1/LocalIISWebSite/default.aspx

    • Si aloja un dominio en el equipo, puede tener acceso a la página con una dirección URL como la siguiente:

      https://www.contoso.com/LocalIISWebSite/default.aspx

    • Si el equipo está conectado a una red o directamente a Internet, puede utilizar la dirección IP del equipo como nombre de servidor. Por ejemplo:

      http://172.19.195.700/LocalIISWebSite/default.aspx

      Nota:

      Si no puede ver su aplicación desde otro equipo debido a la configuración del firewall de Windows, quizá tenga que habilitar el servidor Web en el puerto 80. Puede hacerlo desde la ficha Avanzadas del firewall de Windows, si hace clic en Configuración. Para obtener más información, visite Security Developer Center -- .NET Framework Security y busque información sobre la configuración del firewall de Windows.

Crear un sitio Web como raíz virtual de IIS

Como hemos visto hasta ahora, IIS permite crear aplicaciones Web ubicadas físicamente bajo la carpeta raíz predeterminada del servidor Web (wwwroot). No obstante, también se pueden crear directorios virtuales de IIS, que son aplicaciones Web de IIS que señalan a archivos y carpetas que pueden encontrarse en cualquier ubicación del disco duro.

Nota:

Por razones de seguridad, IIS no permite crear directorios virtuales que señalen a carpetas de otros equipos. Los directorios virtuales siempre deben señalar al equipo local.

En esta parte del tutorial, utilizará Visual Web Developer para crear un directorio virtual que señale a un sitio web almacenado en una carpeta local del equipo.

El primer paso consiste en crear el directorio virtual. Si ya ha creado un sitio web de sistema de archivos en Visual Web Developer (por ejemplo, en Tutorial: Crear una página Web básica en Visual Web Developer), puede utilizar ese sitio web.

Para crear un sitio Web de IIS local con una carpeta virtual

  1. En Visual Web Developer, el menú Archivo, haga clic en Nuevo sitio Web.

  2. En Plantillas instaladas de Visual Studio, haga clic en Sitio Web ASP.NET.

  3. Haga clic en Examinar.

    Aparecerá el cuadro de diálogo Seleccionar ubicación.

  4. Haga clic en IIS local.

  5. En Seleccione el sitio Web que desee abrir, en la vista de árbol, haga clic en Sitio Web predeterminado y, a continuación, haga clic en el icono Crear un nuevo directorio virtual, que se encuentra en la esquina.

    Este icono no está etiquetado, pero cuando se mantiene el puntero del mouse sobre él, aparece el texto Crear nuevo directorio virtual.

    Aparece el cuadro de diálogo Nuevo directorio virtual.

  6. En el cuadro Nombre de alias, escriba WebSite_vdir.

    Nota:

    Puede asignar al directorio virtual el nombre que desee, siempre y cuando sea válido en IIS.

  7. En el cuadro Carpeta, escriba una de las opciones siguientes:

    • La ruta de acceso a un sitio Web de sistema de archivos, si lo tiene. Puede hacer clic en Examinar y después buscar la carpeta raíz de ese sitio, si no recuerda la ruta de acceso exacta.

    • La ruta de acceso en la que desea crear una nueva carpeta para almacenar las carpetas y los archivos del sitio Web.

  8. Haga clic en Aceptar.

    Si ha especificado una carpeta que no existe, Visual Web Developer le pregunta si desea crearla.

    Después, Visual Web Developer vuelve al cuadro de diálogo Seleccionar ubicación y actualiza la lista de aplicaciones web de IIS que tienen el directorio virtual que ha creado.

  9. Seleccione el directorio virtual que ha creado, haga clic en Abrir y, a continuación, haga clic en Aceptar para crear el sitio Web.

    Si especificó que el directorio virtual señalara a una carpeta nueva o que no contiene un sitio web, Visual Web Developer crea la carpeta App_Data y una página predeterminada, que abre en el diseñador.

    Si la carpeta virtual señala a un sitio web de sistema de archivos ya existente, Visual Web Developer abre el cuadro de diálogo El sitio Web ya existe y le ofrece la opción de seleccionar una nueva carpeta, abrir el sitio existente o crear un nuevo sitio web en la ubicación existente. Después de haber seleccionado una opción y hacer clic en Aceptar, Visual Web Developer muestra el contenido de la carpeta en el Explorador de soluciones y abre la página Default.aspx, en caso de que exista.

Agregar controles a la página Web

Al igual que hizo anteriormente en este tutorial, utilizará una página web ASP.NET sencilla para probar el sitio web de IIS que está creando. Si trabaja con un sitio Web de sistema de archivos ya existente, no es necesario que cree una nueva página. En caso de que su directorio virtual señale a una nueva carpeta, puede utilizar esa página.

Si se trata de un nuevo sitio Web, agregará algunos controles a la página predeterminada para probar el funcionamiento de la página.

Para agregar controles a la página

  1. En Visual Web Developer, abra la página Default.aspx y cambie a la vista Diseño.

  2. Desde la ficha Estándar en el Cuadro de herramientas, arrastre los controles TextBox, Buttony Label a la página y colóquelos dentro del elemento div.

  3. Haga doble clic en el control Button y, a continuación, agregue el código resaltado que se muestra a continuación:

    Protected Sub Button1_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles Button1.Click
    Label1.Text = "Welcome to Visual Web Developer!"
End Sub

    protected void Button1_Click(object sender, System.EventArgs e)
{    
    Label1.Text = "Welcome to Visual Web Developer!";
}

  4. Guarde los archivos.

Probar el directorio virtual

Ya puede probar el sitio Web.

Para probar el sitio Web de IIS local con el directorio virtual

  1. En Visual Web Developer, abra una página en el sitio web, que puede ser la página Default.aspx u otra página.

  2. Presione CTRL+F5 para ejecutar la página.

    Se abre la página en el explorador. Observe que, en el explorador, la dirección URL es https://localhost/Website_vdir/default.aspx. Cuando IIS resuelve la dirección URL, busca la página en la ruta de acceso física asociada al directorio virtual denominado Website_vdir.

  3. Cuando aparezca la página en el explorador, haga clic en el control Button para asegurarse de que funciona.

  4. Cierre el explorador.

Si puede conectarse al equipo desde otro equipo, puede realizar las mismas pruebas que en la sección anterior para intentar obtener acceso a la página.

Eliminar un sitio Web IIS local

Puede administrar sitios web de IIS locales en Visual Web Developer y eliminar los que ya no necesita. Existe una diferencia importante por lo que respecta a la eliminación, según el tipo de sitio Web IIS local con el que se trabaje:

  • Cuando se elimina un sitio Web bajo la raíz de IIS, se elimina la aplicación Web de IIS y también se eliminan los archivos y carpetas del sitio Web.

  • Cuando se elimina un directorio virtual, se elimina la información de IIS acerca de ese sitio, pero los archivos y carpetas de la carpeta del sistema de archivos local permanecen intactos.

Para eliminar el sitio Web IIS local

  1. En el menú Archivo, haga clic en Cerrar solución o en Cerrar proyecto.

  2. En el menú Archivo, haga clic en Abrir sitio Web.

  3. En el cuadro de diálogo Abrir sitio Web, haga clic en IIS local.

  4. Haga clic en el nombre del directorio virtual (Website_vdir) que creó anteriormente en el tutorial.

    Precaución:

    Si selecciona un sitio Web diferente, se podrían eliminar los archivos y las carpetas de ese sitio Web.

  5. Haga clic en el icono de eliminación, situado en la esquina superior.

    El icono no está etiquetado, pero cuando se mantiene el puntero del mouse sobre él, aparece el texto de información sobre herramientas Eliminar.

  6. Cuando se le solicite confirmación para eliminar el sitio Web, haga clic en Sí.

  7. Haga clic en Cancelar para cerrar el cuadro de diálogo Abrir sitio Web.

  8. Abra el explorador y, a continuación, escriba la dirección URL del directorio virtual:

    https://localhost/Website_vdir/default.aspx

    En esta ocasión, el explorador informa de que no se encuentra la página, dado que IIS ya no reconoce Website_vdir como sitio Web en el equipo local.

    Nota:

    Es posible que el explorador local almacenara la página en memoria caché. En ese caso, la página todavía podría mostrarse hasta que se borre la caché del explorador; después de realizar esa operación intente ver de nuevo la página.

Pasos siguientes

En este tutorial ha aprendido a crear un sitio Web con la copia local de IIS. Quizá también desee información acerca de otros tipos de sitios web que puede crear en Visual Web Developer. Por ejemplo, puede hacer lo siguiente:

Vea también

Conceptos

Tipos de sitios Web en Visual Web Developer

Utilizar Visual Web Developer como un usuario no administrativo