Tutorial: Crear una página Web básica con separación de código en Visual Web Developer

  • Artículo

Actualización: noviembre 2007

Cuando se crean páginas Web de ASP.NET y se escribe código en ellas, se puede elegir uno de los dos modelos existentes para tratar los elementos visibles (controles, texto) y el código de programación. En el modelo de un solo archivo, los elementos visibles y el código se mantienen en el mismo archivo. En el modelo alternativo, denominado "separación de código", los elementos visibles están en un archivo y el código en otro, que se conoce como archivo de "código subyacente". Este tutorial ofrece una introducción sobre las páginas Web que utilizan separación de código.

El modelo de un solo archivo se describe en Tutorial: Crear una página Web básica en Visual Web Developer. Este tutorial muestra cómo se crea una página Web con la misma funcionalidad que la página del tutorial de un solo archivo, pero utilizando separación de código.

La decisión de utilizar páginas de un solo archivo o páginas con separación de código depende principalmente de la comodidad y la preferencia personal. Trabajar con los dos modelos en Microsoft Visual Web Developer es similar; ambos se tratan aproximadamente de la misma manera en el editor. Los dos modelos tienen un rendimiento equivalente cuando se ejecuta la página. La página con separación de código hace más fácil que un diseñador Web trabaje en el diseño de una página mientras un programador crea el código correspondiente, ya que las dos páginas se pueden editar por separado.

Las tareas ilustradas en este tutorial incluyen:

  • Usar Visual Web Developer para crear una página ASP.NET con separación del código.

  • Agregar controles.

  • Agregar controladores de eventos.

  • Ejecutar páginas con el servidor de desarrollo de ASP.NET.

Requisitos previos

Para poder completar este tutorial, necesitará:

  • Visual Web Developer y .NET Framework.

Crear un sitio y una página Web

En esta parte del tutorial creará un sitio Web y le agregará una nueva página. También agregará texto HTML y ejecutará la página en el explorador web.

Si ya ha creado un sitio Web en Visual Web Developer (por ejemplo, siguiendo los pasos descritos en Tutorial: Crear una página Web básica en Visual Web Developer), puede usar ese sitio Web y pasar a la sección "Crear una nueva página", que se encuentra más adelante en este tutorial. De lo contrario, cree un sitio y una página Web nuevos siguiendo estos pasos.

Para crear un sitio Web de sistema de archivos

  1. Abra Visual Web Developer.

  2. En el menú Archivo, haga clic en Nuevositio 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. En el cuadro Ubicación, seleccione Sistema de archivos y escriba el nombre de la carpeta donde desee conservar las páginas de su sitio Web.

    Por ejemplo, escriba el nombre de carpeta C:\BasicWebSite.

  5. En la lista Lenguaje, haga clic en Visual Basic o en Visual C#.

    Nota:

    Visual Web Developer no admite actualmente la creación de páginas de código subyacente en Visual J#.

    El lenguaje de programación que elija será el lenguaje predeterminado de su sitio Web, pero también puede establecer el lenguaje de programación de cada página de forma individual.

  6. Haga clic en Aceptar.

    Visual Web Developer crea la carpeta y una nueva página denominada Default.aspx.

Crear una nueva página

Cuando se crea un nuevo sitio Web, Visual Web Developer agrega una página denominada Default.aspx. De manera predeterminada, Visual Web Developer crea una página con separación de código.

