Edición del código de formularios Web Forms de ASP.NET en Visual Studio 2013

Artículo
03/22/2024

En muchas páginas ASP.NET Web Forms, se escribe código en Visual Basic, C# u otro lenguaje. El editor de código de Visual Studio puede ayudarle a escribir código rápidamente, a la vez que le ayuda a evitar errores. Además, el editor proporciona formas de crear código reutilizable para ayudar a reducir la cantidad de trabajo que necesita hacer.

En este tutorial se muestran varias características del editor de código de Visual Studio.

Durante este tutorial aprenderá a:

Corrección de errores de codificación insertados.
Refactorización y cambio del nombre del código.
Cambio del nombre de variables y objetos.
Inserción de fragmentos de código.

Requisitos previos

Para poder completar este tutorial, necesitará:

Microsoft Visual Studio 2013 o Microsoft Visual Studio Express 2013 para Web. .NET Framework se instala automáticamente.

Nota:

En toda esta serie de tutoriales a menudo se hará referencia a Microsoft Visual Studio 2013 y Microsoft Visual Studio Express 2013 para Web como Visual Studio.

Si usa Visual Studio, en este tutorial se supone que ha seleccionado la colección Desarrollo web de la configuración la primera vez que ha iniciado Visual Studio. Para más información, vea Procedimiento: Selección de la configuración del entorno de desarrollo web.

Creación de un proyecto de aplicación web y una página

En esta parte del tutorial, creará un proyecto de aplicación web y le agregará una nueva página.

Para crear un proyecto de aplicación web

Abra Microsoft Visual Studio.
En el menú Archivo, seleccione Nuevo proyecto.

Aparecerá el cuadro de diálogo Nuevo proyecto.
Seleccione el grupo de plantillas Plantillas ->Visual C# ->Web de la izquierda.
Elija la plantilla Aplicación web ASP.NET en la columna central.
Asigne el nombre BasicWebApp al proyecto y haga clic en el botón Aceptar.
A continuación, seleccione la plantilla Web Forms y haga clic en el botón Aceptar para crear el proyecto.

Visual Studio crea un proyecto que incluye funcionalidad precompilada basada en la plantilla Web Forms.

Creación de una página de ASP.NET Web Forms

Al crear una aplicación de Web Forms mediante la plantilla de proyecto Aplicación web ASP.NET, Visual Studio agrega una página de ASP.NET (página de Web Forms) denominada Default.aspx, así como otros archivos y carpetas. Puede usar la página Default.aspx como página principal de la aplicación web. Pero para este tutorial, creará y trabajará con una nueva página.

Para agregar una página a la aplicación web

En el Explorador de soluciones, haga clic con el botón derecho en el nombre de la aplicación web (en este tutorial es BasicWebSite) y, después, haga clic en Agregar ->Nuevo elemento.
Se abrirá el cuadro de diálogo Agregar nuevo elemento.
Seleccione el grupo de plantillas Visual C# ->Web de la izquierda. Luego, seleccione Formulario web en la lista central y asígnele el nombre FirstWebPage.aspx.
Haga clic en Agregar para agregar la página de Web Forms al proyecto.
Visual Studio crea la página y la abre.
A continuación, establezca esta nueva página como la página de inicio predeterminada. En el Explorador de soluciones, haga clic con el botón derecho en la página FirstWebPage.aspx y seleccione Establecer como página de inicio. La próxima vez que ejecute esta aplicación para probar el progreso, verá automáticamente esta nueva página en el explorador.

Corrección de errores de codificación insertados

El editor de código de Visual Studio le ayuda a evitar errores al escribir código y, si ha cometido un error, el editor de código le ayuda a corregirlo. En esta parte del tutorial, escribirá una línea de código que ilustra las características de corrección de errores en el editor.

Para corregir errores de programación simples en Visual Studio

En la vista Diseño, haga doble clic en la página en blanco para crear un controlador para el evento Load de la página.
Solo va a usar el controlador de eventos como un lugar para escribir código.
Dentro del controlador, escriba la siguiente línea que contiene un error y presione ENTRAR:
```
string myStr = "Loading..."
```
Al presionar ENTRAR, el editor de código coloca subrayados de color verde y rojo (normalmente se llaman líneas "onduladas") en áreas del código que tienen problemas. Un subrayado verde indica una advertencia. Un subrayado rojo indica un error que debe corregir.

Mantenga presionado el puntero del mouse sobre myStr para ver una información sobre herramientas en la que se indica la advertencia. Además, mantenga presionado el puntero del mouse sobre el subrayado rojo para ver el mensaje de error.

En la imagen siguiente se muestra el código con los subrayados.

Para corregir el error, debe agregar un punto y coma ; al final de la línea. La advertencia simplemente le notifica que aún no ha usado la variable myStr.

Nota:

Para ver los valores actuales de formato de código en Visual Studio, seleccione Herramientas ->Opciones ->Fuentes y colores.

Refactorización y cambio de nombre

