Compartir a través de

Tutorial: Utilizar código compartido en sitios Web en Visual Web Developer

  • Artículo

Actualización: noviembre 2007

Cuando cree sitios Web, Visual Web Developer le permite crear con facilidad código compartido en archivos de clase, que se pueden utilizar en las páginas de la aplicación, incluso sin compilar los archivos de clase.

Nota:

Si tiene ensamblados existentes (archivos .dll), puede agregarlos al directorio Bin del sitio Web y, así, el sitio Web hace referencia a los ensamblados automáticamente.

En este tutorial, creará una clase simple y, a continuación, la utilizará en una página Web ASP.NET.

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

  • Agregar una clase a un sitio Web.

  • Hacer que Visual Web Developer haga referencia al componente automáticamente.

Requisitos previos

Para poder completar este tutorial, necesitará lo siguiente:

  • Visual Web Developer (Visual Studio).

  • El entorno .NET Framework.

En este tutorial se da por supuesto que tiene conocimientos generales del trabajo en Visual Web Developer. Para obtener una introducción, vea Tutorial: Crear una página Web básica en Visual Web Developer.

Crear el sitio y la página Web

Si ya ha creado un sitio Web en Visual Web Developer (por ejemplo, mediante los pasos descritos en Tutorial: Crear una página Web básica en Visual Web Developer o en Tutorial: Crear un sitio Web local de IIS en Visual Web Developer), puede utilizar ese sitio Web y pasar a la sección siguiente. De lo contrario, cree un sitio Web y una página nuevos siguiendo estos pasos.

Para crear un sitio Web del sistema de archivos

  1. Abra Visual Web Developer.

  2. En el menú Archivo, haga clic en Nuevo sitio Web. En Visual Web Developer Express Edition, en el menú Archivo, haga clic en Nuevo y, a continuación, en Sitio Web.

    Aparece el cuadro de diálogo Nuevo sitio Web.

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

  4. En el cuadro Ubicación, escriba el nombre de la carpeta dónde desea conservar las páginas del sitio Web.

    Por ejemplo:

    • Si está creando un sitio Web del sistema de archivos, escriba C:\SampleSite.

    • Si tiene IIS instalado y está creando un sitio Web HTTP, escriba https://localhost/SampleSite.

  5. En la lista Lenguaje, seleccione el lenguaje de programación con el que prefiera trabajar.

  6. Haga clic en Aceptar.

    Visual Web Developer crea el sitio Web y abre una nueva página denominada Default.aspx.

Crear una clase compartida

Puede crear clases reutilizables guardándolas en una carpeta denominada App_Code. Visual Web Developer supervisa la carpeta App_Code y, cuando se agregan nuevos archivos de clase, pone los componentes a disposición del resto del código de la aplicación. De manera predeterminada, las clases de la carpeta App_Code se compilan en tiempo de ejecución en un ensamblado único.

Nota:

Sólo debe ubicar clases (y otros tipos compartidos compatibles) en la carpeta App_Code. No ubique páginas, controles de usuario Web u otros archivos con elementos que no son de código en la carpeta App_Code.

Para crear una carpeta App_Code

  • En el Explorador de soluciones, haga clic con el botón secundario en el nombre del sitio Web, haga clic en Agregar carpeta y, a continuación, haga clic en App_Code Carpeta.

    Ahora puede agregar el componente al sitio.

Para crear una clase compartida en la carpeta App_Code

  1. En el Explorador de soluciones, haga clic con el botón secundario en App_Code y, a continuación, haga clic en Agregar nuevo elemento.

    Nota:

    Asegúrese de crear el nuevo elemento en la carpeta App_Code, no en la carpeta raíz del sitio Web.

  2. En Plantillas instaladas de Visual Studio, haga clic en Clase.

  3. En el cuadro Nombre, escriba SampleClass1.

  4. En la lista Lenguaje, seleccione el lenguaje utilizado por la página Web que utilizará la clase compartida.

  5. Haga clic en Agregar.

    Visual Web Developer abre el nuevo archivo de clase en el editor.

  6. Cree una clase con una propiedad única denominada testString copiando el código siguiente en el archivo de clase:

    Public Class SampleClass1
    private testStringValue As String
    Public Property testString as String
        Get
            return testStringValue
        End Get
        Set (Value as String)
            testStringValue = value
        End Set
    End Property