Para agregar una página con separación de código al sitio Web

  1. Cierre la página Default.aspx. Para ello, haga clic con el botón secundario en la ficha con el nombre de archivo y seleccione Cerrar.

  2. En el Explorador de soluciones, haga clic con el botón secundario en el sitio web, (por ejemplo, C:\BasicWebSite) y, a continuación, elija Agregar nuevo elemento.

  3. En Plantillas instaladas de Visual Studio, elija Web Forms.

  4. En el cuadro Nombre, escriba WebPageSeparated.

  5. En la lista Lenguaje, elija el lenguaje de programación que prefiere utilizar (Visual Basic o C#).

  6. Compruebe que la casilla Colocar el código en un archivo independiente está activada.

    Esta casilla se encuentra activada de forma predeterminada.

  7. Haga clic en Agregar.

    Visual Web Developer crea dos archivos. El primer archivo, WebPageSeparated.aspx, contendrá el texto y los controles de la página, y se abre en el editor. Un segundo archivo, WebPageSeparated.aspx.vb o WebPageSeparated.aspx.cs (dependiendo del lenguaje de programación seleccionado), es el archivo de código. Los dos archivos se pueden ver en el Explorador de soluciones haciendo clic en el signo (+) situado junto al archivo WebPageSeparated.aspx. El archivo de código se ha creado pero no está abierto. Lo abrirá más adelante en el tutorial cuando escriba el código.

Agregar HTML a la página

En esta parte del tutorial, agregará texto HTML estático a la página WebPageSeparated.aspx.

Para agregar texto a la página

  1. Haga clic en la ficha Diseño de la parte inferior de la ventana de documento para pasar a la vista Diseño.

    La vista Diseño muestra la página en la que se está trabajando en modo WYSIWYG. En este punto, no hay texto ni controles en la página, por lo que ésta está en blanco.

  2. Coloque el puntero de inserción en el elemento div que ya está en la página.

  3. Escriba las palabras Welcome to Visual Web Developer Using Code Separation.

  4. Cambie a la vista Código fuente.

    Puede ver el texto HTML que ha creado escribiendo en la vista Diseño. En esta fase, la página tiene el mismo aspecto que una página HTML normal. La única diferencia está en la directiva <%@ Page %> de la parte superior de la página.

Agregar y programar controles

En esta parte del tutorial, se agrega un control de botón, otro de cuadro de texto y otro de etiqueta a la página y se escribe código para controlar el evento Click del botón. Los controles de servidor, entre los que se incluyen botones, etiquetas, cuadros de texto y otros controles familiares, proporcionan las funciones típicas de procesamiento de formularios para las páginas Web ASP.NET. Sin embargo, puede programar los controles con código que se ejecuta en el servidor, no el cliente.

Para agregar controles a la página

  1. Haga clic en la ficha Diseño para cambiar a la vista Diseño.

  2. Coloque el puntero de inserción después del texto que agregó previamente.

  3. Presione ENTRAR varias veces para dejar espacio.

  4. En la ficha Estándar del Cuadro de herramientas, arrastre tres controles a la página: un control TextBox, un control Button y un control Label.

  5. Coloque el puntero de inserción delante del cuadro de texto y escriba Enter your name:.

    Este texto HTML estático es el título del control TextBox. Puede mezclar HTML estático y controles de servidor en la misma página.

Establecer las propiedades de los controles

Visual Web Developer ofrece distintas maneras de establecer las propiedades de los controles de la página. En esta parte del tutorial, trabajará con propiedades en las vistas Diseño y Código fuente.

Para establecer las propiedades de los controles

  1. Seleccione el control Button y, en la ventana Propiedades, establezca su propiedad Text en Mostrar nombre.

  2. Cambie a la vista Código fuente.

    La vista Código fuente muestra el código HTML de la página, incluidos los elementos que Visual Web Developer ha creado para los controles de servidor. Los controles se declaran utilizando sintaxis de tipo HTML, con la excepción de que las etiquetas utilizan el prefijo asp: e incluyen el atributo .

    Las propiedades del control se declaran como atributos. Por ejemplo, cuando estableció la propiedad Text del botón en el paso 1, estaba estableciendo realmente el atributo Text del marcado del control.

    Observe que todos los controles están dentro de un elemento form que también tiene el atributo . El atributo y el prefijo asp: de las etiquetas de los controles marcan los controles para que ASP.NET los procese cuando se ejecute la página.

Programar el control Button

En este tutorial, escribirá código 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 botón predeterminado

  1. Cambie a la vista Diseño.

  2. Haga doble clic en el control Button.

    Visual Web Developer abre el archivo WebPageSeparated.aspx.vb o WebPageSeparated.aspx.cs en una ventana independiente del editor. El archivo contiene un esquema del controlador de eventos Click para el botón.

  3. Complete el controlador de eventos Click agregando el código resaltado siguiente.

    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, System.EventArgs e)
{    
    Label1.Text = TextBox1.Text + ", welcome to Visual Web Developer!";
}

    Observe que mientras escribe, IntelliSense ayuda con opciones contextuales. Esto comportamiento es idéntico al que se produce cuando se está codificando en una página de un solo archivo.

