Compartir a través de

Tutorial: Edición de código en páginas Web en Visual Web Developer

  • Artículo

Actualización: noviembre 2007

En muchas páginas web ASP.NET se escribe código en Visual Basic, C# u otro lenguaje. El editor de código de Visual Web Developer puede ayudarle a escribir código rápidamente y sin cometer errores. Además, el editor proporciona maneras de crear código reutilizable que contribuye a reducir la cantidad de trabajo necesario.

Este tutorial muestra distintas características del editor de código. Algunas de las funciones del editor de código dependen del lenguaje con el que se crea el código. Por lo tanto, en este tutorial creará dos páginas: una que utiliza Visual Basic como lenguaje de programación y otra que utiliza C#.

Durante este tutorial aprenderá a:

  • Corregir errores (en Visual Basic).

  • Refactorizar y cambiar el nombre del código (en C#).

  • Cambiar el nombre de los símbolos.

  • Insertar fragmentos de código (en Visual Basic y C#).

Requisitos previos

Para poder completar este tutorial, necesitará:

  • Visual Studio o Visual Web Developer.

Para obtener una introducción a Visual Web Developer, 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, según los pasos indicados en Tutorial: Crear una página Web básica en Visual Web Developer), puede usar dicho 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.

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

  4. En el cuadro Ubicación, seleccione Sistema de archivos y escriba el nombre de la carpeta donde desee guardar las páginas del sitio Web.

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

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

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

  6. Haga clic en Aceptar.

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

Corregir errores en Visual Basic

El editor de código de Visual Web Developer le ayuda a evitar errores cuando escribe código y, si comete algún error, el editor de código le ayuda a corregirlo. En esta parte del tutorial, escribirá unas líneas de código que ilustran las características de corrección de errores del editor.

El comportamiento del editor de código depende del lenguaje en el que se está escribiendo el código. En general, el editor de código de Visual Basic 2008 proporciona información de errores más detallada mientras se escribe.

Para probar la corrección de errores en Visual Basic

  1. En la vista Diseño, haga doble clic en la página en blanco para crear un controlador para el evento Load en la página.

    Sólo está utilizando el controlador de eventos como un lugar para escribir código.

  2. Dentro del controlador, escriba la línea siguiente que contiene un error:

    dim var1 as inger

    Cuando presiona ENTRAR, el editor de código subraya la palabra inger, lo que indica que no se reconoce la palabra. Observe que la parte bajo la línea es un subrayado pequeño.

  3. Mantenga el puntero del mouse sobre palabra inger para ver información sobre herramientas que indica cuál es el error.

  4. Mantenga el puntero del mouse sobre el subrayado, bajo la línea.

    El subrayado se expande en un icono.

  5. Haga clic en el icono.

    Se muestra una lista de posibles correcciones para palabra inger.

  6. Seleccione Cambiar 'enro' a Entero.

Refactorizar y cambiar el nombre del código en C#

La refactorización es una metodología de software que implica la reestructuración del código para facilitar su comprensión y mantenimiento, al mismo tiempo que se conserva su funcionalidad. Un ejemplo simple podría ser la escritura de código en un controlador de eventos para obtener datos de una base de datos. Cuando desarrolla su página, descubre que necesita tener acceso a los datos de varios controladores diferentes. Por consiguiente, refactoriza el código de la página creando una función de acceso a datos en la página e insertando llamadas a la función en los controladores.

El editor de código incluye herramientas que ayudan a realizar distintas tareas de refactorización. En este tutorial, trabajará con dos técnicas de refactorización: cambiar el nombre de los símbolos y extraer un método. Otras opciones de refactorización incluyen la encapsulación de campos, la promoción de variables locales a parámetros de método y la administración de parámetros de método. La disponibilidad de estas opciones de refactorización depende de la ubicación dentro del código. Por ejemplo, si resalta código que no es una declaración de campo, no podrá seleccionar la opción Encapsular campo. Si resalta una variable en un método de evento, no podrá seleccionar Promocionar variable local a parámetro porque las firmas del controlador de eventos son constantes.

Refactorizar código

Un escenario de refactorización común es crear (extraer) un método a partir de código que está dentro de otro miembro. Esto reduce el tamaño del miembro original y permite reutilizar el código extraído.

En esta parte del tutorial, escribirá un poco de código sencillo y, a continuación, extraerá un método de él. La refactorización se admite para C#, por lo que creará una página que utiliza C# como lenguaje de programación.

Para crear una página en C#

  1. En el Explorador de soluciones, haga clic con el botón secundario del mouse (ratón) en el nombre del sitio Web y, a continuación, seleccione Agregar nuevo elemento.

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

  3. En la lista Lenguaje, haga clic en C#.

    Nota:

    Puede dejar el nombre Default2.aspx.

  4. Haga clic en Agregar para crear y abrir la nueva página.

Para extraer un método en una página de C#

  1. Cambie a la vista Diseño.

  2. En el Cuadro de herramientas, desde la ficha Estándar, arrastre un control Button a la página.

  3. Haga doble clic en el control Button a fin de crear un controlador para su evento Click y, a continuación, agregue el código resaltado siguiente.

    protected void Button1_Click(object sender, EventArgs e)
{
    System.Collections.ArrayList alist =         new System.Collections.ArrayList();    int i;    string arrayValue;    for(i=0; i<5; i++)    {        arrayValue = "i = " + i.ToString();        alist.Add(arrayValue);    }    for(i=0; i<alist.Count; i++)    {        Response.Write("<br />" + alist[i]);    }
}

    El código crea un objeto ArrayList, utiliza un bucle para cargarlo con valores y, después, utiliza otro bucle para mostrar el contenido del objeto ArrayList.

  4. Presione CTRL+F5 para ejecutar la página y, a continuación, haga clic en el botón para comprobar que se muestra el siguiente resultado:

    i = 0
i = 1
i = 2
i = 3
i = 4

  5. Vuelva al editor de código y, a continuación, seleccione las líneas siguientes en el controlador de eventos.

       for(i=0; i<alist.Count; i++)
   {
      Response.Write("<br />" + alist[i]);
   }

  6. Haga clic con el botón secundario del mouse en la selección, haga clic en Refactorizar y, a continuación, seleccione Extraer método.

    Aparecerá el cuadro de diálogo Extraer método.

  7. En el cuadro Nuevo nombre de método, escriba DisplayArray y haga clic en Aceptar.

    El editor de código crea un nuevo método denominado DisplayArray y coloca una llamada al nuevo método en el controlador Click donde estaba originalmente el bucle.

    protected void Button1_Click(object sender, EventArgs e)
{
    System.Collections.ArrayList alist = 
        new System.Collections.ArrayList();
    int i;
    string arrayValue;
    for(i=0; i<5; i++)
    {
        arrayValue = "i = " + i.ToString();
        alist.Add(arrayValue);
    }
    i = DisplayArray(alist, i);
}

  8. Presione CTRL+F5 para ejecutar de nuevo la página y haga clic en el botón.

    La página funciona igual que antes.

Cambiar el nombre de símbolos

Cuando trabaja con variables y objetos (que también se conocen como símbolos), quizás desee cambiar el nombre de los símbolos después de que se les haya hecho referencia en el código. Sin embargo, cambiar el nombre del símbolo puede hacer que el código se interrumpa si olvida cambiar el nombre de una de las referencias al símbolo. Por consiguiente, puede utilizar la refactorización para realizar el cambio de nombre.

Para utilizar la refactorización para cambiar el nombre de los símbolos

  1. En el controlador de eventos Click, busque la línea siguiente:

    System.Collections.ArrayList alist = 
    new System.Collections.ArrayList;

  2. Haga clic con el botón secundario del mouse en el nombre de variable alist, seleccione Refactorizar y Cambiar nombre.

    Aparece el cuadro de diálogo Cambiar nombre.

  3. En el cuadro Nuevo nombre, escriba ArrayList1 y, a continuación, presione ENTRAR.

    Aparece el cuadro de diálogo Obtener vista previa de cambios, que muestra un árbol que contiene todas las referencias al símbolo cuyo nombre ha cambiado.

  4. Haga clic en Aplicar para cerrar el cuadro de diálogo Obtener vista previa de cambios.

    Se cambia el nombre de las variables que hacen referencia específicamente a la instancia que seleccionó. Sin embargo, observe que no se cambia el nombre de la variable alist en la línea siguiente.

    private int DisplayArray(System.Collections.ArrayList alist, 
    int i)

    No se cambia el nombre de la variable alist de esta línea porque no representa el mismo valor que la variable alist cuyo nombre ha cambiado. La variable alist de la declaración DisplayArray es una variable local para ese método. Esto ilustra que el uso de la refactorización para cambiar nombres de símbolos es diferente que la simple ejecución de una acción de búsqueda y sustitución en el editor; la refactorización cambia los nombres de los símbolos con conocimiento de la semántica del símbolo con el que está trabajando.

Insertar fragmentos de código

Como hay muchas tareas de código que los desarrolladores de páginas Web tienen que realizar con frecuencia, el editor de código proporciona una biblioteca de fragmentos de código o bloques de código previamente escrito. Puede insertar estos fragmentos de código en sus páginas.

Cada lenguaje que utiliza en Visual Studio tiene ligeras diferencias en la manera de insertar fragmentos de código. Para obtener información sobre cómo insertar fragmentos de código en Visual Basic, vea Cómo: Insertar fragmentos de código en el código (Visual Basic). Para obtener información sobre cómo insertar fragmentos de código en Visual C#, vea Cómo: Utilizar fragmentos de código (C#).

Pasos siguientes

Este tutorial ha explicado las características básicas del editor de código de Visual Studio 2008 para corregir errores en el código, refactorizar código, cambiar el nombre de símbolos e insertar fragmentos de código. Otras características adicionales del editor pueden acelerar y facilitar el desarrollo de aplicaciones. Por ejemplo, podría:

  • Obtener más información sobre las características de IntelliSense, como modificar opciones de IntelliSense, administrar fragmentos de código y buscar fragmentos de código en pantalla. Para obtener más información, vea Utilizar IntelliSense.

  • Obtener información sobre cómo crear sus propios fragmentos de código. Para obtener más información, vea Crear y utilizar fragmentos de código de IntelliSense.

  • Obtener más información sobre las características específicas de Visual Basic para los fragmentos de código de IntelliSense, como personalizar los fragmentos de código y solucionar problemas. Para obtener más información, vea Fragmentos de código de IntelliSense de Visual Basic.

  • Obtener más información sobre las características específicas de C# para IntelliSense, como la refactorización y los fragmentos de código. Para obtener más información, vea Características del editor de código de Visual C#.

Vea también

Conceptos

Fragmentos de código de IntelliSense de Visual Basic

Refactorización

Fragmentos de código (C#)

Otros recursos

Modificar texto, código y marcado

Utilizar IntelliSense