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 de 5 a 10 minutos sobre cómo usar Visual Studio, creará una aplicación web simple "Hola mundo" mediante el uso de una plantilla de proyecto ASP.NET y el lenguaje de programación C#.In this 5-10 minute introduction to how to use Visual Studio, you'll create a simple "Hello World" web app by using an ASP.NET project template and the C# programming language.

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 todos los archivos de plantilla para crear una aplicación web, sin necesidad de agregar nada más.The project type comes with all template files to create a web app, 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 izquierdo del cuadro de diálogo Nuevo proyecto, expanda Visual C# y luego elija .NET Core.In the left pane of the New Project dialog box, expand Visual C#, and then choose .NET Core. En el panel central, elija Aplicación web ASP.NET Core.In the middle pane, choose ASP.NET Core Web Application. Luego asigne un nombre al archivo HelloWorld y elija Aceptar.Then, name your file HelloWorld and choose OK.

    Creación de un proyecto de aplicación web ASP.NET Core para C#

    Nota

    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.

    Abrir el Instalador de Visual Studio desde el cuadro de diálogo Nuevo proyecto

    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 haga clic en Modificar.Choose the ASP.NET and web development workload, and then choose Modify.

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

    (Es posible que deba cerrar Visual Studio para continuar con la instalación de la carga de trabajo nueva).(You might have to close Visual Studio before you can continue installing the new workload.)

  4. En el cuadro de diálogo Nueva aplicación web ASP.NET Core, compruebe que ASP.NET Core 2.0 aparece en el menú desplegable de la parte superior.In the New ASP.NET Core Web Application dialog box, verify that ASP.NET Core 2.0 appears in the top drop-down menu. Luego elija Aplicación web y Aceptar.Then, choose Web Application and choose OK.

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

Poco después, Visual Studio abre el archivo de proyecto.Soon after, Visual Studio opens your project file.

Creación de la aplicaciónCreate the app

  1. En el Explorador de soluciones, expanda la carpeta Páginas y después elija About.cshtml.In the Solution Explorer, expand the Pages folder, and then choose About.cshtml.

    Selección del archivo About.cshtml desde el Explorador de soluciones

    Este archivo corresponde a una página denominada Acerca de de la aplicación web.This file corresponds to a page that's named About in the web app.

    Página Acerca de de la aplicación web

    En el editor, verá el código HTML para el área "información adicional" de la página Acerca de.In the editor, you'll see HTML code for the "additional information" area of the About page.

    El código HTML para el área de información adicional en el editor de Visual Studio

  2. Cambie el texto "información adicional" para que rece "Hello World!".Change the "additional information" text to read "Hello World!".

    Cambio del código HTML predeterminado para el área de información adicional en el editor de Visual Studio

  3. En el Explorador de soluciones, expanda About.cshtml y luego elija About.cshtml.cs.In the Solution Explorer, expand About.cshtml, and then choose About.cshtml.cs. (Este archivo también se corresponde con la página Acerca de de la aplicación web).(This file also corresponds with the About page in your web app.)

    Selección del archivo About.cshtml desde el Explorador de soluciones

    En el editor, verá el código de C# que incluye texto para el área "Descripción de la aplicación" de la página Acerca de.In the editor, you'll see C# code that includes text for the "application description" area of the About page.

    El código de C# para el área de descripción de la aplicación en el editor de Visual Studio

  4. Cambie el texto del mensaje "descripción de la aplicación" para que rece "¿Cuál es mi mensaje?".Change the "application description" message text to read "What's my message?".

    Cambio del texto del mensaje predeterminado para el área de descripción de la aplicación en el editor de Visual Studio

Ejecutar la aplicaciónRun the app

  1. Presione Ctrl+F5 para ejecutar la aplicación y abrirla en un explorador web.Press Ctrl+F5 to run the app and open it in a 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 mediante 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 by 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.

  2. En la parte superior de la página web, elija Acerca de.At the top of the web page, choose About.

    Selección de Acerca de en la página web

  3. Vea el texto actualizado que agregó a la página Acerca de.View the updated text that you added to the About page.

    Visualización de la página Acerca de actualizada que incluye el texto agregado

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

¡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 (entorno de desarrollo integrado) de Visual Studio.We hope you learned a little bit about C#, ASP.NET Core, and the Visual Studio IDE (integrated development environment).

Pasos siguientesNext steps

Para obtener más información, continúe con el tutorial siguiente:To learn more, continue with the following tutorial:

Vea tambiénSee also

Publicar una aplicación web en Azure App Service mediante Visual StudioPublish your web app to Azure App Service by using Visual Studio