End Class

    using System;
public class SampleClass1
{
    public SampleClass1() 
    {
    }
    private string testStringValue;
    public string testString 
    {
        get
        {
              return testStringValue;
        }
        set
        {
               testStringValue = value;
        }
    }
}

  7. Guarde el archivo y ciérrelo.

    Observe que el archivo no se almacena como un archivo compilado.

    Nota:

    Al trabajar con clases compartidas en la carpeta App_Code, no es necesario guardar los componentes para que Visual Web Developer mantenga una referencia a los componentes. Si la página Web y el componente están en el mismo lenguaje de programación, Visual Web Developer mantiene una referencia al componente en la memoria. En este caso, va a cerrar el archivo porque ya ha terminado de utilizarlo.

Utilizar la clase compartida

El paso siguiente es utilizar la clase compartida en una página Web ASP.NET. Puede utilizar la página Default.aspx que se creó al crear el sitio Web.

Para utilizar la clase compartida

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

    Nota:

    Si no tiene una página Default.aspx, puede utilizar otra página. Alternativamente, puede agregar una nueva página al sitio Web. Para ello, en el Explorador de soluciones, haga clic con el botón secundario en el nombre del sitio Web, haga clic en Agregar nuevo elemento y, a continuación, en Web Forms. En la lista Lenguaje, escriba el mismo lenguaje de programación que utilizó para el componente y, a continuación, haga clic en Aceptar.

  2. Desde la carpeta Estándar del cuadro de herramientas, arrastre un control TextBox, un control Label y un control Button a la página.

    Nota:

    Para este tutorial, el diseño de la página no es importante.

  3. Haga doble clic en el control Button para crear un controlador Click para él.

    El código de controlador de clic puede ser similar al siguiente:

    Protected Sub Button1_Click(ByVal sender As Object, _
    ByVal e As System.EventArgs) Handles Button1.Click

End Sub

    protected void Button1_Click(object sender, EventArgs e)
{

}

  4. En el controlador, escriba lo siguiente:

    Dim sc As New

    SampleClass1 sc = new

    Al presionar la BARRA ESPACIADORA después de escribir New o new, Visual Web Developer muestra una lista de las clases disponibles. La clase que creó en la sección anterior, SampleClass1, está incluida en la lista.

  5. Finalice la instrucción escribiendo SampleClass1 o haciendo doble clic en él en la lista, para que la instrucción diga lo siguiente:

    Dim sc As New SampleClass1

    SampleClass1 sc = new SampleClass1();

  6. Presione ENTRAR y, a continuación, escriba lo siguiente:

    sc.

    Nada más escribir el punto, Visual Web Developer vuelve a mostrar una lista de los miembros para ayudarle a seleccionar uno de la clase de ejemplo.

  7. Finalice la instrucción y el controlador de la manera siguiente:

    sc.testString = TextBox1.Text
Label1.Text = sc.testString

    sc.testString = TextBox1.Text;
Label1.Text = sc.testString;

  8. Guarde los archivos.

Probar la página y la clase

Puede ejecutar el sitio Web para ver que la clase compartida funciona correctamente.

Para probar la página y el componente

  1. Abra la página Default.aspx.

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

  3. Cuando la página se muestre en el explorador, escriba algo en el cuadro de texto y, a continuación, haga clic en el botón.

    Al hacer esto, se establece una propiedad en la clase simple, que se muestra a continuación en el control Label.

Si utiliza el Explorador de Windows de Microsoft para examinar el directorio en que se encuentra el sitio Web, verá la página y la carpeta App_Code. Observe que no hay ningún archivo .dll ni otro código ejecutable en la carpeta App_Code ni en ningún lugar por debajo de la raíz del sitio Web. En lugar de ello, Visual Web Developer ha compilado dinámicamente la página y la clase compartida.

Pasos siguientes

Este tutorial muestra cómo agregar clases compartidas a un sitio Web sin compilar los componentes. Si lo desea, puede utilizar las clases compartidas de maneras diferentes. Por ejemplo, podría:

Vea también

Conceptos

Diseño de sitios Web ASP.NET

Carpetas de código compartido en sitios Web ASP.NET