Examinar los archivos de página y código

Ahora tiene dos archivos que conforman la página WebPageSeparated completa: WebPageSeparated.aspx y WebPageSeparated.aspx.vb o WebPageSeparated.aspx.cs. En esta sección del tutorial, examinará la estructura de estos archivos y la forma en que se relacionan entre ellos.

Para examinar el archivo de página y el de código

  1. Haga clic en la ficha WebPageSeparated.aspx situada en la parte superior de la ventana del editor para cambiar al archivo de página.

  2. Cambie a la vista Código fuente.

    En la parte superior de la página se encuentra una directiva @ page que enlaza esta página con el archivo de código. La directiva tiene el aspecto del siguiente código.

    <%@ Page Language="VB" AutoEventWireup="false" CodeFile="WebPageSeparated.aspx.vb" Inherits="WebPageSeparated" %>

    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="WebPageSeparated.aspx.cs" Inherits="WebPageSeparated" %>

    (La línea no se ajusta en el editor y el atributo de lenguaje y las extensiones de nombre de archivo coincidirán con el lenguaje de programación seleccionado.)

    Cuando la página se ejecuta, ASP.NET crea dinámicamente una instancia de una clase que representa la página. El atributo Inherits identifica la clase definida en el archivo de código subyacente del que se deriva la página .aspx. De forma predeterminada, Visual Web Developer utiliza el nombre de página como base para el nombre de clase en el archivo de código subyacente.

    El atributo CodeFile identifica el archivo de código de esta página. En términos simples, el archivo de código subyacente contiene el código de control de eventos de la página.

  3. Haga clic en la ficha WebPageSeparated.aspx.vb o WebPageSeparated.aspx.cs para cambiar al archivo de código.

    El archivo de código contiene código que es similar a una definición de clase. Sin embargo, no es una definición de clase completa; es una "clase parcial" que sólo contiene una parte de la clase completa que constituirá la página. En concreto, la clase parcial definida en el archivo de código contiene los controladores de eventos y el código personalizado escrito por el usuario. En tiempo de ejecución, ASP.NET genera otra clase parcial que contiene el código de usuario. Esta clase completa se utiliza a continuación como clase base empleada para representar la página. Para obtener más información, vea Información general sobre clases de páginas ASP.NET.

    Nota:

    Si está familiarizado con el modelo de código subyacente utilizado en Microsoft Visual Studio .NET 2003, notará que en el nuevo modelo la clase de código subyacente no contiene más código generado que la propia definición de clase. Por ejemplo, la clase no contiene las variables de instancia de los controles de la página. Este tipo de código generado ya no es necesario.

Ejecutar la página

Ya puede probar la página.

Para ejecutar la página

  1. Presione CTRL+F5 para ejecutar la página en el explorador.

    La página se ejecuta utilizando el servidor de desarrollo de ASP.NET.

    Nota:

    Si el explorador genera un error 502 o un error que indica que la página no se puede mostrar, es posible que necesite configurarlo para que omita los servidores proxy para las solicitudes locales. Para obtener información detallada, vea Cómo: Omitir un servidor proxy para las solicitudes Web locales.

  2. Escriba un nombre en el cuadro de texto y haga clic en el botón.

    El nombre especificado se muestra en el control Label.

  3. En el explorador, vea el código fuente de la página que está ejecutando.

  4. Cierre el explorador.

    La página funciona exactamente igual que si se tratara de una página de un solo archivo. Si ha seguido los pasos descritos en Tutorial: Crear una página Web básica en Visual Web Developer para crear una página de un solo archivo, podrá comparar las dos páginas para ver que son iguales cuando se ejecutan.

Pasos siguientes

Este tutorial ha mostrado cómo crear y editar una página Web que utiliza separación de código. Desde la perspectiva de la creación y ejecución de la página, no existe una diferencia significativa entre una página de un solo archivo y otra con separación de código.

Puede explorar otras características. Por ejemplo, podría:

Vea también

Tareas

Tutorial: Crear una página Web básica en Visual Web Developer

Conceptos

Tipos de sitios Web en Visual Web Developer