La refactorización es una metodología de software que implica la reestructuración del código para facilitar la comprensión y el mantenimiento, a la vez que se conserva su funcionalidad. Un ejemplo sencillo podría ser escribir código en un controlador de eventos para obtener datos de una base de datos. A medida que desarrolla la página, descubre que necesita acceder a los datos desde varios controladores diferentes. Por tanto, para refactorizar el código de la página, crea un método de acceso a datos en la página e insertar llamadas al método en los controladores.

El editor de código incluye herramientas para ayudarle a realizar varias tareas de refactorización. En este tutorial, trabajará con dos técnicas de refactorización: el cambio de nombre de las variables y la extracción de métodos. Otras opciones de refactorización incluyen encapsular campos, promover variables locales a parámetros de método y administrar parámetros de método. La disponibilidad de estas opciones de refactorización depende de la ubicación en el código.

Refactorización de código

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

En esta parte del tutorial, escribirá código simple del que después extraerá un método. La refactorización es compatible con C#, por lo que creará una página que use C# como lenguaje de programación.

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

Cambie a la vista Diseño.
En el Cuadro de herramientas, en la pestaña Estándar, arrastre un control Button a la página.

Haga doble clic en el control Button para crear un controlador para su evento Click y 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, usa un bucle para cargarlo con valores y, después, usa otro bucle para mostrar el contenido del objeto ArrayList.

Presione CTRL+F5 para ejecutar la página y, después, haga clic en el control button para asegurarse de que ve la siguiente salida:
```
i = 0
i = 1
i = 2
i = 3
i = 4
```
Vuelva al editor de código y, después, seleccione las siguientes líneas en el controlador de eventos.
```
for(i=0; i<alist.Count; i++) 
{
      Response.Write("<br />" + alist[i]);
}
```
Haga clic con el botón derecho en la selección, haga clic en Refactorizar y, después, elija Extraer método.

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

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

El editor de código crea un método denominado DisplayArrayy coloca una llamada al nuevo método en el controlador Click donde se encontraba 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);
}

Presione CTRL+F5 para volver a ejecutar la página y haga clic en el botón.

La página funciona igual que antes. Ahora el método DisplayArray se puede llamar desde cualquier lugar de la clase de página.

Cambio de nombre de variables

Al trabajar con variables, así como con objetos, es posible que quiera cambiarles el nombre después de que ya se les haga referencia en el código. Pero cambiar el nombre de variables y objetos puede hacer que el código se interrumpa si olvida cambiar el nombre de una de las referencias. Por tanto, puede usar la refactorización para realizar el cambio de nombre.

Para usar la refactorización para cambiar el nombre de una variable

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

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

Haga clic con el botón derecho en el nombre de variable alist, elija Refactorizar y despuésCambiar nombre.

Aparecerá el cuadro de diálogo Cambiar nombre.
En el cuadro Nuevo nombre, escriba ArrayList1 y asegúrese de que se ha seleccionado la casilla Vista previa de los cambios de referencia. A continuación, haga clic en Aceptar.

Aparece el cuadro de diálogo Vista previa de los cambios, en el que se muestra un árbol que contiene todas las referencias a la variable que se va a cambiar de nombre.
Haga clic en Aplicar para cerrar el cuadro de diálogo Vista previa de los cambios.

Se cambia el nombre de las variables que hacen referencia específicamente a la instancia seleccionada. Pero tenga en cuenta que no se cambia el nombre de la variable alist de 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 se 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 el nombre de las variables es diferente de simplemente realizar una acción de búsqueda y reemplazo en el editor; la refactorización cambia el nombre de las variables con conocimiento de la semántica de la variable con la que trabaja.

Insertar fragmentos de código

Como hay muchas tareas de codificación que los desarrolladores de Web Forms suelen necesitar realizar, el editor de código proporciona una biblioteca de fragmentos o bloques de código ya escritos. Puede insertar estos fragmentos de código en la página.

Cada lenguaje que se usa en Visual Studio tiene pequeñas diferencias en la forma de insertar fragmentos de código. Para obtener información sobre cómo insertar fragmentos de código, vea Fragmentos de código de IntelliSense de Visual Basic. Para obtener información sobre cómo insertar fragmentos de código en Visual C#, vea Fragmentos de código de Visual C#.

Pasos siguientes

En este tutorial se han mostrado las características básicas del editor de código de Visual Studio 2010 para corregir errores en el código, refactorizar código, cambiar el nombre de variables e insertar fragmentos de código en el código. Las características adicionales del editor pueden hacer que el desarrollo de aplicaciones sea rápido y fácil. Por ejemplo, puedes:

Obtenga más información sobre las características de IntelliSense, como modificar las opciones de IntelliSense, administrar fragmentos de código y buscar fragmentos de código en línea. Para más información, vea Usar IntelliSense.
Aprenda a crear fragmentos de código propios. Para más información, vea Creación y uso de fragmentos de código de IntelliSense
Obtenga más información sobre las características específicas de Visual Basic de fragmentos de código de IntelliSense, como personalizar los fragmentos de código y solucionar problemas. Para más información, vea Fragmentos de código de IntelliSense de Visual Basic
Obtenga más información sobre las características específicas de C# de IntelliSense, como la refactorización y los fragmentos de código. Para más información, vea IntelliSense para Visual C#.