Inicio rápido: uso de Visual Studio para crear su primera aplicación web ASP.NET CoreQuickstart: Use Visual Studio to create your first ASP.NET Core web app

En esta introducción al entorno de desarrollo integrado (IDE) de Visual Studio, con una duración de entre 5 y 10 minutos, creará una sencilla aplicación web C# ASP.NET Core.In this 5-10 minute introduction to the Visual Studio integrated development environment (IDE), you'll create a simple C# ASP.NET Core web application.

Si todavía no ha instalado Visual Studio, vaya a la página de descargas de Visual Studio para instalarlo de forma gratuita.If you haven't already installed Visual Studio, go to the Visual Studio downloads page to install it for free.

Crear un proyectoCreate a project

En primer lugar, creará un proyecto de aplicación web ASP.NET Core.First, you'll create an ASP.NET Core web application project. En el tipo de proyecto se incluyen los archivos de plantilla, que constituyen una aplicación web funcional por sí mismos, sin necesidad de agregar nada más.The project type comes with template files that constitute a functional web application, before you've even added anything!

  1. Abra Visual Studio 2017.Open Visual Studio 2017.

  2. En la barra de menús superior, seleccione Archivo > Nuevo > Proyecto.From the top menu bar, choose File > New > Project.

  3. En el panel de la izquierda del cuadro de diálogo Nuevo proyecto, expanda Visual C# y seleccione .NET Core.In the New Project dialog box, in the left pane, expand Visual C#, then choose .NET Core. En el panel central, elija Aplicación web ASP.NET Core y después elija Aceptar.In the middle pane, choose ASP.NET Core Web Application, then choose OK.

    Si no ve la categoría de plantilla de proyecto de .NET Core, elija el vínculo Abrir el instalador de Visual Studio en el panel de la izquierda.If you don't see the .NET Core project template category, choose the Open Visual Studio Installer link in the left pane. Se iniciará el Instalador de Visual Studio.The Visual Studio Installer launches. Elija la carga de trabajo Desarrollo de ASP.NET y web y después elija Modificar.Choose the ASP.NET and web development workload, then choose Modify.

    Carga de trabajo ASP.NET en el instalador de Visual Studio

  4. En el cuadro de diálogo Nueva aplicación web ASP.NET Core, seleccione ASP.NET Core 2.0 en el menú desplegable situado en la parte superior.In the New ASP.NET Core Web Application dialog box, select ASP.NET Core 2.0 from the top drop-down menu. Si en la lista no aparece ASP.NET Core 2.0, debe instalarlo siguiendo el vínculo Descargar que aparece en una barra amarilla en la parte superior del cuadro de diálogo. Elija Aceptar.(If you don't see ASP.NET Core 2.0 in the list, install it by following the Download link that should appear in a yellow bar near the top of the dialog box.) Choose OK.

    Cuadro de diálogo Nueva aplicación web ASP.NET Core

Explorar el IDEExplore the IDE

  1. En la barra de herramientas del Explorador de soluciones, expanda la carpeta Páginas y después elija About.cshtml para abrirla en el editor.In the Solution Explorer toolbar, expand the Pages folder, then choose About.cshtml to open it in the editor. Este archivo se corresponde con una página denominada Información de la aplicación web.This file corresponds to a page called About in the web application.

  2. En el editor, elija AboutModel, y después presione F12 o elija Ir a definición en el menú contextual (clic con el botón derecho).In the editor, choose AboutModel and then press F12 or choose Go To Definition from the context (right-click) menu. Este comando le lleva a la definición de la clase AboutModel de C#.This command takes you to the definition of the AboutModel C# class.

    Menú contextual Ir a definición

  3. A continuación, limpiaremos las directivas using en la parte superior del archivo empleando un acceso directo sencillo.Next we'll clean up the using directives at the top of the file using a simple shortcut. Elija cualquiera de las directivas atenuadas y aparecerá una bombilla Acciones rápidas justo debajo del símbolo de intercalación o en el margen izquierdo.Choose any of the greyed-out using directives and a Quick Actions light bulb will appear just below the caret or in the left margin. Elija la bombilla y después elija Eliminar instrucciones Using innecesarias.Choose the light bulb, and then choose Remove Unnecessary Usings.

    La instrucciones Using innecesarias se eliminan del archivo.The unnecessary usings are deleted from the file.

  4. Cambie el cuerpo del método OnGet() por el código siguiente:In the OnGet() method, change the body to the following code:

    public void OnGet()
    {
      string directory = Environment.CurrentDirectory;
      Message = String.Format("Your directory is {0}.", directory);
    }
    
  5. Verá dos líneas de subrayado ondulado debajo de Environment y String, ya que estos tipos no están dentro del ámbito.You'll see two wavy underlines appear under Environment and String, because these types are not in scope. Abra la barra de herramientas Lista de errores para ver los mismos errores en la lista.Open the Error List toolbar to see the same errors listed there. Si no ve la barra de herramientas Lista de errores, elija Ver > Lista de errores en la barra de menús superior.(If you don't see the Error List toolbar, choose View > Error List from the top menu bar.)

    Lista de errores

  6. En la ventana del editor, coloque el cursor en cualquiera de las líneas que contenga el error y, a continuación, elija la bombilla Acciones rápidas situada en el margen izquierdo.In the editor window, place your cursor on either line that contains the error, then choose the Quick Actions light bulb in the left margin. En el menú desplegable, elija using System; para agregar esta directiva a la parte superior del archivo y resolver los errores.From the drop-down menu, choose using System; to add this directive to the top of your file and resolve the errors.

Ejecutar la aplicaciónRun the application

  1. Presione Ctrl+F5 para ejecutar la aplicación y abrirla en un explorador web.Press Ctrl+F5 to run the application and open it in a web browser.

  2. En la parte superior del sitio web, elija Información para ver el mensaje del directorio que ha agregado en el método OnGet() para la página Información.At the top of the web site, choose About to see the directory message you added in the OnGet() method for the About page.

  3. Cierre el explorador web.Close the web browser.

Nota

Si recibe un mensaje de error que indica No se puede conectar al servidor web "IIS Express", cierre Visual Studio y, luego, ábralo con la opción Ejecutar como administrador que aparece si hace clic con el botón derecho o en el menú contextual.If you get an error message that says Unable to connect to web server 'IIS Express', close Visual Studio and then open it using the Run as administrator option from the right-click or context menu. A continuación, vuelva a ejecutar la aplicación.Then, run the application again.

¡Enhorabuena por completar este tutorial de inicio rápido!Congratulations on completing this Quickstart! Esperamos que haya aprendido un poco sobre el IDE de Visual Studio.We hope you learned a little bit about the Visual Studio IDE. Si quiere profundizar más en sus capacidades, continúe con el tutorial que encontrará en la sección Tutoriales de la tabla de contenido.If you'd like to delve deeper into its capabilities, please continue with a tutorial in the Tutorials section of the table of contents.

Pasos siguientesNext steps

¡Enhorabuena por completar este tutorial de inicio rápido!Congratulations on completing this Quickstart! Esperamos que haya aprendido un poco sobre C#, ASP.NET Core y el IDE de Visual Studio.We hope you learned a little bit about C#, ASP.NET Core, and the Visual Studio IDE. Para obtener más información, continúe con el tutorial siguiente.To learn more, continue with the following tutorial.